4e: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 4f: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 50:T32e6,// Product Hero · snapcn — https://snapcn.dev/docs/scenes/hero-launch "use client"; import { loadFont as loadInter } from "@remotion/google-fonts/Inter"; import { type CSSProperties, useCallback, useState } from "react"; import { AbsoluteFill, continueRender, delayRender, Easing, getRemotionEnvironment, interpolate, OffthreadVideo, staticFile, useCurrentFrame, useVideoConfig, } from "remotion"; import { Item, mixOklch, resolveFont, type SnapCnTheme, useSnapCnTheme, withAlpha, } from "@/lib/snap-cn-ui"; const { fontFamily: SANS } = loadInter("normal", { weights: ["500", "600", "700"], subsets: ["latin"], }); export interface HeroLaunchProps { /** Reveal caption under the cards. */ heading?: string; /** * Left card media. An image URL, a video URL (`.mp4`/`.webm`/`.mov` → plays * via ), or a CSS `linear-gradient(...)`. The video editor * swaps this for the viewer's own image/clip. */ image1?: string; /** Right card media (same rules as `image1`). */ image2?: string; /** Design-system token overrides. */ theme?: Partial; /** Defaults to `"dark"` — the scene is a cinematic stage, lit for dark. */ mode?: "light" | "dark"; /** * The face this scene paints its words in — a label from `fonts.ts` * ("Inter", "Space Grotesk", "Instrument Serif") or a CSS family you have * loaded yourself. Unset, the scene keeps the face it was designed around. * * Overrides `theme.fontFamily`, which is how a brand kit re-skins a whole * timeline from one value. */ fontFamily?: string; } const PERSP = 1000; // Pure rotateY about each card's INNER edge — no rotateX, so the inner edges // stay vertical and the centre gap is a clean, even channel top-to-bottom. const TILT = 17; const GAP = 92; /** Stand-in for missing media — the page lifted a shade, not a fixed grey. */ const placeholder = (t: SnapCnTheme) => `linear-gradient(135deg,${mixOklch(t.background, t.card, 0.55)},${mixOklch( t.background, t.card, 0.2, )})`; // Sample product-reveal clips. Absolute, because these ship as *defaults* into a // project that does not have them in its own `public/` — a root-relative default // becomes `staticFile()` in a render and 404s the first time anyone renders the // component they just installed. Swap them for your own media, root-relative or // not; `resolveSrc` handles both. const SHOWCASE = [ "https://media.snapcn.dev/demos/moodboard-reveal.mp4", "https://media.snapcn.dev/demos/orbit-gallery.mp4", ]; const isVideo = (src: string) => /\.(mp4|webm|mov|m4v)(\?|$)/i.test(src); const isGradient = (src: string) => src.startsWith("linear-gradient"); // easeOutQuint — quick to move, silky to settle, lands exactly on target with // no asymptotic "stuck" tail (the thing overdamped springs get wrong). const OUT = Easing.bezier(0.22, 1, 0.36, 1); // Gravity-ish accelerate for the drop-off. const FALL = Easing.bezier(0.5, 0, 0.9, 0.4); /** * A root-relative asset ("/showcase-assets/..") is served at the origin root by * Next in the Player, but Remotion Studio and a render serve `public/` through * `staticFile()` alone — so rewrite local paths everywhere but the Player, and pass * http(s)/data/blob URLs straight through. */ 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 // (`/static-/…`); running it through again would prefix it twice. const base = staticFile("_").slice(0, -2); if (base && src.startsWith(`${base}/`)) return src; try { return staticFile(src.replace(/^\/+/, "")); } catch { return src; } } /** * Image that holds the server render until it has actually *loaded*, then * releases. Remotion's is avoided on purpose: it awaits `img.decode()`, * which the headless compositor rejects for some progressive JPEGs and hangs the * export. A plain paints fine — we wait for `onload` ourselves and clear * on error too, so a bad source degrades gracefully. In the Player this is an * ordinary, instantly-shown image. */ function HeroImage({ src, style }: { src: string; style: CSSProperties }) { const [handle] = useState(() => delayRender(`hero image: ${src}`)); const release = useCallback(() => continueRender(handle), [handle]); return ( // biome-ignore lint/performance/noImgElement: Remotion frame, not a Next route. hangs on some JPEGs src={resolveSrc(src)} alt="" style={style} onLoad={release} onError={release} /> ); } /** Fills a card edge-to-edge with an image, a video, or a gradient. */ function CardMedia({ src, t }: { src: string; t: SnapCnTheme }) { const media: CSSProperties = { position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", }; const effective = src || placeholder(t); if (isGradient(effective)) { return

