remocn — Introducing remocn (shaders cut)

1import React from "react";
2import { AbsoluteFill, Easing, Img, Sequence, Series, 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/Manrope";
11import { loadFont as loadMono } from "@remotion/google-fonts/GeistMono";
12 
13import { ScaleDownFade } from "@/components/remocn/scale-down-fade";
14import { ShortSlideRight } from "@/components/remocn/short-slide-right";
15import { KineticCenterBuild } from "@/components/remocn/kinetic-center-build";
16import { LineByLineSlide } from "@/components/remocn/line-by-line-slide";
17 
18import { ShaderSimplexNoise } from "@/components/remocn/shader-simplex-noise";
19import { ShaderSwirl } from "@/components/remocn/shader-swirl";
20import { ShaderDithering } from "@/components/remocn/shader-dithering";
21import { ShaderColorPanels } from "@/components/remocn/shader-color-panels";
22import { ShaderWarp } from "@/components/remocn/shader-warp";
23import { ShaderMeshGradient } from "@/components/remocn/shader-mesh-gradient";
24import { ShaderVoronoi } from "@/components/remocn/shader-voronoi";
25import { ShaderMetaballs } from "@/components/remocn/shader-metaballs";
26import { ShaderGodRays } from "@/components/remocn/shader-god-rays";
27import { ShaderSmokeRing } from "@/components/remocn/shader-smoke-ring";
28 
29// Bind Manrope to the CSS variable the remocn typography components read.
30const { fontFamily: SANS_FAMILY } = loadSans("normal", {
31  subsets: ["latin"],
32  weights: ["400", "500", "600", "700", "800"],
33});
34const { fontFamily: MONO_FAMILY } = loadMono("normal", {
35  subsets: ["latin"],
36  weights: ["400", "500"],
37});
38 
39const SANS =
40  "var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif";
41const MONO = `${MONO_FAMILY}, ui-monospace, SFMono-Regular, monospace`;
42 
43// The shipped remocn.dev brand: warm obsidian + one lime accent.
44const OBSIDIAN = "#141318";
45const INK = "#f2f2f2";
46const MUTED = "rgba(242,242,242,0.62)";
47const FAINT = "rgba(242,242,242,0.4)";
48const LIME = "#C3E88D";
49 
50const clampOpts = {
51  extrapolateLeft: "clamp" as const,
52  extrapolateRight: "clamp" as const,
53};
54 
55// ---------------------------------------------------------------------------
56// Scene timings (frames @ 30fps). Transitions overlap.
57// … truncated