1. Install the Component Open your Framer project → Assets → Code → + → New File. Paste the component code, name it ParticleHeroGlow, and hit Save.
2. Add to Canvas Drag ParticleHeroGlow from the Assets panel onto your canvas. Resize freely — it adapts to any frame size.
3. Customize in the Panel Select the component and use the right-hand Properties panel to tweak:
BG Color / BG Image — set your hero background
Particle Color — match your brand palette
Particles / Move — 12–25 is the sweet spot
Scatter Radius — controls how wide the cloud spreads
Particle Size — dot radius (varies ±50% naturally)
Intensity — overall brightness of the glow
Particle Lifetime — how long each dot lingers
4. Edit Your Copy Toggle Show Text on, then fill in your Eyebrow and Heading strings. Use the Framer Font picker to set typeface, size, weight, and alignment.
5. Preview Hit Preview (or press P) and move your cursor across the hero — watch the particle cloud trail your movement in real time.
Tip: For a subtle ambient effect, lower Intensity to ~0.5 and raise Lifetime to 3000ms. For a dramatic trail, push Particles/Move to 30+ and keep Lifetime short (~800ms).
Each mouse movement spawns a burst of tiny canvas-drawn dots scattered via Gaussian distribution around the cursor path. Each particle has an individual lifetime with a smooth fade-in/out easing. A RAF loop redraws every frame and prunes dead particles automatically.
Live particle emission on cursor move with bloom/shadow glow
Fully configurable: color, scatter radius, particle size, lifetime, intensity
Optional background image with opacity control + dot-grid fallback
Editable eyebrow + heading with Framer Font picker support
Responsive canvas via ResizeObserver — works at any frame size
Use Cases
SaaS hero sections, portfolio headers, product launch pages, AI/tech landing pages, interactive dark-mode showcases
