wobblyOS!

Best way to make my “web os” feel like a real app? Disabling user text selection (seriously 😭)

How wobblyOS windows feel alive
The goal of this system is not to “animate” windows with CSS transitions. It treats every window as a physical object with mass, velocity and momentum, then simulates that every frame.
This makes movement feel weighted, reactive, and surprisingly satisfying.

The spring
Every window tracks two positions- where it is, and where it’s going:

currentX += (targetX - currentX) * 0.18

That 0.18 is the spring stiffness.

Velocity
After each position update, velocity is derived from the gap that remains:

velocityX = targetX - currentX

This is reused for every visual effect.

Rotation
The window tilts based on how fast it’s moving horizontally:

rotate = velocityX * 0.08

Drag it left and it leans left. Etc etc.

Squash & stretch
Animation principle, applied physically:

stretchX = 1 + abs(velocityX) * 0.0015
stretchY = 1 - abs(velocityX) * 0.0008

Fast horizontal movement makes it wider and slightly shorter.

Bounce
A sine wave modulated by current velocity adds a subtle wobble while moving:

bounce = sin(time * 0.015) * min(speed, 25) * 0.15

When still, it does nothing- moving, it oscillates.

Open & close
A second spring drives the scale when windows appear or disappear:

velocity += (target - value) * stiffness
value    += velocity

Open: spring launches from 0 with an initial velocity kick, overshoots 1, bounces back.
Close: target flips to 0, the window squashes down toward the taskbar and vanishes.

Taskbar
Waits 500ms after the window is gone, then pops in on its own spring. Restore reverses it- button springs out first, then the window pops back.

Summary
Every effect shares one velocity value derived from one spring equation. No CSS transitions, no keyframes, just position, momentum, and a multiply.

I started building wobblyOS!, a jellified web-os with some fancy animations that you will all be delighted to see. (using HTMX and github pages)