62:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 63:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 64:T2bc6,// Phone Stack · snapcn — https://snapcn.dev/docs/screens/phone-stack "use client"; import type { CSSProperties } from "react"; import { Easing, getRemotionEnvironment, interpolate, OffthreadVideo, Sequence, staticFile, useCurrentFrame, useVideoConfig, } from "remotion"; /** * A "phone stack": 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, which settles in * front. Every screen plays its own clip under an iOS status bar. * * Proportions were measured off a two-screen reference recording (716 × 398, * 30fps) by tracking each screen's Dynamic Island: a screen one step back is * 0.83× the size and its top sits 24.6 reference px higher. The rise is the * reference's long ease-out. Lengths are reference pixels (`REF_W` wide) and * scale with the frame. * * Like `announce-title` it paints a world rather than a surface — a cream page * with a lavender glow — so it takes no `theme`/`mode`; its colours are props. */ export interface PhoneStackProps { /** * One clip per screen, in the order they arrive. Video URLs play muted; * images show as stills. Absolute URLs or paths under `public/`. */ videos?: string[]; /** Frames between one screen arriving and the next. */ stagger?: number; /** The page. */ background?: string; /** The glow the stack rises out of. */ glowColor?: string; /** The status bar's ink over the clips. */ statusColor?: string; /** The time in the status bar. */ time?: string; speed?: number; className?: string; } /** Creator-style clips, 12s each. Absolute, because a root-relative default * becomes `staticFile()` in a render and 404s in the project this file was * just copied into. */ const DEFAULT_VIDEOS = [2, 3, 4, 5, 6].map( (n) => `https://media.snapcn.dev/demos/stock/wall-${n}.mp4`, ); // ─── Geometry, in reference pixels ──────────────────────────────────────────── export const REF_W = 716; const REF_H = 398; /** The front screen at rest: width, top edge, centre line. */ export const SCREEN = { w: 240, top: 74, cx: 358, radius: 26 } as const; /** Each step back: the size it keeps, and how far its top climbs (at scale 1). */ export const STEP_SCALE = 0.83; export const STEP_RISE = 24.6; /** Screens deeper than this fade out as the next one arrives. */ const DEPTH = 3; /** An arriving screen starts below the frame, larger, blurred and clear. */ const ENTER = { top: 400, scale: 1.12, blur: 9 } as const; // ─── Timeline (30fps frames) ────────────────────────────────────────────────── /** One arrival or one step back. */ export const MOVE = 26; const RISE = Easing.bezier(0.16, 1, 0.3, 1); /** Where a screen sits `depth` steps back: scale and top edge. */ function slot(depth: number) { const scale = STEP_SCALE ** depth; let top = SCREEN.top; for (let d = 1; d <= depth; d++) top -= STEP_RISE * STEP_SCALE ** (d - 1); return { scale, top }; } function resolveSrc(src: string): string { const isLocal = src.startsWith("/") && !src.startsWith("//"); if (!isLocal || getRemotionEnvironment().isPlayer) return src; // A value that already came out of staticFile() carries the static base. const base = staticFile("_").slice(0, -2); if (base && src.startsWith(`${base}/`)) return src; try { return staticFile(src.replace(/^\/+/, "")); } catch { return src; } } const isVideoSrc = (src: string) => /\.(mp4|webm|mov|m4v)(?:[?#]|$)/i.test(src); const cover: CSSProperties = { position: "absolute", inset: 0, width: "100%", height: "100%", maxWidth: "none", objectFit: "cover", }; /** Signal, Wi-Fi and battery, drawn in `currentColor`. */ function StatusIcons({ h }: { h: number }) { return ( ); } export function PhoneStack({ videos = DEFAULT_VIDEOS, stagger = 14, background = "#f3f3ee", glowColor = "#cdb4e6", statusColor = "#ffffff", time = "9:41", speed = 1, className, }: PhoneStackProps) { const { width, height, fps } = useVideoConfig(); const tick = (speed * 30) / fps; const frame = useCurrentFrame() * tick; const u = width / REF_W; const dy = (height - REF_H * u) / 2; const n = videos.length; // How far a screen has come: 0 below the frame, 1 in front, 2 one step // back, … — every arrival after it adds one, on the same eased curve. const progress = (i: number) => { let p = 0; for (let k = i; k < n; k++) { p += interpolate(frame, [k * stagger, k * stagger + MOVE], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: RISE, }); } return p; }; return (

{/* The glow the stack rises out of. */}

{videos.map((src, i) => { const p = progress(i); if (p <= 0) return null; // 0 → 1: the rise. Past 1: steps back, one per later arrival. const enter = Math.min(p, 1); const depth = Math.max(p - 1, 0); const lo = slot(Math.floor(depth)); const hi = slot(Math.floor(depth) + 1); const f = depth - Math.floor(depth); const scale = enter < 1 ? ENTER.scale + (1 - ENTER.scale) * enter : lo.scale + (hi.scale - lo.scale) * f; const top = enter < 1 ? ENTER.top + (SCREEN.top - ENTER.top) * enter : lo.top + (hi.top - lo.top) * f; const blur = ENTER.blur * (1 - enter); const opacity = Math.min(1, enter * 2.5) * interpolate(depth, [DEPTH - 1, DEPTH], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp", }); if (opacity <= 0) return null; const w = SCREEN.w * scale * u; const h = w * (852 / 393); const island = { w: 0.32 * w, h: 0.094 * w, top: 0.028 * w }; const resolved = resolveSrc(src); return (

0.05 ? `blur(${blur * u}px)` : undefined, zIndex: i, }} > {isVideoSrc(src) ? ( ) : ( // biome-ignore lint/performance/noImgElement: Remotion still

)} {/* Status bar and Dynamic Island over the clip. */}

{time}

); })} {/* The stack's foot fades into the page and the glow. */}

); } 61:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","remotion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/remotion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"remotion"}]]}]}]]}],["$","$L62",null,{"namespace":"@registrydirectory","registryDependencies":[]}]]}],null]}],["$","$L63",null,{"files":[{"path":"registry/snap-cn/phone-stack/index.tsx","content":"$64","type":"registry:component","target":"components/snap-cn/phone-stack.tsx"}],"className":"h-[70svh] min-h-80"}]]}]