Logo Flicker

1"use client";
2 
3import {
4  Easing,
5  getRemotionEnvironment,
6  Img,
7  interpolate,
8  staticFile,
9  useCurrentFrame,
10  useVideoConfig,
11} from "remotion";
12import { type SnapCnTheme, useSnapCnTheme } from "@/lib/snap-cn-ui";
13 
14/**
15 * A Marvel-Studios-style flicker reveal: images flip full-screen at a constant
16 * fast rate right to the end, then cross-fade — the flicker fading OUT while the
17 * logo and brand name fade IN, together, in one move.
18 */
19 
20export interface LogoFlickerProps {
21  /** The logo mark (simple/monochrome — it resolves over the dark backdrop). */
22  logoSrc?: string;
23  /** Brand name shown under the logo. */
24  brandName?: string;
25  /** Image pool the flicker flips through, full-screen. */
26  images?: string[];
27  /** Frames each image holds — the (constant) flip speed. */
28  flipInterval?: number;
29  /** Backdrop color. Overrides the design system's `background`. */
30  background?: string;
31  speed?: number;
32  className?: string;
33  /** Design-system token overrides. */
34  theme?: Partial<SnapCnTheme>;
35  /**
36   * Defaults to `"dark"`: the shipped `logoSrc` is a white mark, so the stage
37   * has to be dark for it to read. Pass `"light"` with a dark logo asset.
38   */
39  mode?: "light" | "dark";
40}
41 
42const FONT_FAMILY =
43  'Inter, var(--font-geist-sans), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif';
44 
45/** Sample images. Absolute, because a root-relative default becomes
46 *  `staticFile()` in a render and 404s in the project this file was just
47 *  copied into. Pass your own — root-relative or remote, both resolve. */
48const DEFAULT_IMAGES = [
49  "https://snapcn.dev/showcase-assets/438b9e6b50654a44d404fbf358c26e9f.webp",
50  "https://snapcn.dev/showcase-assets/5e5305b05bd405a0d89570725434099e.webp",
51  "https://snapcn.dev/showcase-assets/767d99bb371a54d0d36751e8cecae43c.jpg",
52  "https://snapcn.dev/showcase-assets/821d815affa6496c39cbdeeec7a84603.jpg",
53  "https://snapcn.dev/showcase-assets/937438c560ada1c83317f2c11b3454b0.jpg",
54  "https://snapcn.dev/showcase-assets/98f89cb9994f5c382ab964062c4039db.jpg",
55  "https://snapcn.dev/showcase-assets/b25b82db2892efff9be3204e860d30ee.jpg",
56  "https://snapcn.dev/showcase-assets/c9ebc6337aa2268ac4b357f9cb1ac547.jpg",
57];
58 
59// ─── Timeline (frames @ 30fps; ~3.5s) ──────────────────────────────────────────
60/** Default frames per image — the flip speed, held constant to the very end. */
61export const FLIP_INTERVAL = 2;
62/**
63// … truncated