remocn ✕ shieldcn — New sponsor

1import React from "react";
2import { AbsoluteFill, Easing, Img, Sequence, interpolate, 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";
11 
12import { ShaderGodRays } from "@/components/remocn/shader-god-rays";
13import { SoftBlurIn } from "@/components/remocn/soft-blur-in";
14 
15// shieldcn speaks shadcn's language — Geist Sans everywhere.
16const { fontFamily: SANS_FAMILY } = loadSans("normal", {
17  subsets: ["latin"],
18  weights: ["400", "500", "600", "700", "800"],
19});
20 
21const SANS =
22  "var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif";
23 
24// shieldcn palette — the shadcn zinc register plus the badge-value green.
25const BG = "#09090b";
26const INK = "#fafafa";
27const MUTED = "#a1a1aa";
28const FAINT = "rgba(250,250,250,0.5)";
29 
30const clampOpts = {
31  extrapolateLeft: "clamp" as const,
32  extrapolateRight: "clamp" as const,
33};
34 
35// ---------------------------------------------------------------------------
36// Scene timings (frames @ 30fps). Transitions overlap.
37// ---------------------------------------------------------------------------
38const S_INTRO = 60; //   centered real badge, springing in with a float
39const S_HOOK = 72; //    text animation
40const S_MAIN = 112; //   Remocn ✕ shieldcn lockup
41const S_BALLET = 220; // badge ballet: blur-formed circle → spin → row → exit
42 
43const T_X = 16; //  crossfade
44const T_ZB = 18; // zoom-blur
45const T_XB = 14; // crossfade into the ballet
46 
47export const SPONSOR_SHIELDCN_DURATION =
48  S_INTRO + S_HOOK + S_MAIN + S_BALLET - (T_ZB + T_X + T_XB);
49 
50// The real shieldcn logo mark. When drawProgress is provided, the two paths
51// draw themselves on as strokes and the fill resolves via fillProgress.
52const LOGO_PATHS = [
53  "M148.02,363.76c-4.48,0-8.64-2.42-10.86-6.32l-54.29-95.68c-2.15-3.8-2.15-8.52,0-12.32l54.29-95.68c2.21-3.9,6.37-6.32,10.86-6.32h18.51c4.44,0,8.45,2.28,10.73,6.09,2.27,3.82,2.37,8.43.25,12.33l-42.23,77.99c-3.98,7.36-3.98,16.14,0,23.49l22.22,41.02c4.25,7.85,12.43,12.8,21.36,12.92,0,0,45.08.61,45.11.61,8.68,0,16.83-4.64,21.26-12.12l24.87-41.99c2.23-3.77,6.34-6.11,10.72-6.12l19.47-.04c4.48,0,8.49,2.29,10.76,6.12,2.27,3.83,2.35,8.45.21,12.35l-42.2,77.17c-2.19,4-6.39,6.49-10.95,6.49h-110.08Z",
54// … truncated