reui — Say hello to my new sponsor

import React from "react";
import {
  AbsoluteFill,
  Easing,
  Sequence,
  Series,
  interpolate,
  spring,
  useCurrentFrame,
  useVideoConfig,
} from "remotion";
import {
  TransitionSeries,
  linearTiming,
  type TransitionPresentation,
  type TransitionPresentationComponentProps,
} from "@remotion/transitions";
import { loadFont as loadSans } from "@remotion/google-fonts/Inter";
import { loadFont as loadMono } from "@remotion/google-fonts/GeistMono";

import { SoftBlurIn } from "@/components/remocn/soft-blur-in";
import { pushThrough } from "@/components/remocn/push-through";
import { focusPull } from "@/components/remocn/focus-pull";
import { iconScatter } from "@/components/remocn/icon-scatter";

import { ShaderSimplexNoise } from "@/components/remocn/shader-simplex-noise";
import { ShaderSmokeRing } from "@/components/remocn/shader-smoke-ring";
import { SharedAxisZ } from "@/components/remocn/shared-axis-z";

import { StarIcon } from "@/components/remocn/icon-star";
import { HeartIcon } from "@/components/remocn/icon-heart";
import { ZapIcon } from "@/components/remocn/icon-zap";
import { SparklesIcon } from "@/components/remocn/icon-sparkles";
import { BellIcon } from "@/components/remocn/icon-bell";
import { CameraIcon } from "@/components/remocn/icon-camera";
import { CloudIcon } from "@/components/remocn/icon-cloud";
import { CheckCircleIcon } from "@/components/remocn/icon-check-circle";
import { CrownIcon } from "@/components/remocn/icon-crown";
import { MoonIcon } from "@/components/remocn/icon-moon";
import { PlayIcon } from "@/components/remocn/icon-play";
import { SearchIcon } from "@/components/remocn/icon-search";
import { MailIcon } from "@/components/remocn/icon-mail";
import { TrendingUpIcon } from "@/components/remocn/icon-trending-up";
import { SunIcon } from "@/components/remocn/icon-sun";
import { TrophyIcon } from "@/components/remocn/icon-trophy";
import { RocketIcon } from "@/components/remocn/icon-rocket";
import { SettingsIcon } from "@/components/remocn/icon-settings";

// reui speaks in Inter — the site binds --font-sans and --font-heading both to
// Inter. GeistMono carries the one shell command. Weight 400 only, everywhere.
const { fontFamily: SANS_FAMILY } = loadSans("normal", {
  subsets: ["latin"],
  weights: ["400"],
});
const { fontFamily: MONO_FAMILY } = loadMono("normal", {
  subsets: ["latin"],
  weights: ["400"],
});

const SANS =
  "var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif";
const MONO = `${MONO_FAMILY}, ui-monospace, SFMono-Regular, monospace`;

// reui's real register, straight from its token file: pure monochrome neutral,
// zero chroma. Dark theme: bg oklch(0.145 0 0), ink oklch(0.985 0 0), card
// oklch(0.205 0 0), muted-fg oklch(0.708 0 0), border white/10%. The accent
// IS white — reui keeps color inside its own charts, never on the chrome.
const BG = "#0a0a0a";
const CARD = "#1a1a1a";
const INK = "#fafafa";
const MUTED = "rgba(250,250,250,0.62)";
const FAINT = "rgba(250,250,250,0.4)";
const DIM = "rgba(250,250,250,0.24)";
const BORDER = "rgba(255,255,255,0.1)";
const LINE = "rgba(255,255,255,0.14)";

const clampOpts = {
  extrapolateLeft: "clamp" as const,
  extrapolateRight: "clamp" as const,
};

// ---------------------------------------------------------------------------
// Scene timings (frames @ 30fps). Transitions overlap.
// ---------------------------------------------------------------------------
const S_HOOK = 66; //        "Say hello to my new sponsor"
const S_REVEAL = 96; //      reui wordmark + tagline
const S_ICONS = 120; //      the animated-icon wall
const S_PRO = 144; //        pro-blocks category showcase
const S_MCP = 64; //         "Your agent can build with them too"
const S_INSTALL = 150; //    typed shadcn add + name rolodex
const S_OUTRO = 180; //      remocn logo bloom → ✕ reui side-by-side lockup

// The tier shown as live demos, cut into hard beats: Data Grid, Kanban, Charts.
const FREE_DURS = [58, 58, 66];
const S_FREE = FREE_DURS.reduce((a, b) => a + b, 0);

