Slab Tunnel
image-galleryProEn førstepersons WebGL-tunnel af billed- og farveplader, der evigt suser mod én. Tryk og hold for at sætte farten op, med en pille-etiket, der følger markøren.
Åbner snart
Pro kan ikke købes endnu. Siden åbner, når betalingen er klar.
Preview
Forhåndsvisningen kunne ikke hentes.
Live demo. Temaet skifter selve demoen.
Kode
slab-tunnel.tsxPro
Koden er låst
Slab Tunnel er en del af Manniche UI Pro. En nøgle åbner kildekoden til alle 60 effekter.
Åbner snart49 € · Introduktionspris til og med 31. december 2026. Derefter 79 €.
- Engangsbetaling
- Én udvikler
- Nøglen kommer på mail med det samme
- Ingen moms (§ 19 UStG)
Har du en nøgle? Hent koden med CLI eller MCP.
Nøglen ligger i MANNICHE_PRO_KEY, aldrig i koden eller i adressen. Sådan sætter du den op
CLI
npx shadcn@latest add @manniche-pro/slab-tunnelMCP
claude mcp add --transport http manniche-ui https://mikkelmanniche.dk/api/mcp --header "Authorization: Bearer $MANNICHE_PRO_KEY"Props
SlabTunnelProps
| Prop | Type | Standard | Hvad den gør |
|---|---|---|---|
images | SlabTunnelImage[] | – | Pictures that appear on some slabs. Only the first 16 are used. Without any, the tunnel is solid colour slabs. |
colors | string[] | DEFAULT_COLORS | Colours of the solid slabs (and the tint under a picture while it loads). Any CSS colours. |
background | string | 'var(--background, #0b0b0d)' | Colour the tunnel fades into with distance. Any CSS colour; the default follows the page background. |
gridColor | string | 'currentColor' | Colour of the empty cells, which hint at the grid. Defaults to the page foreground, used very faintly. |
density | number | 4 | Slabs across one wall, 2 to 12. More slabs are smaller and the ride feels faster. |
fill | number | 0.55 | 0 to 1: share of cells that hold a slab. The rest stay empty. |
imageShare | number | 0.5 | 0 to 1: share of slabs that carry a picture (when there are pictures). |
speed | number | 3 | Cruising speed in slabs per second. |
boost | number | 4.5 | Speed multiplier while the pointer or Space is held. The speed eases towards it. |
fade | number | 0.6 | 0 to 1: how early the depth fade starts. Higher fades the far end sooner. |
seed | number | 7 | Changes which slabs show up. The same seed gives the same tunnel. |
label | string | false | 'Hold to speed up' | Text in the pill that follows the cursor. Pass false for no pill. |
pressedLabel | string | – | Text in the pill while pressed. Defaults to label. |
keyboard | boolean | true | Lets Space and Enter boost while the tunnel has keyboard focus. |
ariaLabel | string | 'A tunnel of picture and colour slabs rushing towards you. Hold to speed up.' | Accessible name for the tunnel. |
className | string | – | Size it with this (it fills its parent: absolute inset-0, h-full, a fixed height...). |
style | CSSProperties | – | – |
A11y
Ingen a11y-noter skrevet endnu.
Noterne kommer sammen med kildekoden, når Pro åbner.