Logo Bloom
surfacesNewProA stack of tool tiles that blooms into a loose ring around a label, drifts a little and folds back. It runs on a loop, on hover or once in view.
Introductory price until 31 December 2026. €79 after that.
Preview
Live demo. The theme switches the demo itself.
Code
The code is locked
Logo Bloom is part of Manniche UI Pro. A key unlocks the source of all 66 effects.
Buy · €49€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
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 | Default | What it does |
|---|---|---|---|
items required | LogoBloomItem[] | – | The tiles, first on top of the stack. Five to eight look best; each needs a label. |
label required | 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
Keyboard
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.
Screen reader
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.
Reduced motion
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.