// The Pro-block groups named one word at a time via shared-axis-z, before the
// category grid lands. Snappy morphs, but each word still holds to read.
const GROUP_WORDS = ["Application", "Solutions", "eCommerce", "Marketing"];
const GW_BEAT = 40;
const GW_SPEED = 1.4;
const S_GROUPS = GROUP_WORDS.length * GW_BEAT;

const T_PT = 18; //     push-through
const T_SCATTER = 24; //icon-scatter (the debut)
const T_FP = 18; //     focus-pull
const T_X = 14; //      crossfade
const T_BLUR = 16; //   blur crossfade

export const SPONSOR_REUI_DURATION =
  S_HOOK +
  S_REVEAL +
  S_ICONS +
  S_FREE +
  S_GROUPS +
  S_PRO +
  S_MCP +
  S_INSTALL +
  S_OUTRO -
  (T_PT + T_SCATTER + T_FP + T_X + T_FP + T_X + T_PT + T_BLUR);

// ---------------------------------------------------------------------------
// Slow camera drift — every scene rides a barely-there push-in so no frame is
// ever static. durationInFrames is Sequence-scoped inside TransitionSeries.
//
// will-change is load-bearing, not a perf hint. Re-rasterized every frame,
// text under a slow zoom quantizes: glyph positions round to the pixel grid,
// each glyph crosses its boundary on its own frame, and the row trembles while
// the geometry beside it glides (measured 1px row snaps; with the promotion
// both the snaps and the glyph-vs-neighbour wave drop to the measurement
// floor). The promoted layer is a texture, which costs edge sharpness at 1x
// (20-80% edge 1.7px -> 2.1px) — render finals with --scale=2, where that
// cost all but disappears.
// ---------------------------------------------------------------------------
const Drift: React.FC<{ children: React.ReactNode; grow?: number }> = ({
  children,
  grow = 0.035,
}) => {
  const frame = useCurrentFrame();
  const { durationInFrames } = useVideoConfig();
  const scale = interpolate(frame, [0, durationInFrames], [1, 1 + grow]);
  return (
    <AbsoluteFill
      style={{
        transform: `scale(${scale})`,
        willChange: "transform",
      }}
    >
      {children}
    </AbsoluteFill>
  );
};

// Per-word rise — each word resolves out of blur while rising onto the
// baseline. The body voice of the spot.
const WordsRise: React.FC<{
  text: string;
  fontSize: number;
  color?: string;
  delay?: number;
  stagger?: number;
}> = ({ text, fontSize, color = INK, delay = 0, stagger = 4 }) => {
  const frame = useCurrentFrame();
  const ease = Easing.bezier(0.2, 0.8, 0.2, 1);
  const words = text.split(" ");
  return (
    <span
      style={{ fontFamily: SANS, fontWeight: 400, fontSize, color, lineHeight: 1.28 }}
    >
      {words.map((word, i) => {
        const local = frame - delay - i * stagger;
        const p = interpolate(local, [0, 24], [0, 1], { ...clampOpts, easing: ease });
        // Travel lands at ~60% — the eased tail would walk the word across the
        // pixel grid by hundredths of a pixel, clicking one pixel every few
        // frames (staggered per word: a ripple). Opacity/blur keep the full curve.
        const py = interpolate(local, [0, 14], [0, 1], { ...clampOpts, easing: ease });
        return (
          <span
            key={i}
            style={{
              display: "inline-block",
              whiteSpace: "pre",
              opacity: p,
              transform: `translateY(${(1 - py) * 28}px)`,
              filter: p < 1 ? `blur(${(1 - p) * 10}px)` : undefined,
            }}
          >
            {word}
            {i < words.length - 1 ? " " : ""}
          </span>
        );
      })}
    </span>
  );
};

