Lerp is short for linear interpolation. It is a four-token formula that shows up in game cameras, cursor trails, color gradients, UI springs, shaders, and audio crossfades. Once you know what it looks like, you start seeing it in everything.
The ring following your cursor on this site right now is running lerp. Every frame it closes 12% of the gap between itself and the real pointer position. That trailing feel comes entirely from one line of math.
I use it constantly. It is probably the piece of math I reach for most in creative development, not because it is clever, but because it is exactly the right tool for a surprisingly large number of problems.
The formula
Give it a start value a, an end value b, and a blend factor t between 0 and 1. It gives back something in between.
lerp(a, b, t) = a + (b - a) * tt = 0 gives you a. t = 1 gives you b. Everything in between is a straight, proportional blend. Drag the slider below and watch the dot.
t = 0 → lands on A. t = 1 → lands on B. t = 0.5 → halfway. Always a straight blend.
In code it is a one-liner. Most languages have it built in; in JavaScript I just write it myself:
// JavaScript
const lerp = (a, b, t) => a + (b - a) * t
// GLSL (built-in)
float result = mix(a, b, t);
// Python / numpy
import numpy as np
result = np.interp(t, [0, 1], [a, b])a + (b - a) * t and not a * (1 - t) + b * t? They are mathematically the same. But the first form is more numerically stable. At t = 1 it guarantees you land exactly on b rather than landing somewhere just beside it due to floating-point drift. Small thing, worth knowing.The running lerp: this is the good part
Static lerp blends between two known values. Useful. But the version I actually use every day is different: you call it on every animation frame, feeding the current value back in as the new start. The target stays where it is; the value just keeps creeping toward it.
// Called once per animation frame
current = lerp(current, target, factor)
// Or written out:
current += (target - current) * factorEach frame it closes a fraction of the remaining gap. Never quite arrives, but always getting closer. Crank the factor up and it snaps. Pull it down and it floats.
Pull the factor down to 0.05 or 0.08 and the follower starts to feel like it has mass, like it is being dragged through something. That is exactly what I used in the Stacked 8 experiment: each ring gets a different factor, so the front layer snaps and the back ones drift. The depth illusion comes entirely from timing, not geometry.
current += (target - current) * (1 - Math.pow(1 - factor, deltaTime / 16.67)).Colors are just three numbers
Apply lerp to R, G, and B independently and you get a smooth blend between any two colors. Same formula, three times. This is the math behind CSS gradients, the color mixer in the Blob Editor, and the front-to-back gradient on the Stacked 8 rings.
function lerpColor(hex1, hex2, t) {
const a = parseInt(hex1.slice(1), 16)
const b = parseInt(hex2.slice(1), 16)
const r = Math.round(((a >> 16) & 255) * (1 - t) + ((b >> 16) & 255) * t)
const g = Math.round(((a >> 8) & 255) * (1 - t) + ((b >> 8) & 255) * t)
const c = Math.round( (a & 255) * (1 - t) + (b & 255) * t)
return `rgb(${r},${g},${c})`
}The same formula applied independently to R, G, and B. Change either color above.
One real caveat here. sRGB values are gamma-encoded, which means they do not map linearly to how our eyes perceive brightness. Lerping directly in sRGB skips through perceptually dark territory in the middle, which is why gradients between certain colors look muddy or dim at the halfway point. You can see it clearly if you try blending between two complementary hues above.
For cleaner results, lerp in linear light instead: square the sRGB values before blending, then square-root the result. That is a rough gamma correction and already much better. For the best gradients, interpolate in OKLab, which is designed to be perceptually uniform. HSL is another common option but has its own quirk: hue lerp can take the long way around the color wheel if you are not careful.
For quick creative work, RGB is fine. For anything where color quality matters, it is worth the extra step.
Where you'll spot it
Once you know the shape of it, it is hard to unsee:
- →Game cameras. The camera lerps toward the player each frame. Low factor feels cinematic. High factor feels tight. Most games live somewhere around 0.1.
- →UI animations. A modal lerping its translateY toward 0. A tooltip fading in. A drawer sliding out. Running lerp handles all of it with one line.
- →Scroll-linked effects. scrollProgress goes from 0 to 1 as the user scrolls past a section. Feed that into lerp and you have a parallax, a fade, a progress bar.
- →Procedural animation. Joints lerp toward target angles each frame. No keyframes needed. The motion emerges from the math.
- →Audio crossfades. Volume from 1 to 0 on the outgoing track, 0 to 1 on the incoming one. Same duration, smooth transition.
- →Shaders. GLSL's built-in mix() is lerp. Blending textures, layering noise, interpolating normals. It is everywhere.
A few things worth knowing
- →Clamp t. Outside [0, 1], lerp extrapolates past A or B. Sometimes intentional. Usually a bug.
- →Tune factor by feel. 0.05–0.1 for dreamy. 0.15–0.2 for fluid. 0.3–0.5 for snappy. These assume ~60fps.
- →Running lerp for anything that chases. Mouse, scroll position, camera, audio level. If something needs to follow something else smoothly, this is the tool.
- →Lerp the factor itself. You can lerp the lerp factor to create acceleration and deceleration in the follow. This is how a lot of polished UI ends up feeling hand-tuned.
