Volt Arc
webglProProcedural, never-repeating lightning with branches and glow that fills its container.
Opening soon
Pro cannot be bought yet. The page opens when payment is ready.
Preview
The preview could not load.
Live demo. The theme switches the demo itself.
Code
volt-arc.tsxPro
The code is locked
Volt Arc is part of Manniche UI Pro. A key unlocks the source of all 60 effects.
Opening soon€49 · Introductory price until 31 December 2026. €79 after that.
- One-off payment
- One developer
- Your key arrives by email straight away
- No VAT (§ 19 UStG)
Have a key? Get the code with the CLI or MCP.
The key lives in MANNICHE_PRO_KEY, never in your code or a URL. How to set it up
CLI
npx shadcn@latest add @manniche-pro/volt-arcMCP
claude mcp add --transport http manniche-ui https://mikkelmanniche.dk/api/mcp --header "Authorization: Bearer $MANNICHE_PRO_KEY"Props
VoltArcProps
| Prop | Type | Default | What it does |
|---|---|---|---|
color | string | '#9d7bff' | Colour of the bolt and its glow. Any CSS colour, including var(--x). The core is always pushed towards white. |
background | string | 'var(--background, Canvas)' | Colour behind the bolt. Any CSS colour. The default follows the page's --background token, so the stage matches light and dark themes. Use transparent to draw only the bolt over whatever is behind. On a light background the bolt switches to a deep, tinted core with a soft glow so it stays visible instead of glowing white on white. |
angle | number | 0 | Tilt of the bolt in degrees. 0 is vertical, 90 is horizontal. |
position | number | [number, number] | 0.5 | Where the bolt passes through the frame, 0 to 1. A single number is the horizontal position; a pair is [x, y]. |
size | number | 1 | Scale of the whole bolt: its width, its glow and how widely it wanders. 1 is a bolt about a third of the frame wide. |
speed | number | 1 | Time scale. 0 freezes the strike. The shape never repeats, at any speed. |
intensity | number | 1 | Brightness, 0 to 2. |
label | string | – | Accessible name. When set, the strike is announced as an image; leave it out when the bolt is decoration. |
children | ReactNode | – | Content drawn on top of the strike. |
className | string | – | – |
style | CSSProperties | – | – |
A11y
No accessibility notes written yet.
The notes come with the source when Pro opens.