Skip to main content
← Back

Craft

A motion spec, references, interaction studies, and essays on UI behavior.

Motion Spec

The motion tokens this site runs on. Constraints, not flourishes.

Spring presets

  • snappy

    buttons, toggles, immediate feedback

    stiffness 500 / damping 35

  • default

    general UI state transitions

    stiffness 300 / damping 30

  • gentle

    content reveal, structural transitions

    stiffness 170 / damping 26

  • soft

    large movement, modal context shifts

    stiffness 120 / damping 20

Timing tiers

  • Feedback

    press states, icon state changes

    100-180ms

  • State change

    panel expand/collapse, route transitions

    220-320ms

  • Context shift

    modal enters, large layout shifts

    350-500ms

Reduced motion

If reduced motion is enabled, transitions become opacity-first with duration collapse. No drag-dependent interactions are required to complete core flows.

References

External design engineering notes worth keeping close.

Interaction Studies

Small working demos of feedback and state changes. Sharing, downloads and playback are simulated; the motion is the part being shown.

Like Button

A bouncy spring scales the heart, the color changes, and a ring pulses once. Tap again to undo.

Download Progress

The button becomes its own progress bar, so the result appears where you pressed.

Share Menu

Items arrive 40ms apart on a spring. Escape or a click outside closes the menu.

Playback Control

Play and pause cross-fade in place. The bar fills linearly, because time does.

0:000:10

Essays