ParticleCloud Scroll

Scroll-driven 3D particle morphing for Framer. Seven shapes. Zero code.

ParticleCloud is a WebGL-powered component that renders hundreds of particles and smoothly morphs them between geometric formations as users scroll through your page. Built with Three.js and custom GLSL shaders, it delivers buttery 60fps animations with full depth perspective — all controllable from the Framer sidebar.

Key Features

• 7 particle formations: Sphere, Sphere + Chaos, Cube, Cube + Chaos, Plane (viewport-filling), Ring (tilted annulus), and Empty (full dispersal).

• Any order, any combination: Each scroll section gets its own shape picker — no fixed sequence. Use 2 sections or 10. Repeat shapes. Mix freely.

• Morph Spin: An extra rotation kick on each shape transition. Set it to 0° for calm morphs or crank it to 720° for dramatic spins. Born from a happy accident, refined into a feature.

• Per-particle breathing: Every particle has its own phase and frequency, creating organic micro-motion even when the cloud is still.

• Scroll-driven morphing: Particles interpolate positions on the GPU via custom vertex shaders — no JavaScript position updates per frame.

• Additive glow rendering: Soft radial sprites with additive blending. Particles overlap into bright concentrations, giving the cloud a natural luminosity.

• Auto rotation dampening: 3D shapes rotate gently; flat shapes (Plane, Ring, Empty) automatically fade rotation to zero with smooth damping.

• Transparent background: Renders with alpha — layer it over any section, image, or gradient.

Best For

• Hero sections with a living, breathing 3D background

• Scroll-driven storytelling where each section has a distinct visual identity

• Product landing pages that need a "wow" moment without heavy assets

• Creative portfolios and agency sites

• Ambient backgrounds that respond to user interaction

• Section transitions that feel intentional and crafted