Glow Effect
A customizable glow effect with animation modes, colors, blur, and transitions.
Examples
Glow effect static background
Glow effect button
You can use different modes to animate the glow effect.
Glow effect card mode
Installation
npx shadcn add "https://motion-primitives.com/c/glow-effect.json"Component API
GlowEffect
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | undefined | Optional CSS class for styling the component. |
| style | React.CSSProperties | undefined | Optional CSS properties for styling the component. |
| colors | string[] | ['#FF5733', '#33FF57', '#3357FF', '#F1C40F'] | The colors to use for the glow effect. |
| mode | 'rotate' | 'pulse' | 'breathe' | 'colorShift' | 'flowHorizontal' | 'static' | 'rotate' | The mode to use for the glow effect. |
| blur | 'number' | 'softest' | 'soft' | 'medium' | 'strong' | 'strong' | 'stronger' | 'strongest' | 'none' | 'medium' | The blur to use for the glow effect. |
| transition | Transition | undefined | The transition to use for the glow effect. |
| scale | number | 1 | The scale to use for the glow effect. |
| duration | number | 5 | The duration to use for the glow effect. |