Kerning Snap

Loose letters snap one by one into correct kerning, forming a gradient serif word

Installation

$ pnpm dlx shadcn@latest add @remocn/kerning-snap

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { KerningSnap } from "@/components/remocn/kerning-snap";
 
const KerningSnapScene = () => (
  <KerningSnap word="Kerning" interval={6} />
);
 
export const RemotionRoot = () => (
  <Composition
    id="KerningSnap"
    component={KerningSnapScene}
    durationInFrames={120}
    fps={30}
    width={1280}
    height={720}
  />
);

Letters start scattered and loose across the frame; from the center outward, each one springs into its kerned position every interval frames with a brief flash on the snap ticks, and the gradient fill reads whole once the word is set. Pass word and tune interval for pacing; it ships light and dark through theme.

Props5

Prop	Type	Default
word	string"Typeset" The word assembled from loose letters.
interval	number7 Frames between one letter snapping and the next.
accent	string"#3B5BFD" Color of the flash ticks beside the word.
theme	"dark" \| "light""dark" Ships light and dark.
speed	number1 Playback speed multiplier.

wordstring
The word assembled from loose letters.
Default"Typeset"
intervalnumber
Frames between one letter snapping and the next.
Default7
accentstring
Color of the flash ticks beside the word.
Default"#3B5BFD"
theme"dark" | "light"
Ships light and dark.
Default"dark"
speednumber
Playback speed multiplier.
Default1