Glowing Effect
A glowing border effect that tracks the mouse pointer, perfect for cards and grids.
Raya UI Core
The foundation of modern Vue interfaces, architected by Iman Mohammadi.
Battle Tested
Powering complex production environments like Woodcoder.com.
Enterprise Reliability
Trusted by industry leaders including Hotelyar.com for mission-critical UIs.
Modern Aesthetics
Crafted with the latest design trends and OKLCH color spaces.
Nuxt 4 Ready
Built for the future of the Vue ecosystem with best-in-class performance.
Installation
npx shadcn-vue@latest add https://raya-ui.com/registry/glowing-effect.jsonOr manually:
npm install motion-v clsx tailwind-mergeProps
| Prop | Type | Default | Description |
|---|---|---|---|
| blur | number | 0 | The blur radius of the glow effect in pixels. |
| spread | number | 20 | The spread angle of the conical gradient. |
| proximity | number | 0 | The distance from the element at which the glow becomes visible. |
| inactiveZone | number | 0.7 | Radius ratio from the center where the glow is inactive. |
| borderWidth | number | 1 | The width of the glowing border. |
| movementDuration | number | 2 | Duration of the glow movement animation in seconds. |
| variant | 'default' | 'white' | 'default' | The color variant of the glow. |
Source content adapted from Aceternity UI.