EDITFRAMEMotion catalog
← Back to all studies

Motion study

Draft to Hero Morph

Loading…
Part

Overview

Crossfade chrome away. Lerp the draft rect into the isolated hero card. Title/desc/CTA fade in.

Build

  1. 01

    UI dissolve.

  2. 02

    oldRect → heroRect.

  3. 03

    Type in.

old + hero share the object; opacity crossfade
Example source React / TSX

examples/draft-to-hero-morph.tsx · Uses the catalog’s shared composition helpers.

Loading source…