.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

Eine Drahtgitterkugel mit Silhouettenglühen, einem Polverlauf mit mehreren Stopps, Ausbeulung am Mauszeiger, stoffartigen Randwellen und Drehung per Ziehen oder Tastatur.

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.

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

Der Code ist gesperrt

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

MCP

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

HaloWireProps

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

Vorschau

Code

Der Code ist gesperrt

Props

A11y