.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

An interactive sphere of thousands of particles you can spin, push and scatter with the pointer or the arrow keys.

Opening soon

Pro cannot be bought yet. The page opens when payment is ready.

Width

The preview could not load.

Live demo. The theme switches the demo itself.

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

The code is locked

Spark Sphere is part of Manniche UI Pro. A key unlocks the source of all 60 effects.

Opening soon

€49 · Introductory price until 31 December 2026. €79 after that.

One-off payment
One developer
Your key arrives by email straight away
No VAT (§ 19 UStG)

Have a key? Get the code with the CLI or MCP.

The key lives in MANNICHE_PRO_KEY, never in your code or a URL. How to set it up

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	Default	What it does
`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

Code

The code is locked

Props

A11y