Spherical mesh

Living geometry with Perlin Noise and particles

I’ve always been fascinated by shapes that sit somewhere between mathematical and organic.
You can’t quite tell if they’re just mathematical calculations or if they have a life of their own.

A while ago, seeing a sphere of particles reacting fluidly to a user felt way beyond my capabilities. It was something I wanted to integrate, but it seemed reserved for experienced developers and Awwwards-winning websites. But once you understand the logic behind it and leverage current technology to execute it, you can go from an idea to a working prototype in an afternoon. In this experiment, that’s exactly what I wanted: to make a 3D structure that doesn’t feel rigid, but instead breathes, reacts, and has a personality of its own.

The foundation: pure trigonometry

Although what you see is a “living” sphere, there’s some fairly simple math underneath. Each particle is placed using spherical coordinates (latitude and longitude), and with sin and cos you convert them into X and Y positions. The key is in the Z.

You don’t draw it directly, but you do use it to determine:

• the size of each particle
• its opacity

That’s what creates the sense of depth. The ones in front have more weight, while the ones in the back fade away.

Organic movement with Perlin Noise

If you leave the sphere as is, it’s perfect… but it’s boring. To break that up, we bring in 3D Perlin Noise. Unlike typical random, everything flows here. There are no jumps, only continuity. What I did was work with several layers (octaves):

• Low frequencies set the global movement, as if the sphere were breathing
• High frequencies add that small detail that makes everything feel more natural

It’s that mix that keeps it from looking like a simple loop.

Where UX comes in: particle behavior.

This is where it stops being just visual and starts being interaction.

I didn't want all the particles to react the same way.
I wanted them to feel distinct.

• Color 1 Particles
  They behave in a “curious” way. They approach the mouse, but not in a straight line.
  Each one has its own chaos, as if they were living organisms.
• Color 2 Particles
  The exact opposite. They move away from the cursor cleanly and directly.
  More predictable, more “cold.”

And then there’s the important detail:

• Spring effect
  When the cursor leaves, nothing snaps back instantly.
  Everything has inertia, friction… and returns to its place little by little.

That small detail completely changes the feel.

How to code it (without spending weeks)

This is where it all gets really interesting.

You don’t need to master all the technical aspects to start building things like this. You can clearly define the logic, the behavior, the aesthetic… and let AI generate the foundation for you.

Then you tweak it.

If you want to build it yourself, this would be a good starting point:

The Prompt

Create an HTML/JS canvas animation with a 3D sphere made only of particles (no lines).

Aesthetic:

• Black background (#050508) with a slight film grain effect
• Particles alternating between green (#BCF448) and violet (#8A38F5) - *Replace with your preferred colors

Behavior:

• Organic deformation using 3D Perlin noise (multiple octaves)
• Slow rotation on the Y-axis
• Depth: front particles larger and more visible, back particles smaller and more transparent

Interaction (radius ~160px):

• Color 1→ attracted to the cursor with organic, individual movement
• Color 2→ directly repelled
• When leaving the radius → return with a spring and friction effect

Encapsulate in an IIFE, look for a container #animation and make the canvas responsive.

Conclusion

These types of tests are a real game changer.

Before, you would see something like this and just let it slide.
Now you can take it apart, understand it, and rebuild it your own way.

For me, it’s about having fewer technical barriers and more focus on the details. How it moves, how it responds, the feeling it conveys, and how the end user perceives it.

Being able to go from an idea to something tangible without getting stuck in the process is the most important shift for small teams and freelancers.