Glowing Effect
A border glowing effect that adapts to any container or card, as seen on Cursor's website.
Do things the right way
Running out of copy so I'll write anything.
The best AI code editor ever.
Yes, it's true. I'm not even kidding. Ask my mom if you don't believe me.
You should buy Aceternity UI Pro
It's the best money you'll ever spend
This card is also built by Cursor
I'm not even kidding. Ask my mom if you don't believe me.
Coming soon on Aceternity UI
I'm writing the code as I record this, no shit.
Installation
Run the following command
npx shadcn@latest add @aceternity/glowing-effectExample
Here is another example usage of the same component with different props.
Do things the right way
Running out of copy so I'll write anything.
The best AI code editor ever.
Yes, it's true. I'm not even kidding. Ask my mom if you don't believe me.
You should buy Aceternity UI Pro
It's the best money you'll ever spend
This card is also built by Cursor
I'm not even kidding. Ask my mom if you don't believe me.
Coming soon on Aceternity UI
I'm writing the code as I record this, no shit.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| 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 |
This component was inspired by Cursor's Enterprise page.
Build websites faster and 10x better than your competitors with
Aceternity UI Pro
Next.js 15, Tailwind CSS v4 and Motion for react powered templates
70+ templates and component blocks combined
Ready to copy paste component blocks, save days of development time
