Transitions

Color Block Wipe

Loading…
Motif5.2s typicallandscape · portrait · square

Overview

A stable silhouette spans changing palette blocks, preserving focus through the wipe.

Build

  1. 01

    Keep a fixed central motif across all blocks.

  2. 02

    Use a deliberate three-beat arrival cadence.

  3. 03

    Hold the palette, then clear columns in reverse order.

Example source React / TSX

examples/color-block-wipe.tsx · Uses the catalog’s shared composition helpers.

Loading source…