Signal Hub
backgroundNyProEn pille i midten med buede, hårtynde linjer ud til begge kanter og bløde lysimpulser, der løber ind i midten, ud af den eller begge veje. Står stille ved reduceret bevægelse.
Introduktionspris til og med 31. december 2026. Derefter 79 €.
Preview
Live demo. Temaet skifter selve demoen.
Kode
Koden er låst
Signal Hub er en del af Manniche UI Pro. En nøgle åbner kildekoden til alle 66 effekter.
Køb · 49 €49 € · Introduktionspris til og med 31. december 2026. Derefter 79 €.
- Engangsbetaling
- Én udvikler
- Log ind og opret din nøgle 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
npx shadcn@latest add @manniche-pro/signal-hubclaude mcp add --transport http manniche-ui https://mikkelmanniche.dk/api/mcp --header "Authorization: Bearer $MANNICHE_PRO_KEY"Props
SignalHubProps
| Prop | Type | Standard | Hvad den gør |
|---|---|---|---|
children påkrævet | 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. |
Tager også alle props fra Omit<HTMLAttributes<HTMLDivElement>, 'children'>.
A11y
Skærmlæser
The hub is plain content in the page, so its text is read as normal. The lines and pulses are one aria-hidden SVG.
Mindre bevægelse
Under reduced motion the lines are drawn still, with no pulses and a faint steady glow on the hub. The pulses stop while the element is off screen or the tab is hidden, and the paused prop stops them at any time.
Andet
It is decorative and has no button of its own. If it sits next to content people need to read for more than five seconds, give them a way to stop it through paused (WCAG 2.2.2).