.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

En skråtstillet skive af glødende partikler, der spiralerer ind i et sort hul, dybdesorteret i 3D med justerbar hældning, indstrømning og spor.

Åbner snart

Pro kan ikke købes endnu. Siden åbner, når betalingen er klar.

Bredde

Forhåndsvisningen kunne ikke hentes.

Live demo. Temaet skifter selve demoen.

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

Koden er låst

Event Horizon er en del af Manniche UI Pro. En nøgle åbner kildekoden til alle 60 effekter.

Åbner snart

49 € · Introduktionspris til og med 31. december 2026. Derefter 79 €.

Engangsbetaling
Én udvikler
Nøglen kommer på mail med det samme
Ingen moms (§ 19 UStG)

Har du en nøgle? Hent koden med CLI eller MCP.

Nøglen ligger i MANNICHE_PRO_KEY, aldrig i koden eller i adressen. Sådan sætter du den op

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	Standard	Hvad den gør
`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

Kode

Koden er låst

Props

A11y