Charge Border
borderProA crackling electric outline around any content, drawn as a glow pass and a crisp core pass of noise-displaced path.
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
charge-border.tsxPro
The code is locked
Charge Border 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/charge-borderMCP
claude mcp add --transport http manniche-ui https://mikkelmanniche.dk/api/mcp --header "Authorization: Bearer $MANNICHE_PRO_KEY"Props
ChargeBorderProps
| Prop | Type | Default | What it does |
|---|---|---|---|
children | ReactNode | – | The content to wrap. The border takes the size of this content (or of the className size) and follows it when it resizes. |
className | string | – | Extra classes for the wrapper. Size, padding and background of the framed content go here. |
color | string | 'currentColor' | Colour of the crisp core line. Any CSS colour, including currentColor and var(--x). The core is drawn brighter than this colour. |
glowColor | string | – | Colour of the glow around the line. Defaults to color. |
chaos | number | 0.55 | How wild the crackle is, from 0 (a calm, wavy line) to 1 (violent, spiky). |
speed | number | 1 | How fast the line changes, 1 is a lively crackle. |
thickness | number | 1.5 | Width of the core line in CSS pixels. |
glow | number | 1 | How strong the glow is, from 0 (none) to 2 (a heavy bloom). |
radius | number | 16 | Corner radius of the frame in CSS pixels. It is also applied to the wrapper, so the content can be clipped to match. |
bleed | number | 28 | Extra room around the frame for the glow and the crackle to spill into, in CSS pixels. Costs nothing in layout. |
active | boolean | true | Turn the crackle on or off. It fades in and out and the loop sleeps while it is off, handy for "charge on hover". |
seed | number | 7 | Seed for the noise, so several borders next to each other do not crackle in unison. |
A11y
No accessibility notes written yet.
The notes come with the source when Pro opens.