Particles Cursor Turns Images Into a Shader Field

Gabriel Villanueva’s Three.js experiment turns images into particle grids that react to cursor movement through GLSL displacement, texture color, and real-time controls.

0:00
/0:47

A dark WebGL canvas showing a monochrome animal image rebuilt as a grid of small particles, with controls for point size, displacement, wave strength, glow size, and resolution.

Particles Cursor takes an image and turns it into a responsive field of tiny points. Move the cursor, swap presets, upload your own image, or nudge the shader controls until the picture starts behaving less like a flat file and more like a nervous little material.

Villanueva describes the build as practice with Three.js, WebGL, GLSL shaders, UVs, textures, particles, raycasting, cursor interaction, and canvas-based displacement. The original image color is preserved per point, while shader calculations handle movement and visual response without turning the page into a heavy 3D production.

Try the presets, upload an image, push the controls around, and watch how much character can come from a few uniforms and a grid of dots that refuses to sit still.

Launch Demo
ShowcaseWebGLThree.jsShadersGLSLParticlesCreative Coding