Cameras that glide, menus that pop, health bars that drain smoothly — none of it is
an "animation system". It's the lerp from chapter 02, applied every frame.
Add velocity and it becomes a spring. This is the game juice chapter.
press play — 90 seconds ↓
The lesson · a 90-second movie you can touch
Press play. It explains itself.
Plays like the video — one caption at a time, the picture animating under it —
and it pauses when it's your turn. Skip around with the dots or arrow keys.
The full lab comes after.
In chapter 02, t scrubbed along a curve once. The twist:
make A "where I am" and B "where I want to be" —
then re-run the lerp every single frame. The output of one frame
becomes the input of the next.
The lerp you already own, from chapter 02:P = (1−t)·A + t·BRename the players: A = where I am (x), B = where I want to be (target):xnext = (1−t)·x + t·targetxnext = x + (target − x)·t← same thing, rearrangedNow run it every frame, with a small fixed t (call it k):x += (target − x) · 0.1"move 10% of the REMAINING distance each frame."
Big gap → big step. Small gap → tiny step. It never quite arrives — always approaching
— and that's exactly why it feels organic instead of mechanical.gap shrinks exponentially100 → 90 → 81 → 72.9 → …
drag the ✛ target
x += (target − x) · 0.12
gap: — px
square = hard cut (robotic) · circle = smoothed
Step 2 · Add velocity
The spring lab
The per-frame lerp only ever slows down — it can't overshoot.
Real things have momentum. So instead of nudging position, nudge
velocity toward the target, and let friction bleed it off:
v += (target−x)·stiffness·dt, v *= damping, x += v·dt.
That's a spring. Drag the ✛ and watch the box overshoot, ring, and settle.
drag the ✛ · watch it ring
that wiggle after arrival = the spring "ringing" →
Spring params
Presets — the feel menu
x=(0, 0) · v=(0, 0)
v += (gap)·k·dt
v *= 0.920
x += v·dt
(x-axis shown — y is the same math)
Step 3 · Feel the difference
The juice gallery
Identical logic, identical duration budget — a coin
goes to the score corner, the counter goes up by 10. The only difference
between these three is the math between start and end. Press collect and watch
which one your eye believes.
INSTANT · functional
LERP · smooth
SPRING · alive
← same click, three feels
Step 4 · Spot it in the wild
where springs are hiding, everywhere —
Camera follow. Every 3rd-person camera you've ever loved is a
damped spring chasing the player. Too stiff = rigid pole. Too loose = seasick.
The "feel" is two numbers.
UI juice. Menus sliding in, buttons popping on press, toasts
bouncing into place — v += (target−x)·k·dt running on screen
coordinates instead of world space.
Health bars. The bar doesn't snap to the new value — it drains
smoothly toward it. That's the per-frame lerp, one line, on a single number.
Squash & stretch. The oldest animation principle —
1930s Disney animators drew it by hand. Now it's scale following velocity through
one line of spring math.
See it in 3D · orbit it like Blender
The chase camera, in the third person
A target flies a smooth 3D path; the cyan cube chases it with the exact spring from this chapter, per axis: v += gap·k·dt; v *= damp; p += v·dt. Tune it floaty or snappy and watch the trail tell on you — every wiggle in the ribbon is the spring ringing.