Typography

Outline Type Echo

Loading…
Scene6s typicallandscape · portrait · square

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

  1. 01

    Stack five outlined copies behind one solid word. Keep decreasing opacity on the distant layers.

  2. 02

    Hold the readable word, then dip it 1.2cqw to prepare the upward release.

  3. 03

    Delay successive outlines by 60ms, with 2.2cqw spacing between their destinations.

  4. 04

    Release quickly, pass the destination by .6cqw, then settle into the fan.

  5. 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…