Animation

Coiled Spring Drag

A draggable tile tethered to its home spot by a drawn coil that stretches and thins as you pull, then whips the tile back when you let go.

Using Coiled Spring Drag

A draggable tile tethered to its home spot by a drawn coil that stretches and thins as you pull, then whips the tile back when you let go.

Try the live preview with a pointer and keyboard, then check focus visibility and the narrow layout in your own page. Use the plate number or slug when asking your coding agent to fetch this component.

Props: coils, stiffness, damping, strokeWidth, accent

Which frameworks are available?

The catalog lists these versions: react, vue, svelte, astro, html. The live preview on this page runs React.

How do I access the implementation?

The preview and component description are public. Sign in with an authorized account to open the code, framework versions and installation panel.

Connect your agent

Nearby

2218Rubber sheet panelAnimationA panel that behaves like stretched rubber: the pointer grabs it, neighboring points drag along, and letting go snaps it back with a wobble.

1771Drag tile trackAnimationA tile you can throw around a bounded track that tilts into the drag, resists past the edges and coasts to a stop with momentum.

1810Spring tunerAnimationA tile that springs between two states while a live trace plots its overshoot, so stiffness, damping and mass can be felt and read at the same time.

1813Stroke drawing boardAnimationA grid of outlined shapes that draw themselves stroke by stroke in a staggered wave, as if a pen were working across the board.

1763Bobble tile gridAnimationA grid of colored tiles that bobble away from the pointer on a spring, bouncing harder the faster the pointer swept across them.

1676Composable RevealAnimationOne reveal wrapper whose slide, fade, zoom and defocus parts can each be switched on and combined into a single spring transition.