Shape & rhythm

Weightless Bob

Loading…
Motif6s typicallandscape · portrait · square

Overview

Pair a slow, eased vertical drift with a shadow that widens and fades as the object rises. Keep the travel small enough to preserve its silhouette.

Build

  1. 01

    Place an object above a separate soft ground shadow.

  2. 02

    Move the object through one smooth up-and-down cycle with matching start and end poses.

  3. 03

    Widen and fade the blurred shadow at the top of the arc.

  4. 04

    Use a slight counter-rotation to keep the object from feeling rigid.

object: translateY(+3 → −5 → +3)
shadow: scaleX(.8 → 1.15 → .8), opacity(.3 → .13 → .3)
Example source React / TSX

examples/weightless-bob.tsx · Uses the catalog’s shared composition helpers.

Loading source…