; } if (isVideo(effective)) { return ; } return ; } /** * Cinematic product-launch hero — deterministic Remotion composition * (1280×720 @30fps). Two image cards, one continuous professionally-eased * motion, no bounce: * * f0–40 the left image HOLDS full-screen, flat and clear * f40 it recedes to its floating size and angles in about its inner edge * f60 the right image slides in from the right; the two sit SYMMETRIC * about the frame centre with an even, centred gap * f100 both breathe with a barely-there float (never dead-static) * f122 they fall off the lower edge together * f126 the headline reveals and eases forward ("comes to front") * * Left/right/bottom edges dissolve into black. `image1`/`image2` + `heading` * are the props the video editor drives. */ export function HeroLaunch({ heading = "npx shadcn add @snapcn", image1 = SHOWCASE[0], image2 = SHOWCASE[1], theme, mode, fontFamily, }: HeroLaunchProps) { const frame = useCurrentFrame(); const { width, height } = useVideoConfig(); const t = useSnapCnTheme(theme, mode ?? "dark"); const face = resolveFont(fontFamily ?? t.fontFamily) ?? SANS; const s = height / 720; const cardW = 1000 * s; const cardH = 620 * s; const centerLeft = (width - cardW) / 2; const cardTop = 0.3 * height; // Symmetric about the centre → the gap sits exactly on the frame's midline. const restOffset = (cardW + GAP * s) / 2; const leftXFinal = -restOffset; const rightXFinal = restOffset; const rightXStart = 1.08 * width; const groupYFinal = 0.16 * height; // A clamped, eased 0→1 segment — the single motion primitive for the whole // scene. Easing lands cleanly on the target, so nothing ever "sticks". const seg = (start: number, dur: number, easing = OUT) => interpolate(frame, [start, start + dur], [0, 1], { easing, extrapolateLeft: "clamp", extrapolateRight: "clamp", }); const recede = seg(40, 30); // full-screen → floating const angle = seg(46, 36); // flat → angled (rotateY only) const slideL = seg(46, 36); // centre → left rest const slideR = seg(60, 40); // offscreen right → right rest const drop = seg(122, 34, FALL); // settle → fall off bottom const title = seg(126, 40); // headline reveal + forward const leftScale = interpolate(recede, [0, 1], [1.5, 1]); const leftX = interpolate(slideL, [0, 1], [0, leftXFinal]); const leftDeg = interpolate(angle, [0, 1], [0, -TILT]); const leftOpacity = interpolate(frame, [2, 12], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", }); const rightX = interpolate(slideR, [0, 1], [rightXStart, rightXFinal]); const rightOpacity = interpolate(slideR, [0, 0.35], [0, 1], { extrapolateRight: "clamp", }); // Barely-there float once settled (fades out into the drop) so the held beat // reads as alive, not frozen — the classic "why does it feel stuck" fix. const floatEnv = seg(94, 22) * (1 - drop); const floatY = Math.sin(frame * 0.09) * 3.5 * s * floatEnv; const groupY = interpolate(drop, [0, 1], [0, groupYFinal]) + floatY; const titleY = interpolate(title, [0, 1], [40 * s, 0]); const titleScale = interpolate(title, [0, 1], [0.82, 1]); const titleBlur = interpolate(title, [0, 1], [10, 0]); const vignette = seg(50, 40, Easing.linear); const cardBox = (x: number, opacity: number): CSSProperties => ({ position: "absolute", left: centerLeft, top: cardTop, width: cardW, height: cardH, opacity, transform: `translateX(${x}px)`, }); // Opening zoom pivots on the centre; the tilt pivots on the inner edge. const zoom = (scale: number): CSSProperties => ({ width: "100%", height: "100%", transform: `scale(${scale})`, transformOrigin: "center center", }); const tilt = (deg: number, origin: string): CSSProperties => ({ width: "100%", height: "100%", transform: `perspective(${PERSP * s}px) rotateY(${deg}deg)`, transformOrigin: origin, }); const fade = (gradient: string): CSSProperties => ({ position: "absolute", inset: 0, background: gradient, }); return ( {/* Each card is its own object to Remotion Studio (see `Item`). */}

{/* inner edge = right edge → pivot at 100% 50% */}

{/* inner edge = left edge → pivot at 0% 50% */}

{/* Wide, clean edge dissolve — fades in after the full-screen opening. */}

{heading}

); } /** A single card: one image (or video/gradient) filling it edge-to-edge. */ function ImageCard({ s, src, t }: { s: number; src: string; t: SnapCnTheme }) { return (

{/* subtle depth: darken the lower edge + a hairline top sheen */}

); } 4d:["$","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"}]]}]}],["$","li","@remotion/google-fonts",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40remotion%2Fgoogle-fonts","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/google-fonts"}]]}]}]]}],["$","$L4e",null,{"namespace":"@snapcn","registryDependencies":["https://snapcn.dev/r/snap-cn-ui.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/snap-cn/hero-launch/index.tsx","content":"$50","type":"registry:component","target":"components/snap-cn/hero-launch.tsx"}],"className":"h-[70svh] min-h-80"}]]}]