A real-time hologram particle effect built with Three.js WebGPU, TSL Node Shaders, and Next.js. This repository is a free open-source resource for the creative development community.
It includes a fully interactive 3D Playground to explore every parameter of the effect in real time — particle count, lighting, noise displacement, mouse interaction, model morphing, bloom, and more.
short-git.mov
Original design & concept — igloo.inc Replica developed by Cortiz
Hologram Particles VFX is a production-quality WebGPU particle system that turns any GLB model into an animated holographic cloud of 60,000 instanced spheres. It is designed as a learning resource and a starting point for similar VFX in interactive 3D projects.
Key highlights:
- TSL Node Shaders — all GPU logic written in JavaScript, no GLSL files
- WebGPU native — runs on Three.js r182 WebGPU renderer
- Any GLB — load your own model via drag & drop, particles adapt automatically
- Live model morphing — smooth three-phase transition between GLB models
- Fully parametric — every visual property exposed via real-time GUI
- Zero external shader libraries — everything is hand-written in TSL
- InstancedMesh — 60,000 icosahedron spheres rendered in a single draw call
- GLB surface sampling — positions and normals sampled via
MeshSurfaceSampler, distributed proportionally by triangle area - Dual normal blending — per-particle blend between figure surface normal and sphere local normal for micro-volume shading
- Wrapped diffuse lighting — two-light model with softened terminator (
wrapparameter) - Volume strength — blends figure macro-normal with sphere micro-normal for physical roundness
- Fractal noise displacement —
mx_fractal_noise_vec3drives particle animation along surface normals - Animated noise mask — controls which particles displace and by how much
- Particle displacement — particles pushed outward from cursor within a configurable radius
- Spring-damper physics — per-particle return simulation with tunable stiffness and damping
- Dual glow system — passive proximity glow + active velocity-driven glow with independent decay
- Camera spring — XY translation + Z roll driven by cursor NDC position
- Three-phase state machine — deform out → morph → reform
- GPU lerp —
mix(current, target, progress)uniform drives all 60k particles simultaneously - Transition glow — particles with greatest displacement bloom brightest during morph
- Noise mask dissolve — organic non-uniform deform controlled by mask contrast
- Cylinder — transparent Fresnel edge glow tube framing the figure
- Halo rings — two pairs of rotating arcs at top and bottom of cylinder
- Dot grid — animated floor grid with wave brightness
- Bloom — WebGPU native bloom node, luminance-threshold with tunable strength and radius
Built-in debug visualizations for breakdown and presentation:
| Button | Mode | Shows |
|---|---|---|
WF |
Wireframe | Edge geometry of the loaded GLB |
FLAT |
Flat | Raw particle density, no lighting |
NRM |
Normals | Surface normals as RGB color |
NOI |
Noise | Raw fractal noise field as grayscale |
LIT |
Lit | Combined grayscale diffuse + ambient |
L1 |
Light 1 | Light 1 contribution only |
L2 |
Light 2 | Light 2 contribution only |
All debug modes hide scene decorations (cylinder, rings, grid, header) for clean capture.
A built-in development environment for exploring the effect in context.
- Particle count, sphere size, auto-rotate speed
- Two-light rig — position, color, intensity per light
- Wrap, ambient, volume strength
- Noise amplitude, scale, speed, gain
- Mouse radius, strength, scatter, glow (passive + active)
- Spring stiffness, damping, push strength
- Camera spring stiffness and damping
- Morph duration, reform duration, entrance animation with replay
- Cylinder, rings, and grid toggles with individual parameters
- Bloom strength and radius
- Framework: Next.js 16.1 (App Router)
- 3D / WebGL: Three.js 0.182 (WebGPU renderer)
- Shaders: TSL — Three.js Shading Language (GPU logic in JavaScript)
- Post-processing: Three.js WebGPU bloom node
- GUI Controls: Leva
- Animation: GSAP
- Styling: Tailwind CSS 4
- Language: TypeScript
- Node.js 18+
- pnpm (recommended) or npm
- A browser with WebGPU support (Chrome 113+, Edge 113+)
# Clone the repository
git clone https://github.com/cortiz2894/creative-boilerplate.git
# Navigate to the project
cd creative-boilerplate
# Install dependencies
pnpm install
# Start the development server
pnpm devOpen http://localhost:3000 to explore the effect.
Note: WebGPU is required. If the canvas is blank, check that your browser supports WebGPU at webgpureport.org.
Christian Ortiz — Creative Developer
- Portfolio: cortiz.dev
- YouTube: @cortizdev
- X (Twitter): @cortiz2894
- LinkedIn: Christian Daniel Ortiz
For inquiries, collaborations or questions: cortiz2894@gmail.com
⭐ If you found this useful, consider subscribing to my YouTube channel for more creative development content!