.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

Billeder, der strømmer langs en indadgående spiral med lige afstand, drejer med tangenten, skrumper mod midten og toner ud i begge ender. Hastighed, omgange og spredning kan vendes, og hover sætter på pause.

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

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

Koden er låst

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

MCP

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

SpiralDriftProps

Prop	Type	Standard	Hvad den gør
`items` påkrævet	`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`	–	–

Preview

Kode

Koden er låst

Props

A11y