Update pinhole & panorama image for consistency with the framework

Author: Tom-Notch

public/spherical-image/panorama.bin

@@ -29,6 +29,8 @@ interface Section {
   extra?: ReactNode;
   layout?: "horizontal" | "vertical";
   rightColumnWidth?: string;
+  /** Zero-based index of the card shown on top by default. */
+  defaultCard?: number;
 }
 
 const iframeClass = "block h-full w-full rounded-xl border-0";
@@ -54,6 +56,7 @@ const sections: Section[] = [
     id: "planar-image",
     label: "Planar Image",
     region: { left: 0, width: 17 },
+    defaultCard: 2,
     description: (
       <>
         Input images from <strong>any calibrated camera</strong> (pinhole,
@@ -114,6 +117,7 @@ const sections: Section[] = [
     id: "projection",
     label: "Projection",
     region: { left: 17, width: 15 },
+    defaultCard: 2,
     description: (
       <>
         Projecting all pixels onto the unit sphere yields a{" "}
@@ -487,20 +491,22 @@ function CardDeck({
   sectionId,
   deckRef,
   fullWidth,
+  defaultCard = 0,
 }: {
   cards: Card[];
   sectionId: string;
   deckRef?: RefObject<HTMLDivElement | null>;
   fullWidth?: boolean;
+  defaultCard?: number;
 }) {
-  const [frontIndex, setFrontIndex] = useState(0);
+  const [frontIndex, setFrontIndex] = useState(defaultCard);
   const [anim, setAnim] = useState<"none" | "swipe-out" | "fly-in">("none");
   const animatingRef = useRef(false);
 
   useEffect(() => {
-    setFrontIndex(0); // eslint-disable-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect -- reset on section change
+    setFrontIndex(defaultCard); // eslint-disable-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect -- reset on section change
     setAnim("none"); // eslint-disable-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
-  }, [sectionId]);
+  }, [sectionId, defaultCard]);
 
   if (cards.length === 0) return null;
 
@@ -1082,6 +1088,7 @@ export function InteractiveFramework() {
                       sectionId={displayedSection.id}
                       deckRef={deckElRef}
                       fullWidth
+                      defaultCard={displayedSection.defaultCard}
                     />
                   )}
                 </div>
@@ -1115,6 +1122,7 @@ export function InteractiveFramework() {
                         cards={displayedSection.cards}
                         sectionId={displayedSection.id}
                         deckRef={deckElRef}
+                        defaultCard={displayedSection.defaultCard}
                       />
                     </div>
                   ) : (