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

Event Horizon

backgroundPro

A tilted disc of glowing particles spiralling into a black hole, depth-sorted in 3D with adjustable tilt, inflow and trails.

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.

event-horizon.tsxPro

'use client'import { useEffect, useRef } from 'react'import { cn } from '@/lib/utils'export type EventHorizonProps = {  colors?: string[]  count?: number  orbitRadius?: number  coreRadius?: number  x?: number  y?: number  tilt?: number  sideTilt?: number  trail?: number  speed?: number  inflow?: number  particleSize?: number  showCore?: boolean  glow?: number  blend?: 'auto' | 'additive' | 'normal'  children?: ReactNode  className?: string}export function EventHorizon({  colors,  count = 650,  orbitRadius = 1,  coreRadius = 0.1,  x = 0.5,  y = 0.5,  tilt = 64,  sideTilt = -14,  trail = 0.55,  speed = 1,  inflow = 0.35,  particleSize = 1,  showCore = true,  glow = 0.8,  blend = 'auto',  children,  className,}: EventHorizonProps) {  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

Event Horizon 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/event-horizon

MCP

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

EventHorizonProps

Prop	Type	Default	What it does
`colors`	`string[]`	–	Particle colours, up to 10, assigned at random. Any CSS colour, including `var(--x)`, `currentColor` and `color-mix()`. The default is a warm amber, rose and ice-blue trio that mixes with the inherited text colour, so it reads on both light and dark pages.
`count`	`number`	`650`	How many particles orbit. 650 gives distinct dashes with dark gaps between them; 1500 or more is a dense, glowing disc. Scaled down on small containers and capped at 6000.
`orbitRadius`	`number`	`1`	Size of the disc as a multiple of the default, which fills a wide hero stage. 0.3 to 1.4 is a useful range.
`coreRadius`	`number`	`0.1`	Radius of the dark core as a fraction of the orbit radius, from 0.03 to 0.45.
`x`	`number`	`0.5`	Horizontal position of the black hole inside the container, 0 (left) to 1 (right).
`y`	`number`	`0.5`	Vertical position of the black hole inside the container, 0 (top) to 1 (bottom).
`tilt`	`number`	`64`	How far the disc leans back, in degrees. 0 looks straight down onto it, 90 sees it edge-on.
`sideTilt`	`number`	`-14`	Rolls the whole disc around the line of sight, in degrees, so it can lean left or right.
`trail`	`number`	`0.55`	Length of the motion trails from 0 (bare dots) to 1 (long comet arcs).
`speed`	`number`	`1`	Orbit speed. 1 is a slow, heavy swirl, 0 freezes the disc.
`inflow`	`number`	`0.35`	How strongly gravity pulls particles inwards, from 0 (stable orbits) to 1 (a fast spiral into the core). Fallen particles re-appear at the rim.
`particleSize`	`number`	`1`	Multiplier for the particle size.
`showCore`	`boolean`	`true`	Show the dark core with its glowing rim. Turn it off to see the bare disc, with nothing hidden behind the middle.
`glow`	`number`	`0.8`	Brightness of the glowing rim and halo around the core, from 0 to 1.
`blend`	`'auto' \| 'additive' \| 'normal'`	`'auto'`	`additive` makes overlapping particles add up to a glow and suits dark backgrounds. `normal` paints plain coloured dots and suits light ones. `auto` picks by the brightness of the inherited text colour.
`aria-label`	`string`	–	Accessible name. When set, the canvas becomes an image for assistive technology; without it the effect is decorative and hidden.
`children`	`ReactNode`	–	Content drawn on top of the black hole.
`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