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.