āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/aceternity/components/glowing-effect ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
A border glowing effect that adapts to any container or card, as seen on Cursor's website.
bento grid, card, border, highlight
npx shadcn@latest add @aceternity/glowing-effect
Run the following command:
npx shadcn@latest add @aceternity/glowing-effect
| Prop | Type | Description | Default Value |
| :--- | :--- | :--- | :--- |
| blur | number | 0 | The amount of blur applied to the glowing effect in pixels |
| inactiveZone | number | 0.7 | The radius multiplier for the center zone where the effect is disabled. Value between 0 and 1 |
| proximity | number | 0 | The distance in pixels beyond the element's bounds where the effect remains active |
| spread | number | 20 | The angular spread of the glowing effect in degrees |
| variant | "default" | "white" | "default" | The color variant of the effect. "default" uses a multi-color gradient, while "white" uses a black and white scheme |
| glow | boolean | false | When true, forces the effect to be visible regardless of hover state |
| className | string | undefined | Additional CSS classes to apply to the effect container |
| disabled | boolean | true | When true, disables the interactive glowing effect |
| movementDuration | number | 2 | The duration of the glow movement animation in seconds |
| borderWidth | number | 1 | The width of the glowing border in pixels |
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā