Changelog — The remocn agent skill, rebuilt

1import React, { type CSSProperties, type ReactNode } from "react";
2import {
3  AbsoluteFill,
4  Easing,
5  interpolate,
6  spring,
7  useCurrentFrame,
8  useVideoConfig,
9} from "remotion";
10import {
11  TransitionSeries,
12  linearTiming,
13  type TransitionPresentation,
14  type TransitionPresentationComponentProps,
15} from "@remotion/transitions";
16import { loadFont as loadSans } from "@remotion/google-fonts/Manrope";
17import { loadFont as loadMono } from "@remotion/google-fonts/GeistMono";
18 
19import { RemocnUIProvider } from "@/lib/remocn-ui";
20import { DynamicGrid } from "@/components/remocn/dynamic-grid";
21import { RollingNumber } from "@/components/remocn/rolling-number";
22 
23// ---------------------------------------------------------------------------
24// Fonts — bind to the CSS variables the remocn components read.
25// ---------------------------------------------------------------------------
26const { fontFamily: SANS_FAMILY } = loadSans("normal", {
27  subsets: ["latin"],
28  weights: ["400", "500", "600", "700", "800"],
29});
30const { fontFamily: MONO_FAMILY } = loadMono("normal", {
31  subsets: ["latin"],
32  weights: ["400", "500", "700"],
33});
34 
35const SANS =
36  "var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif";
37const MONO = "var(--font-geist-mono), ui-monospace, SFMono-Regular, monospace";
38 
39// ---------------------------------------------------------------------------
40// Palette — one warm accent (Claude/agent) on a flat near-black doc surface.
41// ---------------------------------------------------------------------------
42const BG = "#0a0a0a";
43const INK = "#fafafa";
44const FAINT = "rgba(250,250,250,0.50)";
45const DIM = "rgba(250,250,250,0.32)";
46const HAIR = "rgba(250,250,250,0.10)";
47const SURFACE = "#141414";
48const ACCENT = "#D97757"; // warm — the agent accent
49const GREEN = "#5fcf80"; // muted semantic — Added
50const BLUE = "#6aa8f5"; //  muted semantic — Changed
51 
52// ---------------------------------------------------------------------------
53// Scene timings (frames @ 30fps). Transitions overlap adjacent scenes.
54// ---------------------------------------------------------------------------
55const S_OPEN = 78; //    positioning — "the skill, rebuilt"
56const S_BEFORE = 82; //  problem — one monolithic file
57const S_TREE = 168; //   hero — the new structure builds as a file tree
58const S_CHANGES = 132; // change list — what got added
59const S_STATS = 120; //  proof — rolling numbers
60const S_OUTRO = 120; //  CTA — wordmark + tagline
61 
62// … truncated