Overview
The solid word leads a downward preparation and release. Five outlined copies follow at 60ms intervals, fan upward, hold, then converge. The original silhouette returns before the loop boundary.
Build
- 01
Stack five outlined copies behind one solid word. Keep decreasing opacity on the distant layers.
- 02
Hold the readable word, then dip it 1.2cqw to prepare the upward release.
- 03
Delay successive outlines by 60ms, with 2.2cqw spacing between their destinations.
- 04
Release quickly, pass the destination by .6cqw, then settle into the fan.
- 05
Hold, converge the outlines back onto the word, and finish every layer before the six-second loop ends.
Example source React / TSX
examples/type-outline-echo.tsx · Uses the catalog’s shared composition helpers.
Loading source…