Follower Rush

1"use client";
2 
3import { loadFont as loadSans } from "@remotion/google-fonts/Inter";
4import { useState } from "react";
5import {
6  AbsoluteFill,
7  getRemotionEnvironment,
8  Img,
9  interpolate,
10  staticFile,
11  useCurrentFrame,
12  useVideoConfig,
13} from "remotion";
14import { type SnapCnTheme, useSnapCnTheme } from "@/lib/snap-cn-ui";
15 
16const { fontFamily: FONT_FAMILY } = loadSans("normal", {
17  weights: ["400", "500", "700", "800"],
18  subsets: ["latin"],
19});
20 
21export interface Follower {
22  name: string;
23  /**
24   * Square photo for this follower. Root-relative paths (`/avatars/ada.jpg`) are
25   * served by the app in the browser and rewritten through `staticFile()` in a
26   * render; absolute URLs are passed straight through.
27   *
28   * Omit it and the avatar falls back to the gradient monogram, which is what
29   * makes the fallback worth having: a crowd is the one place a missing photo
30   * shows up as a hole in the row.
31   */
32  avatar?: string;
33}
34 
35export interface FollowerRushProps {
36  totalFollowers?: number;
37  followers?: Follower[];
38  /** Overrides the design system's `primary`. */
39  accentColor?: string;
40  /** Design-system token overrides. */
41  theme?: Partial<SnapCnTheme>;
42  mode?: "light" | "dark";
43  orientation?: "horizontal" | "vertical";
44  speed?: number;
45}
46 
47interface Theme {
48  bg: string;
49  fg: string;
50  fgMuted: string;
51  /** Placeholder disc behind a photo — `muted`, one step off the page. */
52  avatarBg: string;
53}
54 
55// The four surfaces this scene paints, taken from the design system rather
56// than mirrored as hex — so a user's own token overrides reach the pile-up
57// instead of stopping at a copy of the defaults.
58function paletteFrom(t: SnapCnTheme): Theme {
59  return {
60    bg: t.card,
61    fg: t.foreground,
62    fgMuted: t.mutedForeground,
63    avatarBg: t.muted,
64  };
65}
66 
67/**
68 * How many photos the sample crowd cycles through.
69 *
70 * 24, because the wave holds 22 avatars and scrolls two spare slots past the
71 * edge (`MAX + 2`), so 24 is the smallest set where no two faces are ever on
72 * screen together. Fewer is fine — they just repeat sooner. More is wasted; only
73 * 24 can ever be visible at once.
74 */
75const SAMPLE_AVATAR_COUNT = 24;
76 
77/**
78 * The crowd of names shown in the pile and named in the callout. Purely
79 * flavour — swap it via the `followers` prop.
80 *
81 * Photos come from `public/avatars/01.jpg … 24.jpg`, kept local so the scene
82 * still renders with no network and no CORS. **The files are the only thing this
83// … truncated