GlowingEffect
A wrapper component that adds glow effects to any element with configurable variants and intensity.
Loading...
Basic Usage
import { GlowingEffect } from "@corew500/ui"
<GlowingEffect>
<div className="p-4 bg-card rounded-lg">
Content with default glow
</div>
</GlowingEffect>Variants
// Rainbow glow with animated hue rotation
<GlowingEffect variant="rainbow">
<Card>Rainbow glow</Card>
</GlowingEffect>
// Pulsing glow effect
<GlowingEffect variant="pulse">
<Card>Pulsing glow</Card>
</GlowingEffect>
// Success state glow
<GlowingEffect variant="success">
<Card>Success glow</Card>
</GlowingEffect>
// Destructive/error glow
<GlowingEffect variant="destructive">
<Card>Error glow</Card>
</GlowingEffect>Intensity Levels
<GlowingEffect intensity="subtle">Subtle glow</GlowingEffect>
<GlowingEffect intensity="default">Default glow</GlowingEffect>
<GlowingEffect intensity="strong">Strong glow</GlowingEffect>Animated
Enable animation for the glow effect:
<GlowingEffect animated>
<Button>Animated glow</Button>
</GlowingEffect>Polymorphic Element
Render as any HTML element:
<GlowingEffect as="section" variant="rainbow">
<p>Content in a section</p>
</GlowingEffect>Disabled State
<GlowingEffect disabled>
<Card>No glow when disabled</Card>
</GlowingEffect>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| disabled | enum | false | Whether to show the glow effect. Can be used for conditional rendering |
| as | enum | div | Element type to render as |
| variant | enum | default | — |
| intensity | enum | default | — |
| animated | enum | false | — |
Design Tokens
| Token | Description |
|-------|-------------|
| --glow-card-blur | Blur radius for glow |
| --glow-card-spread | Spread distance |
| --glow-animation-duration | Animation duration |
| --glow-rainbow-colors | Colors for rainbow variant |