ElectricBorder
electric-borderAnimates noisy electric light around an element boundary.
Usage
Basic usage
Use ElectricBorder to wrap any content, and you will get a circle of electrified and beating borders.
<ElectricBorder borderRadius={16}>
<div className="px-8 py-6 text-sm font-medium">Electric Border</div>
</ElectricBorder>Speed and Chaos
speed controls the jitter speed, chaos controls the intensity of arc tearing.
<ElectricBorder chaos={2} speed={2} borderRadius={20}>
<div className="px-8 py-6 text-sm">Discharging</div>
</ElectricBorder>Custom colors and rounded corners
color Eat any CSS color (it is recommended to use var(--color-...) token), set the maximum value for borderRadius to make a capsule.
<ElectricBorder color="var(--color-chart-3)" borderRadius={999} thickness={2}>
<button type="button" className="px-6 py-3 text-sm font-semibold">
Try it now
</button>
</ElectricBorder>Thick Halo Wrapped Card
thickness Enlarge the soft edge to make the glow more obvious, suitable for emphasizing key cards.
Hulian component library
Powered Bezel · Zero Dependence SVG Turbulence
<ElectricBorder thickness={3} chaos={1.4} borderRadius={14}>
<div className="w-56 space-y-1 px-5 py-4">
<p className="text-sm font-semibold">Hulian Component Library</p>
<p className="text-xs opacity-60">Powered bezel · Zero dependence on SVG turbulence</p>
</div>
</ElectricBorder>When to Use
Wrap a piece of content (button, card, CTA) with an electric arc stroke that continuously discharges and beats to create a technological/cyber atmosphere. If you want a static soft light stroke, use ShineBorder; if you want a single-point surround streamer, use BorderBeam; this component is a powerful dynamic effect of "the entire edge is shaking and discharging", which is the most eye-catching but also the heaviest.
Import
import { ElectricBorder } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| color | string | var(--color-primary) | Current stroke color, light and dark theme. Any CSS color string can be used; the CSS variable feeding SVG stroke must be prefixed with --color- before parsing |
| speed | number | 1 | Current jitter speed multiplier, the larger the value, the faster the jitter (speed=1 ≈ 2s for one round <animate>) |
| chaos | number | 1 | The degree of disorder (turbulence displacement intensity), the larger the stroke, the more violent it will be torn, mapping the scale of feDisplacementMap |
| thickness | number | 2 | The thickness of the soft edge of the frame (px) |
| borderRadius | number | 16 | Corner radius (px), applied to both container and current stroke |
| className | string | — | Root container additional className |
| style | CSSProperties | — | Forward the root container inline style |
Slots
| Slot | Type | Description |
|---|---|---|
| children | ReactNode | Content wrapped by current frame |
Usage Guidelines
- When customizing
color, be sure to bring the--color-prefix (such asvar(--color-chart-3)). Feeding barevar(--primary)to SVG stroke does not resolve, and the stroke will become black or disappear. See [[hulian-token-color-var-needs-color-prefix]]. - The stroked arc requires a dark background to be visible, and the glow is almost invisible on a light background.
Related
BorderBeam · ShineBorder · GlareHover · Lens · AnimatedBeam · OrbitingCircles
Playground
<ElectricBorder
speed={1}
chaos={1}
thickness={2}
borderRadius={16}
>
<div className="px-8 py-6">Electric Border</div>
</ElectricBorder>