Motion study

Focus Click Pullback

Loading…
Part

Overview

Push into the control. Cursor travels and clicks (ring). Pull back while panels morph to the next layout.

Build

  1. 01

    Push.

  2. 02

    Click + ring.

  3. 03

    Pull + panel morph.

.cam { animation: s6-camera }
.cursor { animation: s6-cursor-* }
Example source React / TSX

examples/focus-click-pullback.tsx · Uses the catalog’s shared composition helpers.

Loading source…