.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

En GPU-partikeltornado med timeglastragt, glødende tråde, prikker og kometer, fjedrende bølger og et frastødende felt omkring markøren.

Åbner snart

Pro kan ikke købes endnu. Siden åbner, når betalingen er klar.

Bredde

Forhåndsvisningen kunne ikke hentes.

Live demo. Temaet skifter selve demoen.

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

Koden er låst

Vortex Funnel er en del af Manniche UI Pro. En nøgle åbner kildekoden til alle 60 effekter.

Åbner snart

49 € · Introduktionspris til og med 31. december 2026. Derefter 79 €.

Engangsbetaling
Én udvikler
Nøglen kommer på mail med det samme
Ingen moms (§ 19 UStG)

Har du en nøgle? Hent koden med CLI eller MCP.

Nøglen ligger i MANNICHE_PRO_KEY, aldrig i koden eller i adressen. Sådan sætter du den op

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	Standard	Hvad den gør
`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

Kode

Koden er låst

Props

A11y