remocn ✕ Paper — Introducing shaders

1import React from "react";
2import {
3  AbsoluteFill,
4  Easing,
5  Series,
6  interpolate,
7  spring,
8  useCurrentFrame,
9  useVideoConfig,
10} from "remotion";
11import {
12  TransitionSeries,
13  linearTiming,
14  type TransitionPresentation,
15  type TransitionPresentationComponentProps,
16} from "@remotion/transitions";
17import { loadFont as loadSans } from "@remotion/google-fonts/Manrope";
18import { loadFont as loadMono } from "@remotion/google-fonts/GeistMono";
19 
20import { BlurOutUp } from "@/components/remocn/blur-out-up";
21import { ShortSlideRight } from "@/components/remocn/short-slide-right";
22import { LineByLineSlide } from "@/components/remocn/line-by-line-slide";
23import { KineticCenterBuild } from "@/components/remocn/kinetic-center-build";
24 
25import { ShaderGrainGradient } from "@/components/remocn/shader-grain-gradient";
26import { ShaderMeshGradient } from "@/components/remocn/shader-mesh-gradient";
27import { ShaderWarp } from "@/components/remocn/shader-warp";
28import { ShaderLiquidMetal } from "@/components/remocn/shader-liquid-metal";
29import { ShaderGodRays } from "@/components/remocn/shader-god-rays";
30import { ShaderNeuroNoise } from "@/components/remocn/shader-neuro-noise";
31import { ShaderVoronoi } from "@/components/remocn/shader-voronoi";
32import { ShaderDotOrbit } from "@/components/remocn/shader-dot-orbit";
33import { ShaderMetaballs } from "@/components/remocn/shader-metaballs";
34import { ShaderWater } from "@/components/remocn/shader-water";
35import { ShaderSpiral } from "@/components/remocn/shader-spiral";
36import { ShaderSwirl } from "@/components/remocn/shader-swirl";
37import { ShaderDithering } from "@/components/remocn/shader-dithering";
38import { ShaderPulsingBorder } from "@/components/remocn/shader-pulsing-border";
39 
40// Bind Manrope to the CSS variable the remocn typography components read.
41const { fontFamily: SANS_FAMILY } = loadSans("normal", {
42  subsets: ["latin"],
43  weights: ["400", "500", "600", "700", "800"],
44});
45const { fontFamily: MONO_FAMILY } = loadMono("normal", {
46  subsets: ["latin"],
47  weights: ["400", "500"],
48});
49 
50const SANS =
51  "var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif";
52const MONO = `${MONO_FAMILY}, ui-monospace, SFMono-Regular, monospace`;
53 
54const INK = "#fafafa";
55const MUTED = "rgba(250,250,250,0.62)";
56const FAINT = "rgba(250,250,250,0.4)";
57const PAPER_BLUE = "#81ADEC";
58 
59const clampOpts = {
60  extrapolateLeft: "clamp" as const,
61  extrapolateRight: "clamp" as const,
62};
63 
64// … truncated