// reui's real logo — the rounded-square mark with its R swoosh + dot, next to
// the lowercase "reui" wordmark. Inlined from reui.io, drawn in currentColor.
const REUI_RATIO = 269 / 100;
const ReuiLogo: React.FC<{ height: number; color?: string }> = ({
  height,
  color = INK,
}) => (
  <svg
    viewBox="0 0 269 100"
    width={height * REUI_RATIO}
    height={height}
    fill="none"
    style={{ display: "block", color, overflow: "visible" }}
  >
    <path d="M268.091 31.8093V68.1729H260.402V31.8093H268.091Z" fill="currentColor" />
    <path d="M236.389 31.8093H244.077V55.4243C244.077 58.0758 243.444 60.3959 242.177 62.3846C240.922 64.3732 239.164 65.9238 236.904 67.0365C234.643 68.1374 232.009 68.6878 229.002 68.6878C225.984 68.6878 223.344 68.1374 221.083 67.0365C218.822 65.9238 217.065 64.3732 215.81 62.3846C214.555 60.3959 213.928 58.0758 213.928 55.4243V31.8093H221.616V54.7674C221.616 56.1523 221.918 57.3834 222.521 58.4605C223.137 59.5377 224.001 60.3841 225.114 60.9996C226.227 61.6151 227.523 61.9229 229.002 61.9229C230.494 61.9229 231.79 61.6151 232.891 60.9996C234.004 60.3841 234.862 59.5377 235.465 58.4605C236.081 57.3834 236.389 56.1523 236.389 54.7674V31.8093Z" fill="currentColor" />
    <path d="M173.312 68.1729V31.8093H197.815V38.148H181.001V46.8128H196.555V53.1516H181.001V61.8341H197.886V68.1729H173.312Z" fill="currentColor" />
    <path d="M130.5 68.1729V31.8093H144.847C147.593 31.8093 149.937 32.3005 151.878 33.283C153.831 34.2536 155.317 35.6327 156.335 37.4201C157.364 39.1956 157.879 41.2849 157.879 43.6878C157.879 46.1026 157.358 48.18 156.317 49.9201C155.275 51.6483 153.766 52.974 151.789 53.8973C149.824 54.8206 147.445 55.2823 144.651 55.2823H135.045V49.1033H143.408C144.876 49.1033 146.095 48.9021 147.066 48.4996C148.037 48.0971 148.759 47.4935 149.232 46.6885C149.718 45.8836 149.96 44.8834 149.96 43.6878C149.96 42.4804 149.718 41.4624 149.232 40.6338C148.759 39.8052 148.031 39.1779 147.048 38.7517C146.078 38.3138 144.853 38.0948 143.373 38.0948H138.188V68.1729H130.5ZM150.138 51.6246L159.175 68.1729H150.688L141.846 51.6246H150.138Z" fill="currentColor" />
    <path opacity="0.2" fillRule="evenodd" clipRule="evenodd" d="M67.1667 3.84615H33.8333C17.548 3.84615 4.34615 17.048 4.34615 33.3333V66.6667C4.34615 82.952 17.548 96.1538 33.8333 96.1538H67.1667C83.452 96.1538 96.6538 82.952 96.6538 66.6667V33.3333C96.6538 17.048 83.452 3.84615 67.1667 3.84615ZM33.8333 0C15.4238 0 0.5 14.9238 0.5 33.3333V66.6667C0.5 85.0762 15.4238 100 33.8333 100H67.1667C85.5762 100 100.5 85.0762 100.5 66.6667V33.3333C100.5 14.9238 85.5762 0 67.1667 0H33.8333Z" fill="currentColor" />
    <circle cx="70.634" cy="29.698" r="4.69799" fill="currentColor" />
    <path fillRule="evenodd" clipRule="evenodd" d="M25.668 56.879V29.6978C25.668 27.1032 27.7713 24.9998 30.366 24.9998C32.9606 24.9998 35.0639 27.1032 35.0639 29.6978V56.879C35.0639 61.6976 38.9702 65.6038 43.7888 65.6038H57.2116C62.0302 65.6038 65.9364 61.6976 65.9364 56.879V43.5904C65.9364 40.9958 68.0398 38.8924 70.6344 38.8924C73.229 38.8924 75.3324 40.9958 75.3324 43.5904V56.879C75.3324 66.8869 67.2194 74.9998 57.2116 74.9998H43.7888C33.7809 74.9998 25.668 66.8869 25.668 56.879Z" fill="currentColor" />
  </svg>
);

// ===========================================================================
// Scene 1 — Hook. The sponsor line lands word by word.
// ===========================================================================
const HookScene: React.FC = () => (
  <Drift>
    <AbsoluteFill
      style={{
        alignItems: "center",
        justifyContent: "center",
        padding: "0 120px",
        textAlign: "center",
      }}
    >
      <WordsRise text="Say hello to my new sponsor" fontSize={58} />
    </AbsoluteFill>
  </Drift>
);

// ===========================================================================
// Scene 2 — Reveal. The reui wordmark resolves out of depth, the tagline
// settles beneath. reui's logo is the lowercase wordmark, set in Inter.
// ===========================================================================
const RevealScene: React.FC = () => {
  const frame = useCurrentFrame();
  const p = interpolate(frame, [4, 34], [0, 1], {
    ...clampOpts,
    easing: Easing.out(Easing.cubic),
  });
  const scale = interpolate(p, [0, 1], [1.14, 1]);
  return (
    <Drift>
      <AbsoluteFill style={{ alignItems: "center", justifyContent: "center", gap: 30 }}>
        <div
          style={{
            opacity: p,
            transform: `scale(${scale})`,
            filter: p < 1 ? `blur(${(1 - p) * 20}px)` : undefined,
          }}
        >
          <ReuiLogo height={128} color={INK} />
        </div>
        <div style={{ textAlign: "center" }}>
          <WordsRise
            text="Design-forward shadcn/ui components"
            fontSize={27}
            color={MUTED}
            delay={30}
            stagger={2}
          />
        </div>
      </AbsoluteFill>
    </Drift>
  );
};

