.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

A warp-speed starfield with streaks, glitter and turbulence that fills its container.

Opening soon

Pro cannot be bought yet. The page opens when payment is ready.

Width

The preview could not load.

Live demo. The theme switches the demo itself.

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)} />}

The code is locked

Star Tunnel 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

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	Type	Default	What it does
`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.

Preview

Code

The code is locked

Props

A11y