04 3D & physics
Springs instead of fixed durations, and depth with perspective.
- Floor
- 04 of 09
- Demos
- Spring playground, Perspective card
- Skills
- Remotion
Springs instead of durations
A tween says “go from A to B in 300 ms”. A spring says “B pulls on you this hard, and friction is this strong”, then lets physics decide how long it takes. That sounds less controlled, but it is what makes motion feel physical, and it handles interruptions gracefully: grab a spring mid-flight and it keeps its momentum instead of jumping.
Three numbers define it. Stiffness is how hard it pulls, damping is friction, and mass is weight. Together they give the damping ratio: below 1 it bounces, at 1 it arrives as fast as possible without overshooting, above 1 it creeps in.
Spring playground
Drag the ball and let go. A spring has no duration: stiffness pulls it home, damping slows it, mass makes it heavy. Throw it and it keeps your speed.
Drag me
Response from a pull of 1 · first 2.5 s
- Damping ratio
- 0.64
- Settles in
- 617 ms
- Frames @30
- 19
Underdamped: it overshoots and bounces.
How hard it pulls back to the target.
Friction. Low values bounce.
Heavier things are slower to start and stop.
<motion.div
animate={{ x: 0 }}
transition={{
type: "spring",
stiffness: 120,
damping: 14,
mass: 1,
}}
/>Depth with perspective
Most “3D” in interfaces is CSS. perspective sets how far the viewer stands from the screen; rotating an element then foreshortens it like a real card. Give child layers different translateZ values and they move at different speeds as the card turns: parallax, without any scroll tricks.
When you need real 3D (models, lights, cameras), reach for Three.js or React Three Fiber, and pair them with a physics engine such as Rapier for collisions. The principles from floor 01 still apply: a 3D object that moves at constant speed looks just as mechanical as a 2D one.
Perspective card
Move your pointer over the stage, or use the sliders. Perspective is how far away the viewer stands: the closer they are, the stronger the distortion.
New
Launch film
0:30 · 9:16 · 1080p
Under 400 px looks like a wide-angle lens. Over 1500 px is nearly flat.
.stage {
perspective: 800px;
}
.card {
transform: rotateX(12deg) rotateY(-18deg);
transform-style: preserve-3d;
}
/* Layers at different depths move at different speeds: parallax for free. */
.card .chip { transform: translateZ(24px); }
.card .title { transform: translateZ(48px); }Rules of thumb
- Use springs for anything the user drags, flicks or interrupts. Use tweens for choreographed sequences.
- A damping ratio of 0.7 to 0.9 gives a small, pleasant overshoot. Below 0.4 starts to look like jelly.
- Heavier mass reads as importance. A modal can be heavier than a tooltip.
- Keep 3D tilts under about 20 degrees in interfaces; past that, text becomes hard to read.
- In video, convert a spring to frames before you storyboard it: settle time × fps.