Logo Assemble

1"use client";
2 
3import {
4  Easing,
5  getRemotionEnvironment,
6  Img,
7  interpolate,
8  staticFile,
9  useCurrentFrame,
10  useVideoConfig,
11} from "remotion";
12import {
13  mixOklch,
14  type SnapCnTheme,
15  useSnapCnTheme,
16  withAlpha,
17} from "@/lib/snap-cn-ui";
18 
19/**
20 * A logo build: a single ring of image cards revolves around the centre, then
21 * spins inward and vanishes into the middle — giving birth to a simple logo and
22 * the brand name. One circle, no colour on the mark; the images do the motion.
23 */
24 
25export interface LogoAssembleProps {
26  /** The logo mark (kept simple/monochrome — it sits on the dark backdrop). */
27  logoSrc?: string;
28  /** Brand name that appears to the right of the logo. */
29  brandName?: string;
30  /** Text held in the middle of the ring while the images revolve (\n for lines). */
31  middleText?: string;
32  /** Image URLs for the ring, cycled around the circle. */
33  images?: string[];
34  /** How many cards ride the ring. */
35  count?: number;
36  /** Backdrop color. Overrides the design system's `background`. */
37  background?: string;
38  speed?: number;
39  className?: string;
40  /** Design-system token overrides. */
41  theme?: Partial<SnapCnTheme>;
42  /**
43   * Defaults to `"dark"`: the shipped `logoSrc` is a white mark, so the stage
44   * has to be dark for it to read. Pass `"light"` with a dark logo asset.
45   */
46  mode?: "light" | "dark";
47}
48 
49const FONT_FAMILY =
50  'Inter, var(--font-geist-sans), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif';
51 
52/** Sample images. Absolute, because a root-relative default becomes
53 *  `staticFile()` in a render and 404s in the project this file was just
54 *  copied into. Pass your own — root-relative or remote, both resolve. */
55const DEFAULT_IMAGES = [
56  "https://snapcn.dev/showcase-assets/438b9e6b50654a44d404fbf358c26e9f.webp",
57  "https://snapcn.dev/showcase-assets/5e5305b05bd405a0d89570725434099e.webp",
58  "https://snapcn.dev/showcase-assets/767d99bb371a54d0d36751e8cecae43c.jpg",
59  "https://snapcn.dev/showcase-assets/821d815affa6496c39cbdeeec7a84603.jpg",
60  "https://snapcn.dev/showcase-assets/937438c560ada1c83317f2c11b3454b0.jpg",
61  "https://snapcn.dev/showcase-assets/98f89cb9994f5c382ab964062c4039db.jpg",
62  "https://snapcn.dev/showcase-assets/b25b82db2892efff9be3204e860d30ee.jpg",
63  "https://snapcn.dev/showcase-assets/c9ebc6337aa2268ac4b357f9cb1ac547.jpg",
64];
65 
66// … truncated