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

Halo Wire

webglPro

A wireframe sphere with a silhouette glow, a multi-stop pole gradient, pointer swell, cloth-like rim waves and drag or keyboard rotation.

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.

halo-wire.tsxPro

'use client'import { useEffect, useRef } from 'react'import { cn } from '@/lib/utils'export type HaloWireProps = {  colors?: string[]  size?: number  detail?: number  spin?: number  waves?: number  waveSpeed?: number  swell?: number  intensity?: number  bloom?: number  interior?: number  blend?: 'auto' | 'glow' | 'ink'  interactive?: boolean  freeTouch?: boolean  label?: string  children?: ReactNode  style?: CSSProperties  className?: string}export function HaloWire({  colors,  size = 0.62,  detail = 1,  spin = 0.14,  waves = 1,  waveSpeed = 1,  swell = 1,  intensity = 1,  bloom = 1,  interior = 0.6,  blend = 'auto',  interactive = true,  freeTouch = false,  label,  children,  style,  className,}: HaloWireProps) {  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

Halo Wire 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/halo-wire

MCP

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

HaloWireProps

Prop	Type	Default	What it does
`colors`	`string[]`	–	Colours from the south pole to the north pole, 1 to 5 stops. Any CSS colour, including `var(--x)` and `currentColor`. Defaults to the text colour.
`size`	`number`	`0.62`	Diameter of the sphere as a fraction of the container's shorter side, 0.2 to 1.2.
`detail`	`number`	`1`	How fine the wire mesh is, 0.2 to 1.5. Small containers get a coarser mesh automatically.
`spin`	`number`	`0.14`	Idle spin around the vertical axis, in radians per second. 0 holds the sphere still until it is dragged.
`waves`	`number`	`1`	Strength of the two crossed sine waves that make the rim breathe like cloth, 0 to 2.
`waveSpeed`	`number`	`1`	Speed of those waves. 0 freezes them.
`swell`	`number`	`1`	How far the pointer swells the sphere outward, 0 to 2. 0 turns the swell off.
`intensity`	`number`	`1`	Brightness, 0 to 2.
`bloom`	`number`	`1`	Strength of the soft glow at both caps, 0 to 2.
`interior`	`number`	`0.6`	How much of the mesh shows through the middle, 0 to 1. 0 leaves only the glowing rim.
`blend`	`'auto' \| 'glow' \| 'ink'`	`'auto'`	How lines combine. `glow` adds light, for dark backgrounds. `ink` paints over, so a dark colour shows on a light page. `auto` picks `glow` when the first colour is light and `ink` when it is dark, so the default follows the theme.
`interactive`	`boolean`	`true`	Let the visitor orbit the sphere: drag with mouse or pen, or use the arrow keys once it has focus. When false it is only decoration.
`freeTouch`	`boolean`	`false`	With `interactive`, let a finger orbit in both axes. That sets `touch-action: none` on the whole surface, so the page cannot be scrolled with a finger placed on it. Off by default: a sideways swipe turns the sphere, and vertical swipes and pinch-zoom still reach the page.
`label`	`string`	–	Accessible name of the sphere. Defaults to a description that mentions the arrow keys when `interactive`.
`children`	`ReactNode`	–	Content drawn on top of the sphere. Clicks on links and buttons inside it never start a drag.
`className`	`string`	–	–
`style`	`CSSProperties`	–	–

Preview

Code

The code is locked

Props

A11y