Electricity
Lightning that strikes, holds and re-strikes down the same channel: an arc between two points with forks that shoot out and cool, a current round a border, or a calm charged hairline for UI.
Overload
<Fx effect="electricity" preset="Border current" />Features
- Fractal bolts that strike, hold and re-strike down the same channel.
- Forks that shoot out, cool from white to violet and die.
- A calm charged hairline for UI that should stay readable.
Use it for
- Overload or danger states.
- A charged primary action.
- Linking two points.
On this site
- My Stuff: the Personal signThe road to the stormy castle carries a charge once you choose it.
- Project cardsEvery card link carries the Charged hairline: the side's colour, and green on a live link.
Installation
- Get runets.
git clone https://github.com/ziyam-khan/runets - Copy these files into your project, keeping their folders.
- Install what they use.
pnpm add react
Usage
import { Fx } from 'runets'
<div className="card"> {/* position: relative */}
<Fx effect="electricity" />
</div>API
| Prop | Type | What it does |
|---|---|---|
effect | string | The effect’s id, as in the address of this page. |
preset | string | One of the presets above; the first by default. |
params | Params | Any parameter from the table, over the preset. |
place | 'under' | 'over' | Under the parent’s content (fills, halos) or over it (sparkles, glass). Default under. |
radius | number | Corner radius in points; the parent’s own border radius by default. |
backdrop | string | Paint | What glass and distortion read: an image URL, or a function that paints a canvas the size of the parent. |
mask | Paint | An alpha mask for mask glow and text sheen. |
hot | boolean | Drives heat: the layer lights in 60 ms and cools over half a second instead of cutting off. |
trigger | number | Change it to fire a one-shot now (ping, ripple, burst, shockwave, zap). |
wake | number | Change it to redraw for a second when something the layer reads, such as its occluders, moves on its own. |
shape | (time, w, h) => Rect | The effect’s shape inside the parent, per frame: a lens that drifts. |
Parameters
| Name | Range | Default |
|---|---|---|
style Style | border, charged, arc | border |
color Glow | color | 0x4f8dff |
core Core | color | 0xeaf3ff |
cool Cooled fork | color | 0x7a4dff |
amplitude Amplitude | 0 to 24 | 5 |
frequency Frequency | 0.5 to 8 | 2.4 |
speed Speed | 0 to 10 | 3.2 |
coreWidth Core width | 0.2 to 3 | 0.6 |
intensity Intensity | 0 to 3 | 1 |
glow Glow | 1 to 20 | 5 |
forks Forks | 0 to 1 | 0.55 |
flicker Flicker | 0 to 1 | 0.45 |
strands Strands | 1 to 3 | 2 |
gap Gap | -6 to 12 | 2 |
forkLen Fork length | 2 to 60 | 20 |
occlusion Occlusion | 0 to 1 | 0.12 |
Accessibility
- The canvas is aria-hidden and never takes the pointer; the parent keeps its semantics and focus.
- Under prefers-reduced-motion every loop settles on one calm pose; one-shots fade in place instead of travelling.
- Off screen, in a hidden tab or once settled, the layer draws nothing.
- data-motion="off" on the root element is a pause switch for the whole page: every layer rests on that calm pose until it is removed.
Source
The code is in src/fx/glsl/emit.ts in runets, MIT licensed.