App Showcase

1"use client";
2 
3import {
4  AnimatePresence,
5  motion,
6  useMotionValue,
7  useReducedMotion,
8  useScroll,
9  useSpring,
10  useTransform,
11} from "framer-motion";
12import * as React from "react";
13 
14export type ShowcaseDevice = "iphone" | "android";
15export type ShowcaseMode = "scroll" | "loop" | "carousel" | "cluster";
16export type ShowcaseFrameColor = "black" | "silver" | "gold";
17 
18export type AppShowcaseProps = Omit<
19  React.HTMLAttributes<HTMLDivElement>,
20  "children"
21> & {
22  /** Device frame to render. */
23  device?: ShowcaseDevice;
24  /** Interaction mode — the "wow" behavior of the screen. */
25  mode?: ShowcaseMode;
26  /** Single-screen source (`scroll` / `loop` modes). A tall screenshot pans best. */
27  src?: string;
28  /** Single-screen video source (`scroll` / `loop`). Rendered over the screen. */
29  videoSrc?: string;
30  /** Multiple screens for `carousel` / `cluster` modes. */
31  screens?: string[];
32  /** Bezel finish. */
33  frameColor?: ShowcaseFrameColor;
34  /** Autoplay the carousel / start the loop (ignored under reduced motion). */
35  autoplay?: boolean;
36  /** Carousel autoplay interval / loop pass, in seconds. */
37  interval?: number;
38  /** Frame width in px. Height derives from the device aspect ratio. */
39  width?: number;
40  /** Accessible label for the screen media. */
41  alt?: string;
42};
43 
44// SPRING.smooth — surfaces / shared-layout feel (matches the rest of GodUI).
45const SPRING = { stiffness: 320, damping: 32, mass: 0.9 } as const;
46 
47// Device geometry as ratios of the frame width, so the phone looks identical at
48// any `width` (fixed rem radii/notch would distort at small sizes).
49const DEVICE: Record<
50  ShowcaseDevice,
51  { aspect: string; shellR: number; padR: number; screenR: number }
52> = {
53  iphone: {
54    aspect: "aspect-[433/882]",
55    shellR: 0.17,
56    padR: 0.035,
57    screenR: 0.13,
58  },
59  android: {
60    aspect: "aspect-[9/19.5]",
61    shellR: 0.11,
62    padR: 0.028,
63    screenR: 0.085,
64  },
65};
66 
67const FRAME_SHELL: Record<ShowcaseFrameColor, string> = {
68  black: "bg-neutral-900 ring-1 ring-neutral-700/60",
69  silver: "bg-neutral-300 ring-1 ring-neutral-100",
70  gold: "bg-[#e6cfa6] ring-1 ring-[#f3e6cf]",
71};
72 
73/** Renders an image or a video that fills the screen area. */
74function ScreenMedia({
75  src,
76  videoSrc,
77  alt,
78  className,
79}: {
80  src?: string;
81  videoSrc?: string;
82  alt?: string;
83  className?: string;
84}) {
85  if (videoSrc) {
86    return (
87      // Plain DOM <video> (no SVG foreignObject) sidesteps the Safari/iOS mask bug.
88      <video
89// … truncated