shieldcn — Everything for your README

1import React, { type ReactNode } from "react";
2import { AbsoluteFill, Easing, Img, Sequence, Series, interpolate, interpolateColors, spring, useCurrentFrame, useVideoConfig } from "remotion";
3import { demoAsset } from "@/lib/demo-assets";
4import {
5  TransitionSeries,
6  linearTiming,
7  type TransitionPresentation,
8  type TransitionPresentationComponentProps,
9} from "@remotion/transitions";
10import { loadFont as loadSans } from "@remotion/google-fonts/Geist";
11import { loadFont as loadMono } from "@remotion/google-fonts/GeistMono";
12 
13import { RemocnUIProvider } from "@/lib/remocn-ui";
14import { ShortSlideRight } from "@/components/remocn/short-slide-right";
15import { TerminalSimulator } from "@/components/remocn/terminal-simulator";
16import {
17  GitHubStars,
18  type Stargazer,
19} from "@/components/remocn/github-stars";
20import { BlurIn } from "@/components/remocn/blur-in";
21import { useBlurInTransition } from "@/components/remocn/use-blur-in-transition";
22import { ShaderGrainGradient } from "@/components/remocn/shader-grain-gradient";
23import { StarIcon } from "lucide-react";
24 
25// shieldcn speaks shadcn's language: Geist Sans for copy, Geist Mono for every
26// URL and command.
27const { fontFamily: SANS_FAMILY } = loadSans("normal", {
28  subsets: ["latin"],
29  weights: ["400", "500", "600", "700"],
30});
31const { fontFamily: MONO_FAMILY } = loadMono("normal", {
32  subsets: ["latin"],
33  weights: ["400", "500", "700"],
34});
35 
36const SANS =
37  "var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif";
38const MONO = "var(--font-geist-mono), ui-monospace, SFMono-Regular, monospace";
39 
40// shieldcn palette — the shadcn zinc register plus the one liberty the brand
41// takes: badge-value green. The dated shields colors live ONLY in the pain beat.
42const BG = "#09090b"; //      zinc-950 canvas
43const INK = "#fafafa"; //     zinc-50 text
44const MUTED = "#a1a1aa"; //   zinc-400
45const FAINT = "rgba(250,250,250,0.45)";
46const BORDER = "rgba(255,255,255,0.10)";
47const CARD = "rgba(255,255,255,0.03)";
48const GREEN = "#22c55e"; //   the badge-value green
49const GREEN_SOFT = "#4ade80";
50 
51// ---------------------------------------------------------------------------
52// Scene timings (frames @ 30fps), one per beat. Transitions overlap.
53// ---------------------------------------------------------------------------
54const S_HOOK = 120; //     stacked slide-in lines, README marker-highlighted
55const S_PAIN = 120; //     counter-drifting marquee wall of dated badges
56// … truncated