Font Shuffle — Remotion font switching title animation

Q: How do I add Font Shuffle to a Remotion project?

Run npx shadcn@latest add @snapcn/font-shuffle. The source is copied into components/snap-cn/ (or wherever your components.json points) with anything it depends on, and you own the code from then on — there is no runtime package to keep installed.

Q: What do I need before using Font Shuffle?

An existing Remotion project (npx create-video@latest) with a components.json. shadcn init does not recognise Remotion, so the installation guide has you write that file by hand — it takes two minutes. The component is MIT licensed and free.

A launch line, Introducing snapcn Pro. It decodes out of scrambled glyphs set in the wrong typeface, lands in the accent, settles to ink and holds. Then the product name tries on eleven typefaces: mono, light, humanist, pixel, script, slab, condensed, italic, blackletter, wide and a bold grotesk. The whole line steps closer on every swap.

How it moves

Nothing tweens. Every beat is a held state. The decode, the accent flash and the swaps are cuts on the 30fps frame grid, the way the original was made: two frames per decode beat, one for the full accent line, three or four per typeface.

The decode is the real line, half-hidden. It is set in a Baskerville with a per-character mask, plus a handful of oversized foreign glyphs (b, e, a) that hang on from one beat to the next. Longer or shorter copy samples the same mask proportionally, so the density stays the same.

Each swap is also a zoom. The line stays centred and steps from ×1.03 to ×1.25 about the middle of the frame. The lead keeps its serif. Only the subject changes face.

Notes

Every beat was measured off a 2s screen recording, frame by frame. Each was fitted in BT.709 Y′CbCr through the capture's own blur, then verified by rendering this component at the recording's size and timestamps and diffing the two. Timing, layout, zoom and colour are the recording's.

The recording's typefaces are not free, so each one was fingerprinted against every Google family in its category and the closest taken: Source Serif 4 (text cut, pinned), Libre Baskerville, Fragment Mono, Hind, a pixel face and Mona Sans. They load from fontsource; if one cannot, the next face in its stack paints.

The accent is the title's own colour, not a theme token. Pass accent to change it.

Installation

$ pnpm dlx shadcn@latest add @snapcn/font-shuffle

Needs an existing Remotion project and a components.json. Two-minute setup if this is your first snapcn component.

Component code

The exact file shadcn add copies into your project.

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { FontShuffle } from "@/components/snap-cn/font-shuffle";

const Launch = () => <FontShuffle lead="Introducing" subject="snapcn Pro" />;

export const RemotionRoot = () => (
  <Composition
    id="FontShuffle"
    component={Launch}
    durationInFrames={115}
    fps={30}
    width={1280}
    height={720}
  />
);

Props

Prop	Type	Default	Description
`lead`	`string`	`"Introducing"`	The fixed half of the line. Stays in the serif throughout
`subject`	`string`	`"snapcn Pro"`	The half that tries on typefaces
`accent`	`string`	`"#9b8ed3"`	The colour the line lands in before it settles to ink
`theme`	`Partial<SnapCnTheme>`	—	Design-system token overrides. Anything you leave out falls back to the shadcn defaults
`mode`	`"light" \| "dark"`	—	Which end of the design system to resolve tokens against

Frequently asked questions

How do I add Font Shuffle to a Remotion project?

Run npx shadcn@latest add @snapcn/font-shuffle. The source is copied into components/snap-cn/ (or wherever your components.json points) with anything it depends on, and you own the code from then on — there is no runtime package to keep installed.

What is Font Shuffle?

Font Shuffle is a Remotion font switching title animation for React. A launch title that decodes out of scrambled glyphs, flashes the accent, then the product name tries on eleven typefaces while the line steps closer.

What do I need before using Font Shuffle?

An existing Remotion project (npx create-video@latest) with a components.json. shadcn init does not recognise Remotion, so the installation guide has you write that file by hand — it takes two minutes. The component is MIT licensed and free.