.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}

Vortex Funnel

backgroundPro

A GPU particle tornado with an hourglass funnel, glowing strands, dots and comets, sprung ripples and a pointer repel field.

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.

vortex-funnel.tsxPro

'use client'import { useEffect, useRef } from 'react'import { cn } from '@/lib/utils'export type VortexFunnelProps = {  strands?: boolean  dots?: boolean  comets?: boolean  ripples?: boolean  topRadius?: number  waistRadius?: number  bottomRadius?: number  waistPosition?: number  twist?: number  zoom?: number  speed?: number  direction?: 1 | -1  repel?: number  tilt?: number  intensity?: number  density?: number  colors?: string[]  accent?: string  blend?: 'auto' | 'glow' | 'ink'  label?: string  children?: ReactNode  style?: CSSProperties  className?: string}export function VortexFunnel({  strands = true,  dots = true,  comets = true,  ripples = true,  topRadius = 1.7,  waistRadius = 0.3,  bottomRadius = 0.62,  waistPosition = 0.28,  twist = 1,  zoom = 1,  speed = 1,  direction = 1,  repel = 1,  tilt = 0.2,  intensity = 1,  density = 1,  colors,  accent = '#ff9d4a',  blend = 'auto',  label,  children,  style,  className,}: VortexFunnelProps) {  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

Vortex Funnel 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/vortex-funnel

MCP

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

VortexFunnelProps

Prop	Type	Default	What it does
`strands`	`boolean`	`true`	Draw the spiral strands: the thin glowing wires that wind up the funnel.
`dots`	`boolean`	`true`	Draw the flickering dots drifting inside the funnel.
`comets`	`boolean`	`true`	Draw the comets that race down the funnel and out across the floor.
`ripples`	`boolean`	`true`	Let a comet that meets a dot set off a sprung shockwave that ripples through the funnel. Needs `comets` and `dots`.
`topRadius`	`number`	`1.7`	Radius at the open top, in world units. The top runs past the edge of the frame, so this sets how wide it flares.
`waistRadius`	`number`	`0.3`	Radius at the narrowest point.
`bottomRadius`	`number`	`0.62`	Radius where the funnel meets the floor.
`waistPosition`	`number`	`0.28`	Where the waist sits between the floor (0) and the top (1).
`twist`	`number`	`1`	How tightly the strands wind around the funnel. 0 is straight, 1 is a calm spiral, 2 is a wrung cloth.
`zoom`	`number`	`1`	Camera zoom. 1 shows the waist and floor with the top cropped; below 1 pulls back.
`speed`	`number`	`1`	Time scale of everything: rotation, comets, flicker. 0 freezes the form.
`direction`	`1 \| -1`	`1`	Which way it spins: 1 or -1. Changing it eases the comets round; the strands reverse at once.
`repel`	`number`	`1`	How strongly the pointer pushes the funnel away, 0 to 2. 0 turns it off.
`tilt`	`number`	`0.2`	Camera pitch in radians. 0 looks level, larger looks down onto the floor.
`intensity`	`number`	`1`	Brightness of every layer, 0 to 2.
`density`	`number`	`1`	How many strands and dots to draw, 0.1 to 1.5. Small containers get fewer automatically.
`colors`	`string[]`	–	Colours from the floor to the top, 1 to 4 stops. Any CSS colour, including `var(--x)` and `currentColor`. Defaults to the text colour.
`accent`	`string`	`'#ff9d4a'`	Colour of the comets. Any CSS colour.
`blend`	`'auto' \| 'glow' \| 'ink'`	`'auto'`	How layers combine. `glow` adds light, for dark backgrounds. `ink` paints over, so a dark colour shows on a light page. `auto` picks `glow` when the first colour is light and `ink` when it is dark, so the default follows the theme.
`label`	`string`	–	Accessible name. When set, the funnel layer behind the content becomes `role="img"` (children stay reachable); leave it out when the funnel is only decoration.
`children`	`ReactNode`	–	Content drawn on top of the funnel, e.g. a headline. The pointer still reaches the funnel through it.
`className`	`string`	–	–
`style`	`CSSProperties`	–	–

Preview

Code

The code is locked

Props

A11y