Font Cycle

One word rapidly cycles through typefaces, each labeled, before settling in its final face

Installation

$ pnpm dlx shadcn@latest add @remocn/font-cycle

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { FontCycle } from "@/components/remocn/font-cycle";
 
const FontCycleScene = () => (
  <FontCycle word="Shipped" passes={2} showLabel />
);
 
export const RemotionRoot = () => (
  <Composition
    id="FontCycle"
    component={FontCycleScene}
    durationInFrames={130}
    fps={30}
    width={1280}
    height={720}
  />
);

The word swaps through the fonts list for passes rounds, starting fast and slowing, with the font name shown as a small label under it. It then lands in the final face with a small settle and a gradient sheen while the guides fade. Pass word, and custom fonts or final only if their font families are already loaded in your project; it ships light and dark through theme.

Props8

Prop	Type	Default
word	string"Launch" The word that cycles through the typefaces.
fonts	FontCycleFace[]DEFAULT_FONTS Faces to cycle through; each needs a loaded family and a label.
final	FontCycleFaceFINAL_FACE Face the word settles into at the end.
passes	number2 How many times the font list is cycled.
showLabel	booleantrue Show each font's name under the word.
accent	string"#3B5BFD" Color of the label dot once the word lands.
theme	"dark" \| "light""dark" Ships light and dark.
speed	number1 Playback speed multiplier.

wordstring
The word that cycles through the typefaces.
Default"Launch"
fontsFontCycleFace[]
Faces to cycle through; each needs a loaded family and a label.
DefaultDEFAULT_FONTS
finalFontCycleFace
Face the word settles into at the end.
DefaultFINAL_FACE
passesnumber
How many times the font list is cycled.
Default2
showLabelboolean
Show each font's name under the word.
Defaulttrue
accentstring
Color of the label dot once the word lands.
Default"#3B5BFD"
theme"dark" | "light"
Ships light and dark.
Default"dark"
speednumber
Playback speed multiplier.
Default1