remocn ✕ Canadian AI — New sponsor

1import React from "react";
2import { AbsoluteFill, Easing, interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
3import { TransitionSeries, linearTiming, type TransitionPresentation, type TransitionPresentationComponentProps } from "@remotion/transitions";
4import { loadFont as loadInter } from "@remotion/google-fonts/Inter";
5import { loadFont as loadPlayfair } from "@remotion/google-fonts/PlayfairDisplay";
6 
7import { ShaderGrainGradient } from "@/components/remocn/shader-grain-gradient";
8import { SoftBlurIn } from "@/components/remocn/soft-blur-in";
9import { pushThrough } from "@/components/remocn/push-through";
10import { focusPull } from "@/components/remocn/focus-pull";
11 
12// Canadian AI speaks in an editorial register — Inter for the interface voice,
13// Playfair Display for the serif statements, exactly as canadian-ai.ca pairs them.
14const { fontFamily: INTER_FAMILY } = loadInter("normal", {
15  subsets: ["latin"],
16  weights: ["400", "500", "600", "700"],
17});
18const { fontFamily: SERIF_FAMILY } = loadPlayfair("normal", {
19  subsets: ["latin"],
20  weights: ["500"],
21});
22loadPlayfair("italic", { subsets: ["latin"], weights: ["500"] });
23 
24const SANS = `${INTER_FAMILY}, -apple-system, BlinkMacSystemFont, sans-serif`;
25const SERIF = `${SERIF_FAMILY}, Georgia, serif`;
26 
27// Canadian AI palette — the site is paper-white with black ink and one amber
28// accent (#F59E0B, their "live" dots and Start buttons). The only light-theme
29// sponsor spot in the collection, because the brand is light.
30const PAPER = "#FCFBF9";
31const INK = "#111110";
32const MUTED = "rgba(17,17,16,0.6)";
33const FAINT = "rgba(17,17,16,0.38)";
34const AMBER = "#F59E0B";
35 
36const clampOpts = {
37  extrapolateLeft: "clamp" as const,
38  extrapolateRight: "clamp" as const,
39};
40 
41// ---------------------------------------------------------------------------
42// Scene timings (frames @ 30fps). Transitions overlap.
43// ---------------------------------------------------------------------------
44const S_INTRO = 70; //   the mark draws itself on, amber live-dot pops
45const S_HOOK = 66; //    "Say hello to my new sponsor"
46const S_REVEAL = 110; // Canadian AI wordmark + serif tagline
47const S_PHILOSOPHY = 76; // "Better tools create more value."
48const S_LOCKUP = 120; // Remocn ✕ Canadian AI + canadian-ai.ca
49 
50// "What we build" — the site's own numbered product list, cut into beats.
51const PRODUCTS = [
52  {
53    num: "01",
54    name: "Core",
55    blurb: "Unified identity, workflows, and system foundation",
56  },
57  {
58// … truncated