Components
/
Glow Effect
Glow Effect
A customizable glowing effect component with various animation modes.
Preview
Installation
Install the required dependencies and add the component to your project.
npm install motionUsage
import { GlowEffect } from "@/components/ui/glow-effect"
<div className="relative">
<GlowEffect mode="rotate" />
<Button className="relative">Click me</Button>
</div>Examples
Pulse Mode
Breathe Mode
Color Shift Mode
Card Background
Glowing Card
A card with a static glow background
Flow Horizontal
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| colors | string[] | ["#3b82f6", "#8b5cf6", "#ec4899"] | Array of colors for the glow gradient |
| mode | GlowMode | "rotate" | Animation mode: "rotate" | "pulse" | "breathe" | "colorShift" | "flowHorizontal" | "static" |
| blur | number | 100 | Blur intensity in pixels |
| scale | number | 1.5 | Scale factor for pulse/breathe animations |
| duration | number | 4 | Animation duration in seconds |
| transition | Transition | - | Custom Framer Motion transition |
On This Page
Deploy your Saturation UI app
Build beautiful, saturated interfaces with our component library.
Deploy to Vercel for the best performance and developer experience.