Signal Hub

backgroundNewPro

A pill in the middle with curved hairlines running out to both edges, and soft light pulses that travel along them into the hub, out of it or both. Still under reduced motion.

Buy · €49

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

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

Width

The preview could not load.

Live demo. The theme switches the demo itself.

signal-hub.tsxPro

'use client'import { useEffect, useRef } from 'react'import { cn } from '@/lib/utils'export type SignalHubProps = {  children: ReactNode  lines?: number  direction?: SignalHubDirection  speed?: number  color?: string  paused?: boolean  hubClassName?: string  className?: string}export function SignalHub({  children,  lines = 4,  direction = 'in',  speed = 1,  color = 'var(--primary)',  paused = false,  hubClassName,  className,}: SignalHubProps) {  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

Signal Hub is part of Manniche UI Pro. A key unlocks the source of all 66 effects.

Buy · €49

Have you bought it?Sign in to see the code

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

One-off payment
One developer
Sign in and create your key 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/signal-hub

MCP

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

SignalHubProps

Prop	Type	Default	What it does
`children` required	`ReactNode`	–	What sits in the hub, such as a product name or a logo and a name. Stays readable text.
`lines`	`number`	`4`	How many lines run out from each side of the hub. Default 4; halved (at most 2) below 480 px wide.
`direction`	`SignalHubDirection`	`'in'`	"in" sends pulses to the hub, "out" sends them from the hub to the edges, "both" sends a wave in and one back out. Default "in".
`speed`	`number`	`1`	Speed of the pulses; 1 is one wave every 3 seconds, 2 is twice as fast. Default 1.
`color`	`string`	`'var(--primary)'`	The colour of the pulses and the hub's glow, as any CSS colour. Default the theme's `--primary`.
`paused`	`boolean`	`false`	Stops the pulses where they are. They also stop by themselves off screen and while the tab is hidden.
`hubClassName`	`string`	–	Classes for the hub pill.
`className`	`string`	–	Classes for the outer element. Set its height here; default 16rem, 20rem from `sm`.

Also takes every prop from Omit<HTMLAttributes<HTMLDivElement>, 'children'>.

Preview

Code

The code is locked

Props

A11y

Screen reader

Reduced motion

Other