It started with a button. The hover animation felt wrong — a subtle hitch at 60% progress that no amount of ease-in-out could fix. It was 11 PM. By 3 AM, I was reading a 1962 paper by Pierre Bézier about curves for automobile body design.
This is how rabbit holes work. You don't choose them. They choose you.
The Hitch
Here's the CSS that started it all:
.button {
transition: transform 0.3s ease-in-out;
}
.button:hover {
transform: scale(1.05);
}The scale was fine. The timing was fine. But something about the feel was wrong. The animation didn't breathe. It moved like a machine, not like a thing responding to your touch.
Down We Go
I started reading about cubic-bezier curves. The ease-in-out keyword is actually cubic-bezier(0.42, 0, 0.58, 1). Those four numbers define a curve, and that curve defines how time maps to progress.
/* The default ease-in-out */
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
/* What I ended up with — a slight overshoot */
transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);That second curve overshoots slightly — the element scales to 1.06 before settling at 1.05. It's imperceptible if you're not looking for it. But your hand knows. Your body registers the difference between mechanical and organic.
Bézier's Cars
Pierre Bézier wasn't thinking about buttons. He was working at Renault in the 1960s, trying to describe car body surfaces mathematically so they could be manufactured by computer-controlled machines. Before him, car bodies were sculpted by hand — artisans with clay and an eye for shape.
Bézier's insight was that you could define a curve with just a few control points. The curve wouldn't pass through those points — it would be influenced by them, pulled toward them like gravity. The result was something that felt natural because it was defined by forces, not positions.
This is the same math behind every font you've ever read. Every SVG icon. Every animation on every screen.
What Smoothness Actually Is
Here's what I realized at 3 AM: smoothness isn't about the absence of sharp edges. It's about continuity of derivatives. A smooth curve has no sudden changes in direction, but it also has no sudden changes in the rate of change of direction. And no sudden changes in the rate of change of the rate of change.
It's smoothness all the way down.
Position → where you are
Velocity → how fast you're moving
Acceleration → how fast your speed is changing
Jerk → how fast your acceleration is changing
When an elevator starts moving, you feel the jerk — the change in acceleration. A good elevator minimizes jerk. A good animation does the same thing.
That's why ease-in-out felt wrong for my button. The acceleration curve had a discontinuity. Not in position, not in velocity, but two derivatives deep. My conscious mind couldn't see it. My nervous system could.
The Point
There's no point, really. That's the nature of rabbit holes — they don't lead somewhere useful. They lead somewhere true.
I fixed the button. Nobody noticed. Nobody was supposed to. The whole exercise was a reminder that beneath every pixel on every screen, there are layers of mathematics and history and human perception, all folded into something we experience as "that feels right."
The 3 AM version of you, bleary-eyed and deep in a Wikipedia trail, is doing real work. Not productive work. Understanding work. The kind that makes you slightly better at everything without being measurably better at anything.
Go ahead. Follow the next rabbit hole. You'll surface eventually, blinking, with nothing to show for it except a vague sense that the world is more interesting than you thought.
That's enough.