welcome to Aether - a kinetic particle sandbox!
I wanted to build something visually stunning but also something that users could play with and explore on their own - so I started this project with no super defined end goal but to see what happens as I go.
It’s essentially a bunch of particles that you can influence and affect using attractors and repulsors - I’ll be adding loads more features soon!
so far its turning out pretty nice.
I’ve built it out using Next.js and tailwind CSS v4 for all the styling.
- I’m using a decoupled state management system with Zustand which allows me to separate the UI interface from the actual physics simulation loop so it won’t affect the frame rate.
- I made a customized 2D canvas that spawns and updates 1,500 particles simultaneously each with their own velocity, friction and boundary wrapping vectors.
- I added a random generator that spawns in the 1,500 particles and also randomly places a couple of attractors and repulsors.
-
I added a realistic gravity affect to the attractor nodes by making the force vector applied to the velocity of a particle inversely proportional to the square of the distance.
- f = (strength · 50) / d²
- Its deployed with vercel so you can check it out if you’d like: https://aether-gilt-kappa.vercel.app/
I’ll be adding loads more features soon - and making it way way way better this is just the base :)⚛️