GlowBorder
Decorative glowing border effect for highlighting important elements. Supports configurable color, intensity levels, and an animated pulsing mode.
Intensity Levels
Preview
Low intensity (5px)
Medium intensity (10px)
High intensity (20px)
Animated
Preview
Pulsing glow animation
Custom Color
Preview
Red glow
Blue glow
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| color | string | var(--spectre-primary) | CSS color value for the glow effect. Defaults to the theme primary color. |
| intensity | "low" | "medium" | "high" | "medium" | Intensity of the glow. low = 5px spread, medium = 10px, high = 20px. |
| animated | boolean | false | When true, applies a pulsing glow animation instead of a static box-shadow. |
| children | ReactNode | - | Content to wrap with the glowing border. |
| className | string | - | Additional CSS classes for the container. |
Accessibility
- The glow effect is purely visual and does not convey information on its own.
- Do not rely solely on the glow to indicate state changes -- pair with text or icon indicators.
- The animated pulse may be distracting for users with motion sensitivities. Consider respecting
prefers-reduced-motion.