.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

Ein GPU-Partikeltornado mit Sanduhr-Trichter, leuchtenden Strängen, Punkten und Kometen, federnden Wellen und einem abstoßenden Feld um den Mauszeiger.

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.

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

Der Code ist gesperrt

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

MCP

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

VortexFunnelProps

Prop	Typ	Standard	Was sie tut
`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`	–	–

Vorschau

Code

Der Code ist gesperrt

Props

A11y