Tegami — Releasing, as simple as writing a note

1import React, { type CSSProperties, type ReactNode } from "react";
2import { AbsoluteFill, Easing, Img, interpolate, 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";
12import { loadFont as loadHand } from "@remotion/google-fonts/Caveat";
13import { CheckIcon, CopyIcon } from "lucide-react";
14 
15import { RemocnUIProvider } from "@/lib/remocn-ui";
16import { BlurIn } from "@/components/remocn/blur-in";
17import { useBlurInTransition } from "@/components/remocn/use-blur-in-transition";
18import { StrikethroughReplace } from "@/components/remocn/strikethrough-replace";
19 
20// ---------------------------------------------------------------------------
21// Fonts — the Tegami brand: a bold geometric sans (Manrope) for the wordmark
22// and headlines, a handwritten script (Caveat) for the margin notes / "record
23// your changes!" annotations, and GeistMono for code. Bound to the CSS vars
24// the remocn text components read.
25// ---------------------------------------------------------------------------
26const { fontFamily: SANS_FAMILY } = loadSans("normal", {
27  subsets: ["latin"],
28  weights: ["400", "500", "600", "700", "800"],
29});
30const { fontFamily: MONO_FAMILY } = loadMono("normal", {
31  subsets: ["latin"],
32  weights: ["400", "500", "700"],
33});
34const { fontFamily: HAND_FAMILY } = loadHand("normal", {
35  subsets: ["latin"],
36  weights: ["400", "500", "600", "700"],
37});
38 
39const SANS = "var(--font-geist-sans), -apple-system, sans-serif";
40const MONO = "var(--font-geist-mono), ui-monospace, monospace";
41const HAND = "var(--font-hand), cursive";
42 
43// Monochrome ink-on-paper palette. Pure black ink on warm white paper — the
44// brand uses no color accent at all, and neither do we.
45const PAPER = "#FFFFFF";
46const INK = "#161616";
47const FAINT = "rgba(22,22,22,0.52)";
48const HAIR = "rgba(22,22,22,0.16)";
49const DOT = "#EEEEEE";
50 
51const BANNER = demoAsset("tegami-banner.png");
52const LOGO = demoAsset("tegami-logo.png");
53 
54// ---------------------------------------------------------------------------
55// Scene timings (frames @ 30fps). Transitions overlap and are subtracted.
56// ---------------------------------------------------------------------------
57// … truncated