Overview
Keep the letterforms fixed while a color field travels inside them. Give the texture a short rest at each turnaround; the type remains the stable mask throughout.
Build
- 01
Set oversized letterforms with transparent fill and a clipped repeating color field.
- 02
Reserve the initial 10% of the eight-second loop as a brief rest.
- 03
Move the field smoothly to the opposite position by 45%, then hold until 55%.
- 04
Return to the exact starting position at 100%. Keep both lines on the same clock.
Example source React / TSX
examples/type-as-window.tsx · Uses the catalog’s shared composition helpers.
Loading source…