.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

Eine interaktive Kugel aus Tausenden Partikeln, die sich mit dem Mauszeiger oder den Pfeiltasten drehen, anstoßen und verstreuen lässt.

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.

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

Der Code ist gesperrt

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

MCP

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

SparkSphereProps

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

Vorschau

Code

Der Code ist gesperrt

Props

A11y