Spiral Drift
image-galleryProPictures stream along an inward spiral with equal spacing, turning to the tangent, shrinking toward the centre and fading at both ends. Reversible speed, turns, spread and pause on hover.
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
spiral-drift.tsxPro
The code is locked
Spiral Drift 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/spiral-driftMCP
claude mcp add --transport http manniche-ui https://mikkelmanniche.dk/api/mcp --header "Authorization: Bearer $MANNICHE_PRO_KEY"Props
SpiralDriftProps
| Prop | Type | Default | What it does |
|---|---|---|---|
items required | SpiralDriftItem[] | – | Pictures that ride the spiral. They are repeated in order to fill every slot of the spiral. |
turns | number | 2.4 | How many times the spiral winds around the centre between the edge and the middle. |
spread | number | 1 | How far out the spiral starts, as a share of the container's half-diagonal. 1 starts at the corners, lower pulls it in, higher lets cards enter from beyond the edges. |
speed | number | 0.7 | Travel speed in cards per second past a fixed point on the path. 0 stops it, negative values reverse the flow (cards climb out of the centre). |
size | number | 175 | Edge length of a card at the outer end of the spiral, in CSS pixels. Cards shrink toward the centre and the size also scales down a little on small containers. |
radius | number | 18 | Corner radius of the cards in CSS pixels. |
count | number | 44 | How many cards share the spiral. Fewer are used on small containers. |
pauseOnHover | boolean | true | Slow the flow to a stop while the pointer rests on it (and while a finger is down), and ease back after. Also pauses while focus is inside. |
direction | 'clockwise' | 'counterclockwise' | 'clockwise' | Spiral direction on screen. |
aria-label | string | – | Accessible name for the picture stream. Leave empty when it is only decoration. |
children | ReactNode | – | Content drawn above the spiral. It does not receive pointer events by default; enable pointer-events-auto on anything clickable. |
className | string | – | – |
A11y
No accessibility notes written yet.
The notes come with the source when Pro opens.