springSpring
Tune a physical spring response with stiffness, damping, mass, and initial velocity.
- Playground
- React + Motion
- Tunable props
- Reduced motion
npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-spring.json- Purpose
- Shape interruptible, velocity-preserving physical response through stiffness, damping, mass, and initial velocity.
- Trigger
- Trigger on drag release, target-position changes, or state transitions, passing current velocity.
- Interruptibility
- A new target immediately inherits current position and velocity, which is central to the spring experience.
- Reduced motion
- Use high damping or immediate arrival, removing bounce and prolonged micro-oscillation.
springSpringA simulated oscillator approaches a target according to stiffness, damping, mass, and current velocity.
stiffness-tensionStiffness / TensionStiffness determines the restoring force applied for a given distance from the spring's target.
dampingDampingDamping removes energy from a spring over time, controlling oscillation and settlement.
massMassMass sets inertia in the spring equation, influencing acceleration and the perceived weight of motion.
bounceBounceA spring crosses its target one or more times before its oscillation converges.
perceptual-durationPerceptual durationThe perceived duration ends when remaining spring movement falls below a visually meaningful threshold.
momentumMomentumStored velocity continues to influence motion after direct manipulation ends.
velocityVelocityVelocity records both speed and direction, allowing a new transition to inherit current movement.
interruptible-animationInterruptible animationAn in-progress transition accepts a new target while retaining continuity of position and velocity.