35 particles. Six categories.

Static fields (PA), interactive (PB), 3D geometry (PC), WebGL shaders (PD), scroll-driven (PE), and playful overlays (PF). Each preview lazy-mounts when scrolled into view — Three.js / WebGL only spins up the ones you can see. Total: 35 particles.

Category PA

PA · Static Particle Fields

Ambient particle layers that drift, rise, twinkle. Always-on backgrounds.

7 patterns

PA-01
Drift Field
medium
Loading preview…
Visit a flagship demo to experience this pattern in context.
1000–2000 particles drifting on slow Perlin noise. Universal base layer.
all
PA-02
Sparse Stars
subtle
Loading preview…
Visit a flagship demo to experience this pattern in context.
200–400 brighter particles with slow twinkle. Quiet luxury.
dentalluxury
PA-03
Pollen Drift
medium
Loading preview…
Visit a flagship demo to experience this pattern in context.
Warm cream + gold particles with horizontal sway and rise.
floristcafebakery
PA-04
Cool Trail
subtle
Loading preview…
Visit a flagship demo to experience this pattern in context.
Cool blue particles that follow the cursor with smoothing.
dentalmodern
PA-05
Monochrome Snow
subtle
Loading preview…
Visit a flagship demo to experience this pattern in context.
Pure white particles falling slowly downward. Editorial monochrome.
barbershopboutique
PA-06
Glitter Burst
bold
Loading preview…
Visit a flagship demo to experience this pattern in context.
Sparkles with global twinkle pulse. AdditiveBlending. High energy.
nailmed_spa
PA-07
Bubble Float
medium
Loading preview…
Visit a flagship demo to experience this pattern in context.
Soft round bubbles floating up with sine sway. Playful.
pet_groomingfamily

Category PB

PB · Dynamic / Interactive

Particles that respond to cursor, click, and touch — pull, repel, ripple, bounce.

8 patterns

PB-01
Magnetic Pull
bold
Loading preview…
Visit a flagship demo to experience this pattern in context.
Particles strongly pull toward cursor with spring-back.
nailinteractive_showcase
PB-02
Scroll Trail
medium
Loading preview…
Visit a flagship demo to experience this pattern in context.
Particles trace a trail behind the scroll direction.
editorialstory
PB-03
Click Ripple 3D
medium
Loading preview…
Visit a flagship demo to experience this pattern in context.
Click anywhere — 3D ripple particles expand from that point.
interactive
PB-04
Mouse Repel
medium
Loading preview…
Visit a flagship demo to experience this pattern in context.
Particles strongly avoid the cursor (inverse magnetic).
moderninteractive
PB-05
Touch Burst
bold
Loading preview…
Visit a flagship demo to experience this pattern in context.
Mobile-friendly tap burst with finger position.
interactivekidsplayful
PB-06
Gravity Well
bold
Loading preview…
Visit a flagship demo to experience this pattern in context.
Particles pulled toward cursor with inverse-square gravity.
showcaseplayful
PB-07
Bouncing Balls
medium
Loading preview…
Visit a flagship demo to experience this pattern in context.
Gravity + floor bounce. Click adds upward velocity.
kidsfamilysports
PB-08
Vortex Spiral
bold
Loading preview…
Visit a flagship demo to experience this pattern in context.
Particles spiral around the cursor with angular velocity.
portfolioluxury

Category PC

PC · 3D Geometry

Solid 3D shapes (cube, torus, crystals) rotating, orbiting, drifting.

6 patterns

PC-01
Rotating Cube
medium
Loading preview…
Visit a flagship demo to experience this pattern in context.
Solid wireframe cube rotating on multiple axes.
moderntech
PC-02
Spinning Torus
medium
Loading preview…
Visit a flagship demo to experience this pattern in context.
A torus spinning with subtle distortion.
moderntech
PC-03
Wireframe Orbit
bold
Loading preview…
Visit a flagship demo to experience this pattern in context.
Multiple orbiting wireframe shapes around a center.
editorialpremium
PC-04
Floating Crystals
medium
Loading preview…
Visit a flagship demo to experience this pattern in context.
Crystal/diamond geometries drifting in 3D space.
nailjewelryluxury
PC-05
Orbiting Spheres
subtle
Loading preview…
Visit a flagship demo to experience this pattern in context.
Multiple small spheres orbiting a central anchor.
moderntech
PC-06
Wireframe Tunnel
medium
Loading preview…
Visit a flagship demo to experience this pattern in context.
Camera through translucent torus tunnel. Scroll deepens position.
editorialbrandpremium_hero

Category PD

PD · WebGL Shaders

Fragment-shader fields: gradient, distortion, noise, flow field, plasma.

5 patterns

PD-01
Gradient Shader
subtle
Loading preview…
Visit a flagship demo to experience this pattern in context.
Animated gradient with smooth color transitions.
modernall
PD-02
Distortion Shader
medium
Loading preview…
Visit a flagship demo to experience this pattern in context.
Wave-based texture distortion via fragment shader.
creativeagency
PD-03
Noise Shader
subtle
Loading preview…
Visit a flagship demo to experience this pattern in context.
Perlin noise pattern with time-based shift.
all
PD-04
Flow Field Shader
medium
Loading preview…
Visit a flagship demo to experience this pattern in context.
Vector field flow visualization via fragment shader.
creativedata
PD-05
Plasma Flow Shader
bold
Loading preview…
Visit a flagship demo to experience this pattern in context.
GLSL plasma fragment shader with 3-color brand injection.
editorialcreativeagency

Category PE

PE · Scroll-driven 3D

3D scenes whose camera or geometry is wired to the visitor's scroll.

3 patterns

PE-01
Scroll Camera
bold
Global effect
Scroll wires the 3D camera path. Visit a demo Hero to experience the dolly.
3D camera moves along a path as the visitor scrolls.
editorialstorypremium_hero
PE-02
Scroll Snap Slides
bold
Global effect
Scroll snaps the camera between locked 3D slides.
Scroll-snapped 3D slides — each section locks the camera in place.
editorialportfolio
PE-03
Depth Zoom
medium
Global effect
Scroll dollies the camera deeper into the scene.
Camera dollies into a 3D scene as the visitor scrolls.
luxurystory

Category PF

PF · Playful & Surprise

Global overlays — cursor morphs, idle winks, easter eggs, click bursts.

6 patterns

PF-01
Konami Easter Egg
bold
Global effect
Type the Konami code to trigger a brand-fit surprise overlay.
Up Up Down Down Left Right Left Right B A — triggers a surprise.
playful
PF-02
Cursor Shape Morph
medium
☕✂✿🦷✨🐾🍕●
Global effect
Cursor morphs into a category-fit shape on hover. 8 shapes available.
Cursor morphs into business-fit shape on hover (coffee, scissors, tooth, …).
all
PF-03
Logo Magnetism
subtle
Global effect
Logo dots drift toward the cursor like magnets. Returns gracefully when you leave.
Logo elements drift toward cursor like magnets.
brandmodern
PF-04
Idle Wink
subtle
Global effect
Every 30–60s, a random element scales 1 → 1.1 → 1. Subtle reminders.
Every 30-60s a random element does a brief 'wink' (scale 1→1.1→1).
all
PF-05
Click Burst
medium
Global effect
Every click spawns a brand-color particle burst from the cursor.
Brand-color particle burst from every click point.
all
PF-06
Scroll Speed Tilt
subtle
Global effect
Elements with [data-scroll-tilt] rotate ±3deg in proportion to scroll velocity.
Elements with data-scroll-tilt rotate based on scroll velocity.
all