A dynamic SVG turbulence border with optional glow, aura, and overlay — wrap any child for an energized frame.
Default
Cyan electric frame with glow, aura, and overlay around a content card.
Loading…
Installation
source.tsx
Usage
source.tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| borderColor | string | "#00fffc" | Stroke and effect color. |
| cardBackground | string | — | Optional fill for the frame body; omit for theme-adaptive card surface. |
| borderWidth | number | 2 | Border thickness in pixels. |
| distortion | number | 1 | Displacement scale multiplier for the filter. |
| animationSpeed | number | 1 | Higher is faster turbulence motion. |
| radius | string · number | "12px" | Corner radius for the frame layers. |
| glow | boolean | true | Soft blur rings around the stroke. |
| aura | boolean | true | Radial glow behind the card. |
| overlay | boolean | true | Glossy gradient overlay on the surface. |
| effects | boolean | true | Master switch for glow, aura, and overlay (stroke stays). |
| glowBlur | number | 32 | Blur radius for glow and aura layers. |
| numOctaves | number | 2 | Turbulence noise octaves (lower is cheaper). |
| className | string | — | Classes on the root wrapper. |