Skip to content
Particles Cursor Turns Images Into a Shader Field
Launch Demo (opens in a new tab)

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.

Details

Maker
Gabriel Villanueva
Published

What it is

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.

NOTE: This work is inspired by teachings directly from Bruno Simon's Three.js course.

How it’s made

Technology
WebGLGLSL
Framework & Tool
Three.js
Technique
ShadersParticles
Domain
Creative Coding

More in GLSL

See all →

Interactive WebGL Jersey Slider Blends Team Kits in 3D

Prity Dhara’s Three.js jersey slider uses one 3D model, shader-based texture transitions, fabric movement, and GSAP motion to make kit changes feel physical.

Prity DharaWebGL

22.09.2000 He Was Born Runs a Portfolio Through a WebGL TV

LUCERRÁ's WebGL portfolio behaves like one CRT broadcast, using texture layers, live 3D render targets, glitch transitions, hand tracking, and adaptive quality.

LUCERRÁWebGL

A Project Gallery That Bends Like Film

A row of project cards behaves like a strip of film you can scroll, flex, and shove around with your cursor. Built in Three.js with hand-written GLSL, where scroll velocity drives a vertex-shader bend and a post-process pass adds the grainy, almost celluloid edge shimmer.

Manish DhakaGLSL
All GLSL work