Björk UI

Components•Spring tuner

Spring tuner

Tune a spring by grabbing its overshoot, see it run, and copy the exact config.

Dependencies

Copy below cli

npx shadcn add @bjork-ui/spring-tuner

How to use

<SpringTuner  defaultValue={{ stiffness: 400, damping: 25, mass: 1 }}  defaultGhosts={[    { stiffness: 300, damping: 30, mass: 0.8 },    { stiffness: 200, damping: 25, mass: 1.2 },  ]}  onCopy={(code) => console.log(code)}/>// Drive your own motion with the tuned config<SpringTuner>  {(transition) => (    <motion.div animate={{ x: open ? 120 : 0 }} transition={transition} />  )}</SpringTuner>

ζ 0.97 · settle 426ms · overshoot 0.0%

stiffness300

damping30

mass0.8

ζ 0.63 · settle 514ms · overshoot 8.1%

Preview

stiffness400

damping25

mass1

{ type: "spring", stiffness: 400, damping: 25, mass: 1 }