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)