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

Spiral Drift

image-galleryPro

Bilder, die mit gleichem Abstand auf einer nach innen führenden Spirale strömen, sich zur Tangente drehen, zur Mitte hin schrumpfen und an beiden Enden ausblenden. Umkehrbare Geschwindigkeit, Windungen und Streuung, Pause beim Hover.

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.

spiral-drift.tsxPro

'use client'import { useEffect, useRef } from 'react'import { cn } from '@/lib/utils'export type SpiralDriftProps = {  items: SpiralDriftItem[]  turns?: number  spread?: number  speed?: number  size?: number  radius?: number  count?: number  pauseOnHover?: boolean  direction?: 'clockwise' | 'counterclockwise'  children?: ReactNode  className?: string}export function SpiralDrift({  items,  turns = 2.4,  spread = 1,  speed = 0.7,  size = 175,  radius = 18,  count = 44,  pauseOnHover = true,  direction = 'clockwise',  children,  className,}: SpiralDriftProps) {  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

Spiral Drift 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/spiral-drift

MCP

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

SpiralDriftProps

Prop	Typ	Standard	Was sie tut
`items` erforderlich	`SpiralDriftItem[]`	–	Pictures that ride the spiral. They are repeated in order to fill every slot of the spiral.
`turns`	`number`	`2.4`	How many times the spiral winds around the centre between the edge and the middle.
`spread`	`number`	`1`	How far out the spiral starts, as a share of the container's half-diagonal. 1 starts at the corners, lower pulls it in, higher lets cards enter from beyond the edges.
`speed`	`number`	`0.7`	Travel speed in cards per second past a fixed point on the path. 0 stops it, negative values reverse the flow (cards climb out of the centre).
`size`	`number`	`175`	Edge length of a card at the outer end of the spiral, in CSS pixels. Cards shrink toward the centre and the size also scales down a little on small containers.
`radius`	`number`	`18`	Corner radius of the cards in CSS pixels.
`count`	`number`	`44`	How many cards share the spiral. Fewer are used on small containers.
`pauseOnHover`	`boolean`	`true`	Slow the flow to a stop while the pointer rests on it (and while a finger is down), and ease back after. Also pauses while focus is inside.
`direction`	`'clockwise' \| 'counterclockwise'`	`'clockwise'`	Spiral direction on screen.
`aria-label`	`string`	–	Accessible name for the picture stream. Leave empty when it is only decoration.
`children`	`ReactNode`	–	Content drawn above the spiral. It does not receive pointer events by default; enable `pointer-events-auto` on anything clickable.
`className`	`string`	–	–

Vorschau

Code

Der Code ist gesperrt

Props

A11y