Logo Bloom
surfacesNyProEn stak værktøjsbrikker, der folder sig ud i en løs ring om en etiket, driver lidt og folder sig sammen igen. Kører i ring, ved hover eller én gang, når den kommer til syne.
Introduktionspris til og med 31. december 2026. Derefter 79 €.
Preview
Live demo. Temaet skifter selve demoen.
Kode
Koden er låst
Logo Bloom 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/logo-bloomclaude mcp add --transport http manniche-ui https://mikkelmanniche.dk/api/mcp --header "Authorization: Bearer $MANNICHE_PRO_KEY"Props
LogoBloomProps
| Prop | Type | Standard | Hvad den gør |
|---|---|---|---|
items påkrævet | LogoBloomItem[] | – | The tiles, first on top of the stack. Five to eight look best; each needs a label. |
label påkrævet | ReactNode | – | The text in the middle of the ring, shown while it is open, e.g. "Works with your tools". |
listLabel | string | 'Integrations' | The accessible name of the group and its list, e.g. "Integrations". Default "Integrations". |
trigger | LogoBloomTrigger | 'loop' | When the stack opens:
|
openFor | number | 3.8 | Seconds the ring stays open in loop. Default 3.8. |
closedFor | number | 1.6 | Seconds the stack stays folded in loop. Default 1.6. |
labels | { pause?: string; play?: string } | {} | The pause button's accessible name and tooltip in loop, with English defaults. |
className | string | – | Classes for the outer element. It is square; set its width here. Default up to 26rem. |
A11y
Tastatur
The group can take focus with Tab, and focus opens the ring and holds it open with a visible focus ring. In loop mode a Pause and Play button (36 pixels, with a 44 pixel hit area) follows in tab order and stops and starts the loop. Hover also holds the ring open.
Skærmlæser
A group named by listLabel holds the centre label as text and a list with one item per tile, each named by its label. The tile graphics are aria-hidden, and each tile also shows its label as a tooltip. The pause button’s name changes with its state.
Mindre bevægelse
Under reduced motion the ring is shown open and still, with no drift, no loop and no pause button. The loop and the drift stop while the element is off screen or the tab is hidden.