Scroll-driven 3D particle morphing for Framer. Seven shapes. Zero code.
Particle Cloud 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.
Name your page sections, assign a shape to each, and watch particles flow from a perfect sphere into a scattered cube, collapse into a flat plane, or dissolve into empty space — all driven by scroll position with eased transitions.
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.
Customization
Everything is exposed on the Framer properties panel — no code required:
Particles — Count (100–5,000), min/max size, min/max opacity.
Motion — Chaos intensity, breathing amplitude, rotation speed, morph spin angle.
Colors — Two-color vertical gradient applied across the cloud. Works with Framer's native color picker.
Scroll Sections — 10 configurable slots. Each slot has a section name field (matching your Framer section's data-framer-name) and a shape dropdown. Leave a slot empty to skip it. The shape picker auto-hides when the name is cleared.
How to Use
Drop the component onto your page (fixed or sticky positioning recommended).
Create sections on your page and name them in Framer (e.g. "Hero", "About", "Contact").
In the component's properties, enter each section name and pick a shape.
Preview — scroll between sections and watch the particles morph.
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
Technical Notes
Built with Three.js and custom GLSL shaders (vertex + fragment).
All morphing happens on the GPU — positions interpolated in the vertex shader via mix().
Canvas placeholder shown on the Framer design canvas with full configuration summary.
ResizeObserver rebuilds viewport-dependent shapes (Plane) on container resize.
Proper cleanup: all GPU resources (`geometry`, material, texture, renderer) disposed on unmount.
devicePixelRatio capped at 2 for mobile performance.
Olexandr Demydov
