← All components
Surfaces / component
Electric Border
A fine, irregular current traces a softly glowing perimeter.
PLAYGROUND
Take it with you.
SOURCE ACCESS
Preview freely. Unlock the files.
Enter the shared password to copy the complete source, download every file, and install components in your app.
Access lasts 24 hours. Your preview settings stay with you.
Component notes
- The included Demo.tsx and shared/demo.css recreate the complete preview. Import the main component to compose your own design.
- Reduced motion keeps a still effect. Hidden and offscreen instances stop requesting frames; all owned work is cancelled on unmount.
- Keep space around the card for the outer glow.
React 19CSS
React Bits · MIT with Commons Clause. Used with explicit project permission; see bundled notice.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | undefined | Content rendered inside the interactive surface; the demo uses this control as its heading. |
color | string | #5227FF | Border color |
speed | number | 1 | Motion speed |
chaos | number | 0.12 | Noise intensity |
borderRadius | number | 24 | Corner radius |
style | CSSProperties | undefined | Additional outer styles; reserve space for the glow. |
paused | boolean | false | Freeze the current frame; hidden time is excluded. |
replayToken | number | 0 | Change this value to restart the effect. |
className | string | '' | Additional outer classes. |