Building fluid uis with mathematics

---

title: "Building fluid UIs with mathematics"

date: "2026-07-24"

description: "How I used basic trigonometry and physics concepts to create smoother animations and interactions in my web apps."

---

When building interactive web applications, static animations often feel robotic. Human movement is smooth, organic, and governed by physics. By introducing simple mathematical formulas—like sine waves, lerp (linear interpolation), and dampening—you can transform rigid user interfaces into fluid, natural experiences.

## Why Physics-Based Animations Matter

Standard CSS transitions use fixed timing functions like ease-in-out. While great for basic hover effects, they lack natural momentum. When an object follows user input—like hand gestures, cursor movement, or drag interactions—it needs momentum.

### Linear Interpolation (Lerp)

Lerp is one of the simplest yet most powerful concepts in web graphics. It smoothly transitions a value from point A to point B over time:

function lerp(start, end, factor) {

  return start + (end - start) \* factor;

}