Glowing Effect
An interactive glowing border effect that follows your cursor. Creates a stunning animated glow around cards and containers with vibrant gradient colors.
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.
This card is also built by Cursor
I'm not even kidding. Ask my mom if you don't believe me.
Coming soon on ObsidianUI
I'm writing the code as I record this, no kidding.
Install using CLI
npx shadcn@latest add "https://obsidianui.dev/r/glowing-effect.json"Install Manually
1
Install dependencies
2
Copy the source code
Copy into components/ui/glowing-effect.tsx
Note: Install via CLI for the full source code with animation and cursor tracking logic.
Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| blur | number | 0 | Blur amount for the glow effect |
| inactiveZone | number | 0.7 | Dead zone in center where glow is inactive (0-1) |
| proximity | number | 0 | Distance for cursor detection |
| spread | number | 20 | Spread of the glow gradient |
| variant | 'default' | 'white' | 'default' | Color variant of the glow |
| glow | boolean | false | Enable/disable the glow effect |
| disabled | boolean | true | Disable cursor tracking |
| movementDuration | number | 2 | Animation duration in seconds |
| borderWidth | number | 1 | Width of the glowing border |
| className | string | - | Additional CSS classes |
Usage Tips
Enable Interactive Mode
Set disabled={false} and glow={true} to enable the interactive cursor-following effect:
<GlowingEffect
disabled={false}
glow={true}
proximity={64}
spread={40}
inactiveZone={0.01}
borderWidth={3}
/>Card Layout
Wrap your content in a relative container with padding for the border:
<div className="relative rounded-2xl border p-2 bg-white">
<GlowingEffect disabled={false} glow={true} />
<div className="relative rounded-xl border bg-white p-6">
{/* Your content */}
</div>
</div>