All studies

Interaction

Squish switch

A switch you can tap or drag: the thumb stretches with its own speed, keeps its area as it does, and flips state at the midpoint.

59 / 74

Where it earns its place

Settings and configurators where a toggle changes something visible: add-ons on a quote, feature flags, plan options.

What we changed

  • Placed in a scope card for Aster OS, where each add-on switch changes the weeks and the fixed price below it.
  • Kept the material behaviour: stretch comes from the thumb's own spring-smoothed velocity, and scaleY is the inverse of scaleX so the thumb keeps its area.
  • Kept drag-to-scrub with a slop before a press becomes a drag, and the state flipping at the midpoint so a release anywhere is honest.
  • Cut the colour, radius and speed props to two sizes on Kinetiq tokens: a champagne track when on, an obsidian thumb riding it.
  • Reduced motion now drops the hover swell as well as the stretch, and the thumb moves instantly; Escape mid-drag still restores the state the press found.