// ===========================================================================
// Scene 3 — The icon wall. reui's signature: line-icons that animate on their
// own. Eighteen real registry icons stroke-draw and fire their action in a
// slow diagonal wave, then the caption lands beneath. The icon-scatter cover
// that got us here settles into this grid — the scattered icons find their
// slots.
// ===========================================================================
const WALL_ICONS = [
  StarIcon, SparklesIcon, ZapIcon, BellIcon, CameraIcon, HeartIcon,
  SearchIcon, MailIcon, CloudIcon, TrophyIcon, CrownIcon, MoonIcon,
  PlayIcon, SunIcon, RocketIcon, CheckCircleIcon, SettingsIcon, TrendingUpIcon,
];

const IconsScene: React.FC = () => {
  const frame = useCurrentFrame();
  const cols = 6;
  const captionP = interpolate(frame, [46, 66], [0, 1], {
    ...clampOpts,
    easing: Easing.out(Easing.cubic),
  });
  return (
    <Drift grow={0.025}>
      <AbsoluteFill style={{ alignItems: "center", justifyContent: "center", gap: 44 }}>
        <div
          style={{
            display: "grid",
            gridTemplateColumns: `repeat(${cols}, 84px)`,
            gap: 24,
          }}
        >
          {WALL_ICONS.map((Icon, i) => {
            const col = i % cols;
            const row = Math.floor(i / cols);
            const delay = (col + row) * 4;
            return (
              <div
                key={i}
                style={{
                  width: 84,
                  height: 84,
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  borderRadius: 16,
                  border: `1px solid ${BORDER}`,
                  background: "rgba(255,255,255,0.02)",
                }}
              >
                <Sequence from={delay} layout="none">
                  {/* Draw on once in the wave, then keep looping the action so
                      the wall stays alive — phases stay offset by each icon's
                      stagger, so it ripples rather than flashes in sync. */}
                  <Icon animation="both" loop speed={0.8} size={40} color={INK} strokeWidth={2} />
                </Sequence>
              </div>
            );
          })}
        </div>
        <span
          style={{
            fontFamily: SANS,
            fontWeight: 400,
            fontSize: 30,
            color: MUTED,
            opacity: captionP,
            transform: `translateY(${(1 - captionP) * 12}px)`,
          }}
        >
          Icons that animate on their own
        </span>
      </AbsoluteFill>
    </Drift>
  );
};

// ===========================================================================
// Scene 4 — Components. reui goes past the base primitives — Data Grid,
// Kanban, Stepper — so the spot draws its own, one live vignette per hard cut.
// ===========================================================================
const PANEL_W = 500;
const PANEL_H = 250;
const panelStyle: React.CSSProperties = {
  position: "relative",
  width: PANEL_W,
  height: PANEL_H,
  borderRadius: 16,
  border: `1px solid ${BORDER}`,
  background: CARD,
  overflow: "hidden",
};

// 01 Data Grid — a header row with a sort caret, four rows dealing in, the
// second row settling into a selected state.
const GRID_ROWS = [
  { name: "Ava Mercer", role: "Owner", status: "Active" },
  { name: "Liam Cortez", role: "Editor", status: "Active" },
  { name: "Noa Feld", role: "Viewer", status: "Invited" },
  { name: "Kit Rowan", role: "Editor", status: "Active" },
];
const GridIllustration: React.FC<{ frame: number }> = ({ frame }) => {
  const ease = Easing.out(Easing.cubic);
  const sortP = interpolate(frame, [10, 22], [0, 1], { ...clampOpts, easing: ease });
  const selP = interpolate(frame, [40, 50], [0, 1], clampOpts);
  return (
    <div style={panelStyle}>
      {/* Header */}
      <div
        style={{
          position: "absolute",
          left: 0,
          right: 0,
          top: 0,
          height: 44,
          display: "grid",
          gridTemplateColumns: "1.5fr 1fr 1fr",
          alignItems: "center",
          padding: "0 22px",
          borderBottom: `1px solid ${BORDER}`,
          fontFamily: MONO,
          fontSize: 12.5,
          color: MUTED,
        }}
      >
        <span style={{ display: "flex", alignItems: "center", gap: 6 }}>
          Name