.det .det-faner,.det .det-js-kun{display:none!important}.det .det-bar{padding:0;border:0}.det .det-panel[hidden]{display:block!important}.det .det-panel+.det-panel{margin-top:48px}.det .det-panel-h{position:static;width:auto;height:auto;margin:0 0 14px;overflow:visible;clip-path:none;white-space:normal}.det .det-win-inner{width:100%!important;height:100%!important;left:0;transform:none}.det .det-shutter{display:none}

Star Tunnel

backgroundPro

Ein Sternenfeld in Warp-Geschwindigkeit mit Streifen, Glitzern und Turbulenz, das seinen Container ausfüllt.

Bald verfügbar

Pro kann noch nicht gekauft werden. Die Seite öffnet, sobald die Zahlung bereit ist.

Breite

Die Vorschau konnte nicht geladen werden.

Live-Demo. Das Theme schaltet die Demo selbst um.

star-tunnel.tsxPro

'use client'import { useEffect, useRef } from 'react'import { cn } from '@/lib/utils'export type StarTunnelProps = {  count?: number  colors?: string[]  direction?: 'outward' | 'inward'  speed?: number  glitter?: number  trail?: number  turbulence?: number  focal?: number  starSize?: number  density?: number  x?: number  y?: number  blend?: 'auto' | 'additive' | 'normal'  children?: ReactNode  className?: string}export function StarTunnel({  count = 800,  colors,  direction = 'outward',  speed = 1,  glitter = 0.35,  trail = 0.5,  turbulence = 0.25,  focal = 1,  starSize = 1,  density = 1,  x = 0.5,  y = 0.5,  blend = 'auto',  children,  className,}: StarTunnelProps) {  const ref = useRef<HTMLDivElement>(null)  useEffect(() => {    const el = ref.current    if (!el) return  }, [])  return <div ref={ref} className={cn('relative', className)} />}

Der Code ist gesperrt

Star Tunnel gehört zu Manniche UI Pro. Ein Schlüssel öffnet den Quellcode aller 60 Effekte.

Bald verfügbar

49 € · 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

CLInpx shadcn@latest add @manniche-pro/star-tunnel

MCP

claude mcp add --transport http manniche-ui https://mikkelmanniche.dk/api/mcp --header "Authorization: Bearer $MANNICHE_PRO_KEY"

StarTunnelProps

Prop	Typ	Standard	Was sie tut
`count`	`number`	`800`	How many stars fly past. Capped at 2000 and scaled down on small containers.
`colors`	`string[]`	–	Star colours, up to 6, handed out at random (three is the sweet spot). Any CSS colour, including `var(--x)`, `currentColor` and `color-mix()`. The default is white, ice blue and warm gold mixed with the inherited text colour, so it reads on both light and dark pages.
`direction`	`'outward' \| 'inward'`	`'outward'`	`outward` flies forward, so stars rush out of the centre towards you. `inward` flies backwards, so they are drawn into the centre.
`speed`	`number`	`1`	Flight speed. 1 is a calm cruise, 3 is a jump to lightspeed, 0 freezes the field. Streaks grow with speed.
`glitter`	`number`	`0.35`	How often stars flash into a glittering four-point sparkle, from 0 (never) to 1 (constantly).
`trail`	`number`	`0.5`	Length of the motion streaks from 0 (round dots) to 1 (long light trails).
`turbulence`	`number`	`0.25`	A swaying wobble that grows as stars come close to the viewer, from 0 (dead straight) to 1 (heavy).
`focal`	`number`	`1`	Perspective strength, from 0.3 (a narrow, deep tunnel) to 2 (a wide, fast opening).
`starSize`	`number`	`1`	Multiplier for the size of the stars.
`density`	`number`	`1`	How widely stars are spread around the centre. Below 1 they huddle into a column, above 1 they fill the corners.
`x`	`number`	`0.5`	Horizontal position of the vanishing point inside the container, 0 (left) to 1 (right).
`y`	`number`	`0.5`	Vertical position of the vanishing point inside the container, 0 (top) to 1 (bottom).
`blend`	`'auto' \| 'additive' \| 'normal'`	`'auto'`	`additive` makes overlapping stars add up to a glow and suits dark backgrounds. `normal` paints plain coloured stars and suits light ones. `auto` picks by the brightness of the inherited text colour.
`aria-label`	`string`	–	Accessible name. When set, the canvas becomes an image for assistive technology; without it the effect is decorative and hidden.
`children`	`ReactNode`	–	Content drawn on top of the starfield.
`className`	`string`	–	Classes for the wrapper. Give it a size; it is `relative` and clips its canvas.

Vorschau

Code

Der Code ist gesperrt

Props

A11y

Screenreader

Reduzierte Bewegung