Glow Orb
A soft ambient light orb follows the cursor with gentle easing — the Vercel effect.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| color | string | #818cf8 | Color of the ambient glow |
| size | number | 520 | Diameter of the glow orb in pixels |
When to Use
The go-to effect for premium SaaS hero sections — used by Vercel, Linear, Raycast, and others. Adds subtle depth without distracting from content.
Best Practices
Keep size between 400-700. Subtle colors (low saturation or low opacity) work best — the effect should feel like ambience, not spotlight. Use alongside a small dot cursor.
Why This Component Matters
Ambient cursor glow is one of the most widely adopted techniques in premium UI design — it makes dark hero sections feel three-dimensional and warm.
FAQ
QWhy does it lag behind the cursor?
Intentionally — the 0.06 easing factor creates a soft, organic follow that feels premium. The small dot follows precisely.
QDoes it need canvas?
No — it's a pure div with a radial-gradient background and requestAnimationFrame position updates. No canvas overhead.
Related Components
Broken Shard Gallery
Images explode outward from center into a chaotic gallery layout as you scroll.
Velocity Smear
Gallery that skews and stretches in real-time based on scroll velocity — the faster you scroll, the more the images smear.
Curtain Split
Two image panels split apart like stage curtains on scroll, revealing editorial text content hidden beneath.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.