Glyph Anatomy

$ pnpm dlx shadcn@latest add @remocn/glyph-anatomy

Usage

// src/Root.tsx
import { AbsoluteFill, Composition } from "remotion";
import { GlyphAnatomy } from "@/components/remocn/glyph-anatomy";
 
const Title = () => (
  <AbsoluteFill style={{ backgroundColor: "#0a0a0a" }}>
    <GlyphAnatomy text="Glyph" />
  </AbsoluteFill>
);
 
export const RemotionRoot = () => (
  <Composition
    id="GlyphAnatomy"
    component={Title}
    durationInFrames={96}
    fps={30}
    width={1280}
    height={720}
  />
);

Four guides draw across first: cap height, x-height, baseline and descender, read from the font's own metrics. Then, letter by letter two frames apart, anchors pop along each contour in drawing order. While they appear the outline runs straight from anchor to anchor. Handles grow out of the anchors next and pull each segment into its curve, overshooting a little before they settle. The glyphs fill in around frame 40 and the points, handles and guides fade out, leaving the clean word. keepPoints keeps the scaffolding.

TrueType fonts describe curves with quadratics; the component converts them to cubics so every curve shows one handle on each end, as in Figma or Glyphs. Static instances of variable fonts keep overlapping contours, and they show in the outline the way they would in a font editor.

fontUrl defaults to Inter ExtraBold from Google Fonts' static CDN and accepts any .ttf, .otf or .woff file. The labels use Inter from @remotion/google-fonts. The word centers in its parent and sizes scale with height / 720.