Overview
Tighten a serif masthead from slightly open tracking as it gently rises into place. Draw a centered hairline underneath, then introduce an italic descriptor. A fine frame and small folio balance the negative space.
Build
- 01
Use a short serif masthead with a single italic word or syllable.
- 02
Set a fine rectangular border inside the safe area and small fixed publication details.
- 03
Animate tracking from .04em to -.065em with a 25px lift over 1.4 seconds.
- 04
Start the centered rule after 800ms and the descriptor after 1.4s.
- 05
Hold the resolved identity without a competing background loop.
Example source React / TSX
examples/editorial-wordmark-hook.tsx · Uses the catalog’s shared composition helpers.
Loading source…