Orbit Gallery

1"use client";
2 
3import { useMemo, useState } from "react";
4import {
5  AbsoluteFill,
6  Easing,
7  Img,
8  interpolate,
9  useCurrentFrame,
10  useVideoConfig,
11} from "remotion";
12import {
13  mixOklch,
14  type SnapCnTheme,
15  useSnapCnTheme,
16  withAlpha,
17} from "@/lib/snap-cn-ui";
18 
19const TWO_PI = Math.PI * 2;
20/** Lookup resolution for the arc-length reparameterization table. */
21const ARC_SAMPLES = 1024;
22 
23export interface OrbitGalleryProps {
24  title?: string;
25  subtitle?: string;
26  /** Pill CTA under the subtitle. Empty string hides it. */
27  buttonLabel?: string;
28  /**
29   * Card artwork URLs, cycled along the spiral stream. A URL that fails to load
30   * falls back to a gradient tile rather than breaking playback. Pass `[]` to
31   * render self-contained editorial gradient tiles (no network).
32   */
33  images?: string[];
34  /** How many times the Archimedean spiral winds from the edge to the center. */
35  turns?: number;
36  /** Arc spacing between cards along the stream (smaller = denser). */
37  spacing?: number;
38  /** Radius scale — larger pushes the outer coils off-frame, same coil gaps. */
39  spread?: number;
40  /** How much cards shrink toward the center (0 = uniform). */
41  sizeAttenuation?: number;
42  /** Card long-edge in px at the outer radius, on the reference 600px canvas. */
43  imageSize?: number;
44  /** Card width / height (portrait < 1). */
45  cardAspect?: number;
46  /** Percent of the path over which a card fades in at the outer end. */
47  fadeIn?: number;
48  /** Percent of the path over which a card fades out at the center end. */
49  fadeOut?: number;
50  /** Corner rounding, matching the reference's 0–20 scale (0 = sharp). */
51  cornerRadius?: number;
52  /** Seconds for the stream to flow one full turnover into the center. */
53  orbitSeconds?: number;
54  /** Overrides the design system's `background`. */
55  background?: string;
56  /** Overrides the design system's `foreground`. */
57  textColor?: string;
58  /** Design-system token overrides. */
59  theme?: Partial<SnapCnTheme>;
60  /** Defaults to `"dark"` — the orbit is a cinematic stage, lit for dark. */
61  mode?: "light" | "dark";
62  /** Tiny captions pinned to the bottom edge. Empty strings hide them. */
63  footerLeft?: string;
64  footerCenter?: string;
65  footerRight?: string;
66  speed?: number;
67  className?: string;
68}
69 
70export const SAMPLE_IMAGES = Array.from(
71  { length: 16 },
72  (_, i) => `https://picsum.photos/seed/snap-orbit-${i + 1}/440/560`,
73);
74 
75/** Editorial two-stop gradients used for tiles without a (working) photo. */
76// … truncated