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 https://ui.aceternity.com/registry/glowing-effect.jsonExample
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
With the best in class components and templates, stand out from the crowd and get more attention to your website. Trusted by founders and entrepreneurs from all over the world.
Excellent communication and professionalism from the start and
throughout. Happily and calmly accepted and entertained a few additional
out-of-scope requests as well. Good open-...
Henrik Söderlund
Former CTO at Creme Digital