Slab Tunnel
image-galleryProEin WebGL-Tunnel aus Bild- und Farbplatten in der Egoperspektive, der endlos auf einen zurast. Gedrückt halten für mehr Tempo, mit einem Pillen-Label, das dem Mauszeiger folgt.
Pro kann noch nicht gekauft werden. Die Seite öffnet, sobald die Zahlung bereit ist.
Vorschau
Live-Demo. Das Theme schaltet die Demo selbst um.
Code
Der Code ist gesperrt
Slab Tunnel gehört zu Manniche UI Pro. Ein Schlüssel öffnet den Quellcode aller 60 Effekte.
Bald verfügbar49 € · Einführungspreis bis einschließlich 31. Dezember 2026. Danach 79 €.
- Einmalzahlung
- Ein Entwickler
- Der Schlüssel kommt sofort per E-Mail
- Keine Umsatzsteuer (§ 19 UStG)
Hast du einen Schlüssel? Hol den Code mit der CLI oder per MCP.
Der Schlüssel liegt in MANNICHE_PRO_KEY, nie im Code oder in der Adresse. So richtest du ihn ein
npx shadcn@latest add @manniche-pro/slab-tunnelclaude mcp add --transport http manniche-ui https://mikkelmanniche.dk/api/mcp --header "Authorization: Bearer $MANNICHE_PRO_KEY"Props
SlabTunnelProps
| Prop | Typ | Standard | Was sie tut |
|---|---|---|---|
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
Tastatur
The root takes focus with Tab. Holding Space or Enter boosts the speed. The focus ring is visible. Set keyboard to false to take it out of tab order.
Screenreader
The tunnel is a decorative background. The root is a group with a default label and the pill label is aria-hidden. The images are not exposed, so put any meaningful text elsewhere.
Reduzierte Bewegung
Under reduced motion one calm frame is drawn. Without GPU support an aria-hidden SVG replaces the tunnel.