Why everything in Spendbox has spring physics
A short note on why we use motion as feedback, and how we picked our default stiffness and damping values — with an interactive playground to feel the difference.
Software interfaces have two choices for motion: tweens or physics. Tweens are the classic approach — you specify a start, an end, and a duration, and the animation interpolates between them on a curve. Physics-based motion — springs — works differently. You describe the properties of an object and let the simulation run.
Every UI element in Spendbox uses spring physics. Here's why, and here's how to feel the difference yourself:
Notice the spring version feels like something actually moving. The tween version looks like an animation playing. That distinction is subtle but it has a real effect on how confident a user feels interacting with the interface.
Play with the parameters
Springs have two main parameters: stiffness (how quickly it pulls toward the target) and damping (how much it resists oscillation). Every motion feel comes from the combination of these two values:
Our defaults: stiffness 260 · damping 24. Try bouncy: stiffness 400, damping 8.
Our defaults — stiffness 260, damping 24 — were chosen after testing dozens of combinations. They feel purposeful but not harsh. Quick but not jarring. Try setting stiffness to 80 and damping to 8 for something that feels playful. Try stiffness 500 and damping 50 for something that feels like a financial app from 2012.
Why physics, not timing
The deeper reason we use springs is philosophical. Tween animations say: "this transition will take 200ms." Spring animations say: "this object has these properties, settle naturally."
The first approach is inherently digital — it's imposing time on a simulation. The second approach is physical — it's describing reality and letting it emerge. Users don't consciously notice the difference, but their nervous system does. Springs feel like things that exist. Tweens feel like animations.
For a product that wants to feel calm and trustworthy, the distinction matters.
When you tap something, it should respond immediately — before the action completes. Spring compression on tap-down is a receipt for the gesture.
A small overshoot on entry tells the brain: this is real, not a static image. It's the same reason physical objects don't stop exactly where you place them.
High damping = serious, precise. Low damping = playful, expressive. We use medium damping because Spendbox is calm, not sterile.
Spring animations don't have a fixed duration — they settle when the physics say they're done. This makes them feel genuinely organic.
The Motion library
We use motion/react (formerly Framer Motion) for all animations. It has the best spring implementation available in the React ecosystem, with excellent support for layout animations, shared layout transitions, and gesture-driven physics.
If you're building a UI and wondering whether to add spring physics, the answer is almost always yes. The cost is low, the library handles all the math, and the difference in perceived quality is immediate and meaningful.
Feel it for yourself
Spendbox is designed to feel as good as it works
Every interaction in Spendbox is spring-animated. Claim your address and experience a finance app that actually feels like 2026.
Join the waitlist