---
title: "Particle Hero Glow — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Velnium HQ · Sections. Cursor-trail particle glow hero section"
canonical: "https://framer.elliotli.dev/component/particle-hero-glow"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/Particle Hero Glow

# Particle Hero Glow

Cursor-trail particle glow hero section

[View on Framer](https://framer.com/marketplace/components/particle-hero-glow/?via=elliot-li)

![Particle Hero Glow preview image 1](https://framer.elliotli.dev/og/component/particle-hero-glow/662fb9a0fa20f4a2/1600x1200.jpg)

## Summary

Cursor-trail particle glow hero section

## Description

### How to Use

**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).

### How It Works

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.

### Key Features

-   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

## Rank history [How rankings work →](/terms#rankings)

-   All · #10320

## Details

- **Author**: Velnium HQ
- **Price**: $5.00
- **Published**: 2026-04-07
- **Updated**: 2026-04-07
- **Added**: 2026-03-24
- **Categories**: Sections

## More like this

-   [Sale Bar](/component/sale-bar) — Brandon Grimes · $12 — Auto-start Black Friday promo bar
-   [Show and Tell](/component/show-and-tell) — Majed Monem · $9 — Feature tabs that play themselves
-   [Infinite Picker Whee](/component/infinite-picker-whee) — Karim Saif · Free — Rotating 3D text selector
-   [Resource Preview Dec](/component/resource-preview-dec) — felix strobel · Free — Editorial guides with folding cove