remocn ✕ OrcDev — New sponsor

1import React, { useState } from "react";
2import { AbsoluteFill, Img, continueRender, delayRender, interpolate, useCurrentFrame } from "remotion";
3import { demoAsset } from "@/lib/demo-assets";
4import { TransitionSeries, linearTiming } from "@remotion/transitions";
5import { Gif } from "@remotion/gif";
6import { loadFont as loadPixel } from "@remotion/fonts";
7import { loadFont as loadSans } from "@remotion/google-fonts/Geist";
8 
9import { ShaderDithering } from "@/components/remocn/shader-dithering";
10import { ditherDissolve } from "@/components/remocn/dither-dissolve";
11 
12// 8bitcn speaks shadcn's language — Geist Sans for the small print…
13const { fontFamily: SANS_FAMILY } = loadSans("normal", {
14  subsets: ["latin"],
15  weights: ["400", "500"],
16});
17 
18// …and Geist Pixel (Square) for everything that shouts. Loaded inside the
19// composition — module-scope loadFont fires its delayRender before any
20// composition is mounted and the render proceeds without the font.
21const PIXEL_FAMILY = "Geist Pixel";
22const usePixelFont = () => {
23  // Loaded in an effect (module-scope loadFont fires its delayRender before
24  // the composition mounts and dies silently). The composition renders
25  // nothing until the font is in document.fonts, and continueRender waits two
26  // rAF ticks after the state flip so the screenshot never catches the
27  // fallback font mid-swap.
28  const [loaded, setLoaded] = useState(false);
29  React.useEffect(() => {
30    const handle = delayRender("geist-pixel");
31    loadPixel({
32      family: PIXEL_FAMILY,
33      url: demoAsset("fonts/GeistPixel-Square.woff2"),
34    })
35      .catch(() => undefined)
36      .then(() => {
37        setLoaded(true);
38        requestAnimationFrame(() =>
39          requestAnimationFrame(() => continueRender(handle)),
40        );
41      });
42    return () => continueRender(handle);
43  }, []);
44  return loaded;
45};
46 
47const PIXEL = `${PIXEL_FAMILY}, monospace`;
48const SANS = `${SANS_FAMILY}, -apple-system, BlinkMacSystemFont, sans-serif`;
49 
50// orcdev palette — black canvas, the paper.design dithering preset's #008000
51// for the backdrop dots, and the bright orc-skin green sampled straight from
52// the orcdev avatar for the accent.
53const BG = "#000000";
54const DOT_GREEN = "#008000";
55const ORC_GREEN = "#8ec71e";
56// HP-bar damage states — classic health-bar traffic light.
57const HP_YELLOW = "#f7d51d";
58const HP_RED = "#e53935";
59const INK = "#fafafa";
60const MUTED = "rgba(250,250,250,0.55)";
61const FAINT = "rgba(250,250,250,0.4)";
62 
63const clampOpts = {
64// … truncated