About this app— Particle Studio
A GPU-driven particle studio for designing shader-based 3D wave fields with full color and physics control.
Particle Studio is a browser tool for designing shader-driven 3D particle fields. Every particle's position, color, and behavior is computed each frame in a custom GLSL vertex shader. The CPU manages slider uniforms, geometry attribute buffers, the camera, and the render loop.
It ships with six blueprints (Flowing Waves, Helical Springs, DNA Double Helix, Toroidal Donut, Wormhole Tunnel, Quantum Sphere) and exposes the full set of shader uniforms — frequencies, amplitudes, twist, twist axis, bending, turbulence, point size, glow, opacity, size attenuation, color stops and direction, mouse mode, and mouse strength — in the right sidebar. The tool runs entirely client-side and exports to PNG or JPG.
How it works
The tool is built on Three.js with a single custom ShaderMaterial. A single THREE.Points geometry holds all the particles; positions are recomputed in the vertex shader from a base position defined by the active blueprint, plus a wave perturbation, optional turbulence, and a mouse-driven displacement.
Geometry tab — Pick a blueprint. The Parallel Ribbon Mode toggle snaps each particle's vertical coordinate to one of N discrete rows, producing aligned dot-rows. The Ribbon Line Count controls N (4-80). The Particle Grid Density slider (40-400) controls the number of particles; it rebuilds the geometry buffers. For helical-style blueprints you also get Helix Rotation Turns and Outer Ring Radius.
Math Waves tab — Waveform Geometry Function (Pure Sinusoidal, High-Frequency Triangle, Step-Like Square Wave, Sawtooth Fractal), Frequency X and Y, Amplitude, Twisting Force, Twist Axis (X/Y/Z), Parabolic Arch Curvature, and Noise Turbulence.
Shading tab — Point Node Profile (Soft Glow Sphere, Sharp Clean Circle, Concentric Ring, Geometric Square), Particle Size Scale, Glow Aura, Base Transparency, and a Distance-Based Scaling toggle.
Gradients tab — Gradient Projection Axis (horizontal, vertical, depth, spherical, sequential ribbon), four preset palettes (Cyberpunk, Forest Tech, Sunset Flare, Electric Ice), and three editable color stops (Start, Mid, End).
Camera tab — Projection (Perspective / Orthographic), Animation Motion Speed, Automated Orbit Spin, Cursor Physics Displacement with four modes (PULL attract, PUSH repel, VORTEX swirl, WAVE ripple), and an Interaction Strength slider.
Try these
Helical Springs with Cyberpunk
Pick Helical Springs, set Twisting Force to 2.0, Twist Axis to Y, and the Cyberpunk gradient. The result is a magenta-to-cyan double helix with a clear rotational flow — useful as a title card for music or motion-graphics work.
Quantum Sphere in VORTEX mode
Switch to Quantum Sphere, set Particle Grid Density to 320 (this rebuilds about 90,000 points), set Cursor Physics to VORTEX, and move your cursor over the canvas. The sphere deforms into a swirling orb that follows the pointer; let go and it relaxes back. Good for hero sections.
Wormhole Tunnel as a ribbon
Choose Wormhole Tunnel, turn on Parallel Ribbon Mode, set Ribbon Line Count to 32, and pick Electric Ice. The result is a glowing tunnel receding into infinity — clean enough to use as a backdrop for headline text.
DNA Double Helix with a clean profile
Pick DNA Double Helix, set Point Node Profile to Sharp Clean Circle, Particle Size Scale to 0.4, and the Sunset Flare gradient. The result is a precise, technical-looking helix with a warm color story.
FAQ
Are the particles computed on the GPU or the CPU?
All per-particle position, color, and mouse interaction is computed in the vertex shader. The fragment shader only handles point-sprite masking. The CPU manages slider uniforms, the geometry attribute buffers, the camera, and the render loop.
How many particles can it handle?
The Particle Grid Density slider goes from 40 to 400, which translates to roughly 1,100 to 112,000 particles. Above the slider's range there is no hard cap — performance depends on your device's GPU. Turning on Parallel Ribbon Mode and Distance-Based Scaling both have additional cost.
Can I export at print resolution?
Yes. PNG and JPG exports offer three resolution tiers in the Export modal: 1K, 2K, and 4K long edge. The actual export renders the scene off-screen at that resolution and composites it onto a 2D canvas.
Why are there only 4 color presets?
The four presets are starting points. The Start, Mid, and End color stops in the Gradients tab are always editable; pick the closest preset and adjust the hex values to taste.
Can I save a specific generation?
Use the Export menu in the floating toolbar — it lets you pick PNG or JPG and a resolution tier (1K, 2K, or 4K).
Related tools
Comments
Comments are not configured yet.
This site uses Giscus (GitHub Discussions) for comments. To enable, set the following environment variables and redeploy:
NEXT_PUBLIC_GISCUS_REPO=owner/repo NEXT_PUBLIC_GISCUS_REPO_ID=R_xxx NEXT_PUBLIC_GISCUS_CATEGORY=Comments NEXT_PUBLIC_GISCUS_CATEGORY_ID=DIC_xxx
The values come from giscus.app after you enable Discussions on the GitHub repo.