Moodboard Reveal

1"use client";
2 
3import type { CSSProperties } from "react";
4import {
5  Easing,
6  getRemotionEnvironment,
7  Img,
8  interpolate,
9  interpolateColors,
10  staticFile,
11  useCurrentFrame,
12  useVideoConfig,
13} from "remotion";
14import { type SnapCnTheme, useSnapCnTheme, withAlpha } from "@/lib/snap-cn-ui";
15 
16/**
17 * A "moodboard reveal": a kinetic headline with a swapping inline image, then a
18 * scattered gallery of image cards flies in, the camera pushes through it while
19 * the background lifts from near-black to off-white, and it lands on a single
20 * hero image. A camera-drives-through montage (see MOTION.md), replicated from a
21 * reference reel and populated with the showcase assets.
22 */
23 
24export interface MoodboardRevealProps {
25  /** Text before the inline image. */
26  leadIn?: string;
27  /** The emphasised (bold) word right after the inline image. */
28  emphasis?: string;
29  /** Text after the emphasised word. */
30  tailIn?: string;
31  /** Image URLs for the gallery + the intro swap. First-served covers the slots. */
32  images?: string[];
33  /** The image the montage lands on. Defaults to `images[3]`. */
34  heroImage?: string;
35  /** Near-black start background. Defaults to the dark theme's `background`. */
36  darkColor?: string;
37  /** Off-white end background. Defaults to the light theme's `background`. */
38  lightColor?: string;
39  /**
40   * Design-system token overrides. Applied to both ends of the crossfade —
41   * this scene spans light and dark, so it takes no `mode`.
42   */
43  theme?: Partial<SnapCnTheme>;
44  speed?: number;
45  className?: string;
46}
47 
48const FONT_FAMILY =
49  'Inter, var(--font-geist-sans), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif';
50 
51/** Sample images. Absolute, because a root-relative default becomes
52 *  `staticFile()` in a render and 404s in the project this file was just
53 *  copied into. Pass your own — root-relative or remote, both resolve. */
54const DEFAULT_IMAGES = [
55  "https://snapcn.dev/showcase-assets/438b9e6b50654a44d404fbf358c26e9f.webp",
56  "https://snapcn.dev/showcase-assets/5e5305b05bd405a0d89570725434099e.webp",
57  "https://snapcn.dev/showcase-assets/767d99bb371a54d0d36751e8cecae43c.jpg",
58  "https://snapcn.dev/showcase-assets/821d815affa6496c39cbdeeec7a84603.jpg",
59  "https://snapcn.dev/showcase-assets/937438c560ada1c83317f2c11b3454b0.jpg",
60  "https://snapcn.dev/showcase-assets/98f89cb9994f5c382ab964062c4039db.jpg",
61  "https://snapcn.dev/showcase-assets/b25b82db2892efff9be3204e860d30ee.jpg",
62// … truncated