63: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"] 64: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"] 65:T4b1a,// Moodboard Reveal · snapcn — https://snapcn.dev/docs/scenes/moodboard-reveal "use client"; import type { CSSProperties } from "react"; import { forwardRef } from "react"; import { Easing, getRemotionEnvironment, Img, interpolate, interpolateColors, staticFile, useCurrentFrame, useVideoConfig, } from "remotion"; import { Item, parseColor, resolveFont, type SnapCnTheme, useSnapCnTheme, withAlpha, } from "@/lib/snap-cn-ui"; /** * A "moodboard reveal": a kinetic headline with a swapping inline image, then a * scattered gallery of image cards flies in, the camera pushes through it while * the background lifts from near-black to off-white, and it lands on a single * hero image. A camera-drives-through montage (see MOTION.md), replicated from a * reference reel and populated with the showcase assets. */ export interface MoodboardRevealProps { /** Text before the inline image. */ leadIn?: string; /** The emphasised (bold) word right after the inline image. */ emphasis?: string; /** Text after the emphasised word. */ tailIn?: string; /** Image URLs for the gallery + the intro swap. First-served covers the slots. */ images?: string[]; /** The image the montage lands on. Defaults to `images[3]`. */ heroImage?: string; /** Near-black start background. Defaults to the dark theme's `background`. */ darkColor?: string; /** Off-white end background. Defaults to the light theme's `background`. */ lightColor?: string; /** * Design-system token overrides. Applied to both ends of the crossfade — * this scene spans light and dark, so it takes no `mode`. */ theme?: Partial; /** * 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; speed?: number; className?: string; } const FONT_FAMILY = 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'; /** Sample images. Absolute, because a root-relative default becomes * `staticFile()` in a render and 404s in the project this file was just * copied into. Pass your own — root-relative or remote, both resolve. */ const DEFAULT_IMAGES = [ "https://snapcn.dev/showcase-assets/438b9e6b50654a44d404fbf358c26e9f.webp", "https://snapcn.dev/showcase-assets/5e5305b05bd405a0d89570725434099e.webp", "https://snapcn.dev/showcase-assets/767d99bb371a54d0d36751e8cecae43c.jpg", "https://snapcn.dev/showcase-assets/821d815affa6496c39cbdeeec7a84603.jpg", "https://snapcn.dev/showcase-assets/937438c560ada1c83317f2c11b3454b0.jpg", "https://snapcn.dev/showcase-assets/98f89cb9994f5c382ab964062c4039db.jpg", "https://snapcn.dev/showcase-assets/b25b82db2892efff9be3204e860d30ee.jpg", "https://snapcn.dev/showcase-assets/c9ebc6337aa2268ac4b357f9cb1ac547.jpg", ]; // ─── Timeline (frames @ 30fps; ~5s to mirror the ~4.7s reference) ────────────── // The sentence holds long enough that the last intro image lands and rests // before it fades; the fade overlaps the first gallery positions appearing. export const SENTENCE_OUT = 50; export const COLLAGE_START = 46; export const APPEAR_FRAMES = 12; /** Each position swaps its image every `FLICKER_HOLD` frames — the shuffle. */ export const FLICKER_HOLD = 2; /** The cluster orbits its centre from COLLAGE_START to here, sweeping ORBIT_DEG°. */ export const ORBIT_END = 88; export const ORBIT_DEG = 130; /** Then every position converges to the centre — the "merge into one". */ export const MERGE_START = 88; // Fast collapse — the positions snap together, they don't drift in. export const MERGE_END = 100; export const BG_START = 88; export const BG_END = 104; /** * Every position collapses to this common width at the centre and un-rotates, so * the cards stack exactly on top of each other. They never fade — the topmost * card (the hero) simply covers the rest, so the merge *becomes* the one image. */ export const MERGE_W = 300; /** Moderate decelerate — not quint/expo-out, which freeze on a frame clock. */ export const EASE = Easing.bezier(0.2, 0.6, 0.35, 1); const CLAMP = { extrapolateLeft: "clamp", extrapolateRight: "clamp" } as const; const CARD_RATIO = 1.34; // portrait cards (~3:4) /** * Gallery *positions* (offset from centre, width, tilt) — slots, not fixed * pictures. Each one flickers through the whole image set (see `flickerImage`). * Laid out as the spread moodboard the montage orbits and then collapses. */ export const SLOTS: ReadonlyArray<{ x: number; y: number; w: number; rot: number; }> = [ { x: -401, y: -51, w: 188, rot: -5 }, { x: -186, y: -191, w: 164, rot: 4 }, { x: 44, y: -168, w: 214, rot: -2 }, { x: 283, y: -79, w: 173, rot: 6 }, { x: 377, y: 151, w: 169, rot: -4 }, { x: -340, y: 179, w: 183, rot: 5 }, { x: -101, y: 193, w: 214, rot: -3 }, { x: 138, y: 193, w: 188, rot: 3 }, ]; /** The cluster's orbit angle (degrees) at `frame`. */ export function orbitAngle(frame: number): number { return interpolate(frame, [COLLAGE_START, ORBIT_END], [0, ORBIT_DEG], { ...CLAMP, easing: Easing.inOut(Easing.cubic), }); } /** How far the merge-to-centre has progressed (0 → 1). */ export function mergeProgress(frame: number): number { return interpolate(frame, [MERGE_START, MERGE_END], [0, 1], { ...CLAMP, easing: EASE, }); } /** * Which image a position shows. Positions don't hold one picture — they flicker * through the whole set every `FLICKER_HOLD` frames, staggered per slot, so it * reads as all the photos shuffling in place. The image freezes at `MERGE_START` * so the convergence isn't a strobe. */ export function flickerImage( frame: number, slot: number, count: number, ): number { const f = Math.min(frame, MERGE_START); const step = Math.max(0, Math.floor((f - COLLAGE_START) / FLICKER_HOLD)); return (step * 3 + slot * 5) % count; } export interface SlotPose { x: number; y: number; scale: number; opacity: number; } /** * A position's live pose: it fades/scales in, orbits the centre, then converges * to the centre and to the common `MERGE_W` footprint during the merge. Opacity * is only the entrance fade — it NEVER fades on merge, so the positions stack on * top of each other and the topmost one (the hero) covers the rest. */ export function slotPose( frame: number, slot: { x: number; y: number; w: number }, index: number, ): SlotPose { const appear = COLLAGE_START + index * 2; const opacity = interpolate( frame, [appear, appear + APPEAR_FRAMES], [0, 1], CLAMP, ); const scIn = interpolate(frame, [appear, appear + APPEAR_FRAMES], [0.6, 1], { ...CLAMP, easing: EASE, }); const a = (orbitAngle(frame) * Math.PI) / 180; const ox = slot.x * Math.cos(a) - slot.y * Math.sin(a); const oy = slot.x * Math.sin(a) + slot.y * Math.cos(a); const m = mergeProgress(frame); const target = MERGE_W / slot.w; // every card lands at the same width return { x: ox * (1 - m), y: oy * (1 - m), scale: scIn * (1 + (target - 1) * m), opacity, }; } /** Motion blur (px) as the positions converge — peaks mid-merge, zero at ends. */ export function mergeBlur(frame: number): number { return interpolate( frame, [MERGE_START, (MERGE_START + MERGE_END) / 2, MERGE_END], [0, 6, 0], CLAMP, ); } /** 0 = dark background, 1 = light background. */ export function bgProgress(frame: number): number { return interpolate(frame, [BG_START, BG_END], [0, 1], CLAMP); } /** Intro image swap cadence, and the "drop" each new image lands with. */ export const INLINE_START = 8; export const INLINE_HOLD = 12; /** How many images cycle in the intro (kept small so each drop is legible). */ export const INLINE_COUNT = 3; export const DROP_FRAMES = 9; export const DROP_SCALE = 1.16; export interface InlineDrop { index: number; scale: number; opacity: number; } /** * The inline image drops in — the *same* smooth landing the hero uses: each new * image fades in over a few frames while settling from a slight zoom * (`DROP_SCALE` → 1), so you actually see it drop into place rather than cut. * Past images stay stacked underneath so the swap never flashes empty; the * newest sits on top. `DROP_FRAMES` < `INLINE_HOLD`, so every image — the last * one included — fully lands before the next arrives. */ export function inlineImage(frame: number, count: number): InlineDrop { const index = Math.min( count - 1, Math.max(0, Math.floor((frame - INLINE_START) / INLINE_HOLD)), ); const age = frame - (INLINE_START + index * INLINE_HOLD); const scale = interpolate(age, [0, DROP_FRAMES], [DROP_SCALE, 1], { ...CLAMP, easing: EASE, }); const opacity = interpolate(age, [0, 5], [0, 1], { ...CLAMP, easing: EASE }); return { index, scale, opacity }; } /** * Forwards its `ref` so Remotion Studio can outline an intro card (see `Item`); * its `style` already arrives with Studio's merged in. */ const Card = forwardRef< HTMLImageElement, { src: string; style: CSSProperties } >(function Card({ src, style }, ref) { return (

); }); /** Rewrite root-relative assets through staticFile everywhere but the Player. */ 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; } } /** Thin wireframe square/diamond marker that drifts and slowly rotates. */ function WireMarker({ frame, cx, cy, size, spin, color, from, to, }: { frame: number; cx: number; cy: number; size: number; spin: number; color: string; from: number; to: number; }) { const opacity = interpolate( frame, [from, from + 8, to - 8, to], [0, 1, 1, 0], CLAMP, ); if (opacity <= 0) return null; const drift = Math.sin((frame - from) / 22) * 8; const rot = spin + (frame - from) * 0.6; return (

); } export function MoodboardReveal({ leadIn = "that lets you", emphasis = "filter", tailIn = "out AI.", images = DEFAULT_IMAGES, heroImage, darkColor, lightColor, theme, fontFamily, speed = 1, className, }: MoodboardRevealProps) { const frame = useCurrentFrame() * speed; const { width, height } = useVideoConfig(); // The scene crossfades a dark page into a light one, so it needs both ends of // the system at once rather than one resolved mode. Both still take a user's // `theme` override. const dark = useSnapCnTheme(theme, "dark"); const face = resolveFont(fontFamily ?? dark.fontFamily) ?? FONT_FAMILY; const light = useSnapCnTheme(theme, "light"); const cx = width / 2; const cy = height / 2; const bg = bgProgress(frame); const bgColor = interpolateColors( bg, [0, 1], [darkColor ?? dark.background, lightColor ?? light.background], ); // Both pages transparent — the scene as an overlay — asks for no page: no // dotted grid, and ink that reads on light footage from the first frame. const bare = parseColor(darkColor ?? dark.background).alpha === 0 && parseColor(lightColor ?? light.background).alpha === 0; // The marker is always the opposite page: light ink on the dark half, dark on // the light one. const markerColor = bg < 0.5 && !bare ? withAlpha(light.background, 0.55) : withAlpha(dark.background, 0.5); const hero = heroImage ?? images[3] ?? images[0]; // ── Intro sentence ────────────────────────────────────────────────────────── const sentenceOp = interpolate( frame, [0, 8, SENTENCE_OUT - 6, SENTENCE_OUT], [0, 1, 1, 0], CLAMP, ); const inline = inlineImage(frame, Math.min(INLINE_COUNT, images.length)); // ── Gallery (flicker + orbit + merge) ──────────────────────────────────────── const mBlur = mergeBlur(frame); const merge = mergeProgress(frame); const isRendering = getRemotionEnvironment().isRendering; // The index into `images` each gallery position shows this frame; -1 when it // is hidden, or holds a `heroImage` that isn't one of `images`. const slotImage = SLOTS.map((s, i) => { if (slotPose(frame, s, i).opacity <= 0) return -1; if (i === SLOTS.length - 1 && frame >= MERGE_START) return hero ? images.indexOf(hero) : -1; return flickerImage(frame, i, images.length); }); // One photo can be on screen twice — an intro card still fading as the // gallery opens, two positions on the same picture. Studio outlines the // front-most copy (drawn last); the others are only pictures of it. const front = new Map(); if (sentenceOp > 0) for (let i = 0; i <= inline.index; i++) front.set(i, `in-${i}`); slotImage.forEach((k, i) => { if (k >= 0) front.set(k, `slot-${i}`); }); return (

{/* Dotted grid, only on the dark background */}

{/* ── Intro sentence: " [img] " ── */} {sentenceOp > 0 && (

{leadIn}

{images.slice(0, INLINE_COUNT).map((src, i) => { if (i > inline.index) return null; // future image, not yet dropped const isActive = i === inline.index; return ( ); })}

{emphasis} {tailIn}

)} {/* ── Gallery: positions that flicker, orbit, then merge to centre ── */}

0.1 ? `blur(${mBlur}px)` : undefined, ...(isRendering ? {} : { willChange: "filter" as const }), }} > {SLOTS.map((s, i) => { const pose = slotPose(frame, s, i); if (pose.opacity <= 0) return null; // The last-rendered position sits on top of the merged stack, so it is // the one that remains — freeze it to the hero as the merge begins. const isTop = i === SLOTS.length - 1; const src = isTop && frame >= MERGE_START ? hero : images[flickerImage(frame, i, images.length)]; const h = s.w * CARD_RATIO; // Un-rotate as they merge so the stack aligns into one clean image. const rot = s.rot * (1 - merge); return (

0.98 ? "none" : `0 18px 40px ${withAlpha(dark.background, 0.28 * (1 - merge))}`, }} >

); })}

{/* ── Wireframe markers ── */}

); } 62:["$","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"}]]}]}]]}],["$","$L63",null,{"namespace":"@registrydirectory","registryDependencies":["https://snapcn.dev/r/snap-cn-ui.json"]}]]}],null]}],["$","$L64",null,{"files":[{"path":"registry/snap-cn/moodboard-reveal/index.tsx","content":"$65","type":"registry:component","target":"components/snap-cn/moodboard-reveal.tsx"}],"className":"h-[70svh] min-h-80"}]]}]