Typography

Karaoke Fill

Loading…
Motif10s typicallandscape · portrait · square

Overview

Sweep a second text color through each word over its own duration, retaining the completed fill.

Build

  1. 01

    Place a colored copy exactly over each base word.

  2. 02

    Animate a clipping edge from left to right between that word’s start and end.

  3. 03

    Retain completed words until the phrase ends, then reset with the next cue.

Example source React / TSX

examples/caption-karaoke-fill.tsx · Uses the catalog’s shared composition helpers.

Loading source…