{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "phone-stack", "title": "Phone Stack", "description": "Stacked phone screens with video. Phone screens rise out of a blur from below one after another, and each new one pushes the stack back: the older screens shrink and step up so only their tops peek out above the newest. Every screen plays its own clip under an iOS status bar. Proportions measured off a reference recording.", "dependencies": [ "remotion" ], "files": [ { "path": "registry/snap-cn/phone-stack/index.tsx", "content": "// Phone Stack · snapcn — https://snapcn.dev/docs/screens/phone-stack\n\"use client\";\n\nimport type { CSSProperties } from \"react\";\nimport {\n Easing,\n getRemotionEnvironment,\n interpolate,\n OffthreadVideo,\n Sequence,\n staticFile,\n useCurrentFrame,\n useVideoConfig,\n} from \"remotion\";\n\n/**\n * A \"phone stack\": phone screens rise out of a blur from below, one after\n * another, and each new one pushes the stack back — the older screens shrink\n * and step up so only their tops peek out above the newest, which settles in\n * front. Every screen plays its own clip under an iOS status bar.\n *\n * Proportions were measured off a two-screen reference recording (716 × 398,\n * 30fps) by tracking each screen's Dynamic Island: a screen one step back is\n * 0.83× the size and its top sits 24.6 reference px higher. The rise is the\n * reference's long ease-out. Lengths are reference pixels (`REF_W` wide) and\n * scale with the frame.\n *\n * Like `announce-title` it paints a world rather than a surface — a cream page\n * with a lavender glow — so it takes no `theme`/`mode`; its colours are props.\n */\n\nexport interface PhoneStackProps {\n /**\n * One clip per screen, in the order they arrive. Video URLs play muted;\n * images show as stills. Absolute URLs or paths under `public/`.\n */\n videos?: string[];\n /** Frames between one screen arriving and the next. */\n stagger?: number;\n /** The page. */\n background?: string;\n /** The glow the stack rises out of. */\n glowColor?: string;\n /** The status bar's ink over the clips. */\n statusColor?: string;\n /** The time in the status bar. */\n time?: string;\n speed?: number;\n className?: string;\n}\n\n/** Creator-style clips, 12s each. Absolute, because a root-relative default\n * becomes `staticFile()` in a render and 404s in the project this file was\n * just copied into. */\nconst DEFAULT_VIDEOS = [2, 3, 4, 5, 6].map(\n (n) => `https://media.snapcn.dev/demos/stock/wall-${n}.mp4`,\n);\n\n// ─── Geometry, in reference pixels ────────────────────────────────────────────\nexport const REF_W = 716;\nconst REF_H = 398;\n/** The front screen at rest: width, top edge, centre line. */\nexport const SCREEN = { w: 240, top: 74, cx: 358, radius: 26 } as const;\n/** Each step back: the size it keeps, and how far its top climbs (at scale 1). */\nexport const STEP_SCALE = 0.83;\nexport const STEP_RISE = 24.6;\n/** Screens deeper than this fade out as the next one arrives. */\nconst DEPTH = 3;\n/** An arriving screen starts below the frame, larger, blurred and clear. */\nconst ENTER = { top: 400, scale: 1.12, blur: 9 } as const;\n\n// ─── Timeline (30fps frames) ──────────────────────────────────────────────────\n/** One arrival or one step back. */\nexport const MOVE = 26;\nconst RISE = Easing.bezier(0.16, 1, 0.3, 1);\n\n/** Where a screen sits `depth` steps back: scale and top edge. */\nfunction slot(depth: number) {\n const scale = STEP_SCALE ** depth;\n let top = SCREEN.top;\n for (let d = 1; d <= depth; d++) top -= STEP_RISE * STEP_SCALE ** (d - 1);\n return { scale, top };\n}\n\nfunction resolveSrc(src: string): string {\n const isLocal = src.startsWith(\"/\") && !src.startsWith(\"//\");\n if (!isLocal || getRemotionEnvironment().isPlayer) return src;\n // A value that already came out of staticFile() carries the static base.\n const base = staticFile(\"_\").slice(0, -2);\n if (base && src.startsWith(`${base}/`)) return src;\n try {\n return staticFile(src.replace(/^\\/+/, \"\"));\n } catch {\n return src;\n }\n}\n\nconst isVideoSrc = (src: string) => /\\.(mp4|webm|mov|m4v)(?:[?#]|$)/i.test(src);\n\nconst cover: CSSProperties = {\n position: \"absolute\",\n inset: 0,\n width: \"100%\",\n height: \"100%\",\n maxWidth: \"none\",\n objectFit: \"cover\",\n};\n\n/** Signal, Wi-Fi and battery, drawn in `currentColor`. */\nfunction StatusIcons({ h }: { h: number }) {\n return (\n \n \n \n \n \n \n \n \n \n \n );\n}\n\nexport function PhoneStack({\n videos = DEFAULT_VIDEOS,\n stagger = 14,\n background = \"#f3f3ee\",\n glowColor = \"#cdb4e6\",\n statusColor = \"#ffffff\",\n time = \"9:41\",\n speed = 1,\n className,\n}: PhoneStackProps) {\n const { width, height, fps } = useVideoConfig();\n const tick = (speed * 30) / fps;\n const frame = useCurrentFrame() * tick;\n const u = width / REF_W;\n const dy = (height - REF_H * u) / 2;\n const n = videos.length;\n\n // How far a screen has come: 0 below the frame, 1 in front, 2 one step\n // back, … — every arrival after it adds one, on the same eased curve.\n const progress = (i: number) => {\n let p = 0;\n for (let k = i; k < n; k++) {\n p += interpolate(frame, [k * stagger, k * stagger + MOVE], [0, 1], {\n extrapolateLeft: \"clamp\",\n extrapolateRight: \"clamp\",\n easing: RISE,\n });\n }\n return p;\n };\n\n return (\n \n {/* The glow the stack rises out of. */}\n \n\n {videos.map((src, i) => {\n const p = progress(i);\n if (p <= 0) return null;\n // 0 → 1: the rise. Past 1: steps back, one per later arrival.\n const enter = Math.min(p, 1);\n const depth = Math.max(p - 1, 0);\n const lo = slot(Math.floor(depth));\n const hi = slot(Math.floor(depth) + 1);\n const f = depth - Math.floor(depth);\n const scale =\n enter < 1\n ? ENTER.scale + (1 - ENTER.scale) * enter\n : lo.scale + (hi.scale - lo.scale) * f;\n const top =\n enter < 1\n ? ENTER.top + (SCREEN.top - ENTER.top) * enter\n : lo.top + (hi.top - lo.top) * f;\n const blur = ENTER.blur * (1 - enter);\n const opacity =\n Math.min(1, enter * 2.5) *\n interpolate(depth, [DEPTH - 1, DEPTH], [1, 0], {\n extrapolateLeft: \"clamp\",\n extrapolateRight: \"clamp\",\n });\n if (opacity <= 0) return null;\n\n const w = SCREEN.w * scale * u;\n const h = w * (852 / 393);\n const island = { w: 0.32 * w, h: 0.094 * w, top: 0.028 * w };\n const resolved = resolveSrc(src);\n return (\n 0.05 ? `blur(${blur * u}px)` : undefined,\n zIndex: i,\n }}\n >\n {isVideoSrc(src) ? (\n \n \n \n ) : (\n // biome-ignore lint/performance/noImgElement: Remotion still\n \"\"\n )}\n {/* Status bar and Dynamic Island over the clip. */}\n \n \n \n {time}\n \n \n \n \n \n );\n })}\n\n {/* The stack's foot fades into the page and the glow. */}\n \n \n \n );\n}\n", "type": "registry:component", "target": "components/snap-cn/phone-stack.tsx" } ], "docs": "Docs and props: https://snapcn.dev/docs/screens/phone-stack?ref=cli — pass one clip per screen as videos; the page and glow are props. — 82 Pro components too — charts, launch scenes, device shots: https://snapcn.dev/docs/pricing?ref=cli-docs", "type": "registry:component" }