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

Spark Sphere

interactivePro

En interaktiv kugle af tusindvis af partikler, som man kan dreje, skubbe og sprede med markøren eller piletasterne.

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

spark-sphere.tsxPro

'use client'import { useEffect, useRef } from 'react'import { cn } from '@/lib/utils'export type SparkSphereProps = {  count?: number  color?: string  opacity?: number  particleSize?: number  blend?: 'auto' | 'additive' | 'normal'  scale?: number  x?: number  y?: number  direction?: 'cw' | 'ccw'  speed?: number  pauseOnHover?: boolean  tilt?: number  draggable?: boolean  touchDrag?: 'horizontal' | 'free'  repelRadius?: number  repelStrength?: number  burstForce?: number  children?: ReactNode  className?: string}export function SparkSphere({  count = 5500,  color = 'currentColor',  opacity = 0.95,  particleSize = 1,  blend = 'auto',  scale = 0.82,  x = 0.5,  y = 0.5,  direction = 'cw',  speed = 1,  pauseOnHover = false,  tilt = 16,  draggable = true,  touchDrag = 'horizontal',  repelRadius = 0.3,  repelStrength = 1,  burstForce = 1,  children,  className,}: SparkSphereProps) {  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

Spark Sphere 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/spark-sphere

MCP

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

SparkSphereProps

Prop	Type	Standard	Hvad den gør
`count`	`number`	`5500`	How many particles make up the sphere. Evenly spread (Fibonacci lattice). Capped at 12000 and scaled down on small containers.
`color`	`string`	`'currentColor'`	Particle colour. Any CSS colour, including `var(--x)`; defaults to the inherited text colour, so it follows light and dark mode.
`opacity`	`number`	`0.95`	Overall opacity of the particles, from 0 to 1.
`particleSize`	`number`	`1`	Multiplier for the size of each particle.
`blend`	`'auto' \| 'additive' \| 'normal'`	`'auto'`	`additive` makes overlapping particles add up to a glow and suits dark backgrounds. `normal` paints plain dots and suits light ones. `auto` picks by the brightness of the inherited text colour.
`scale`	`number`	`0.82`	Diameter of the sphere as a fraction of the container's shorter side.
`x`	`number`	`0.5`	Horizontal position of the sphere's centre inside the container, 0 (left) to 1 (right).
`y`	`number`	`0.5`	Vertical position of the sphere's centre inside the container, 0 (top) to 1 (bottom).
`direction`	`'cw' \| 'ccw'`	`'cw'`	Direction of the automatic spin, seen from above: `cw` moves the near side to the left, `ccw` to the right.
`speed`	`number`	`1`	Speed of the automatic spin. 1 is one turn in about 18 seconds, 0 stops it.
`pauseOnHover`	`boolean`	`false`	Ease the automatic spin to a stop while the mouse is over the sphere.
`tilt`	`number`	`16`	Starting tilt in degrees, so the poles are not pointing straight sideways.
`draggable`	`boolean`	`true`	Let the visitor spin the sphere by dragging (with throw momentum) or with the arrow keys when it has focus.
`touchDrag`	`'horizontal' \| 'free'`	`'horizontal'`	Which touch gestures spin the sphere. `horizontal` leaves vertical swipes to page scroll (`touch-action: pan-y`), so the sphere never traps a scrolling finger. `free` takes over every touch gesture on the sphere (`touch-action: none`) so it can also be turned up and down; the page cannot scroll from a finger on it.
`repelRadius`	`number`	`0.3`	Radius of the zone around the pointer that pushes particles away, as a fraction of the sphere radius. 0 turns it off.
`repelStrength`	`number`	`1`	How far pushed particles travel. 1 is a clear dent around the pointer.
`burstForce`	`number`	`1`	How violently a click or tap scatters the particles near it. 0 turns bursts off.
`aria-label`	`string`	`'Sphere of glowing particles. Drag or use the arrow keys to turn it.'`	Accessible name for the sphere, which is focusable when `draggable` is on.
`children`	`ReactNode`	–	Content drawn on top of the sphere. Give it `pointer-events-none` if it should not catch clicks.
`className`	`string`	–	Classes for the wrapper. Give it a size; it is `relative` and clips its canvas.

Preview

Kode

Koden er låst

Props

A11y