Sweep Arcs
backgroundProA twisting ribbon of glowing lines that drifts across the canvas and bends toward the pointer.
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
sweep-arcs.tsxPro
The code is locked
Sweep Arcs 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/sweep-arcsMCP
claude mcp add --transport http manniche-ui https://mikkelmanniche.dk/api/mcp --header "Authorization: Bearer $MANNICHE_PRO_KEY"Props
SweepArcsProps
| Prop | Type | Default | What it does |
|---|---|---|---|
lineCount | number | 44 | Number of lines in the sheet at full size. Containers narrower than about 900 px get fewer lines automatically. |
thickness | number | 1.3 | Core stroke width in CSS pixels. The glow is drawn around it. |
glow | number | 1 | Strength of the halo around every line, from 0 (crisp hairlines) to 2 (heavy bloom). |
colors | string[] | – | Line colours, blended along the sheet from the first line to the last. Any CSS colour, including var(--x). Defaults to the inherited text colour. |
background | string | – | Background behind the lines. Any CSS colour, including var(--x). Leave it out to keep the container's own background. |
speed | number | 1 | Pace of the sweep. 1 is a slow drift, 0 freezes the sheet (the pointer still bends it), 3 is brisk. |
pointerStrength | number | 1 | How far the arcs bend toward the pointer, from 0 (ignores it) to 2. |
fadeEdges | boolean | true | Fade the left and right ends of the sheet out, so the lines never run into the container's edge. |
children | ReactNode | – | Content drawn above the arcs. |
aria-label | string | – | Accessible name. Give it when the effect carries meaning: the drawing becomes role="img" with this name (children stay accessible). Without it the effect is treated as decoration. |
className | string | – | – |
A11y
No accessibility notes written yet.
The notes come with the source when Pro opens.