A few days ago, I wrote about getting bored with flat, static websites and trying to build something that actually reacts to the user. I wanted the DOM to feel physical.
For my next update, my original plan was to go completely overboard — I'm talking HTML5 Canvas, complex math, Hooke's Law for spring physics, and particles that react to cursor velocity.
Here is what I added to make the UI feel even more alive:
1.True Magnetic UI (Hooke's Law in JS) 🧲
In the first version, elements just followed the cursor. Now, they have mass and tension.I implemented a physics engine for the buttons using Hooke’s Law ($F = -kx$). When your cursor gets within a certain radius, the button snaps towards it. But the magic happens when you pull away — it doesn't just snap back; it wobbles and settles down with friction.
// The core kinematics engine making it happen
const forceX = (targetX - currentX) * stiffness;
velX = (velX + forceX) * friction;
currentX += velX;
2. Velocity-Reactive Particles (Canvas) ✨
Backgrounds shouldn't just sit there. I added an HTML5 Canvas layer with a particle grid.
But they aren't just floating randomly. The particles track the instantaneous velocity of your cursor.
If you move your mouse slowly, the particles gently move out of the way.
If you swipe your mouse aggressively, the particles calculate the momentum, scatter violently, and then spring back to their original grid positions.
It feels like swiping your hand through a pool of glowing water.
3. Integrating it into "Cyber-Hand OS" 💻
I'm taking all these micro-interactions and using them to build out the control panel for my larger project, Cyber-Hand OS. Starting with simple ON/OFF states for volume and notifications, but layering these fluid physics on top of them.
Sometimes, over-engineering a simple button is exactly what you need to remember why frontend development is so much fun.
Check it out!
You can play with the live demo here:
https://naman9104.github.io/Updated-experiment/
And the full code is on my repo: https://github.com/naman9104/Updated-experiment
Top comments (0)