Motion study

Cursor Chip Click

Loading…
Part

Overview

Chips stagger in. Pointer flies to index 0. Press flash + ripple. Chips fade out.

Build

  1. 01

    Chip row stagger.

  2. 02

    Cursor path from→to.

  3. 03

    Press + ripple.

  4. 04

    Row out.

.chip { animation: chip-fade-in, chip-press-flash }
.cursor { animation: chip-cursor-move }
Example source React / TSX

examples/cursor-chip-click.tsx · Uses the catalog’s shared composition helpers.

Loading source…