Ray Bloom
backgroundProGlowing streaks radiating from a focal point with a slow flower bloom that can follow the pointer.
Opening soon
Pro cannot be bought yet. The page opens when payment is ready.
Preview
The preview could not load.
Live demo. The theme switches the demo itself.
Code
ray-bloom.tsxPro
The code is locked
Ray Bloom is part of Manniche UI Pro. A key unlocks the source of all 60 effects.
Opening soon€49 · Introductory price until 31 December 2026. €79 after that.
- One-off payment
- One developer
- Your key arrives by email 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
CLI
npx shadcn@latest add @manniche-pro/ray-bloomMCP
claude mcp add --transport http manniche-ui https://mikkelmanniche.dk/api/mcp --header "Authorization: Bearer $MANNICHE_PRO_KEY"Props
RayBloomProps
| Prop | Type | Default | What it does |
|---|---|---|---|
spokes | number | 96 | Number of spokes the streaks travel along. More spokes make a denser burst. |
pulses | number | 5 | Streaks travelling along each spoke at the same time. |
speed | number | 1 | How fast the streaks travel outward. 1 is a calm drift, 3 is warp speed. |
twinkle | number | 1 | How fast the streaks shimmer. 0 turns the shimmer off. |
bloom | number | 1 | Strength of the soft flower at the core, 0 to 2. 0 hides it. |
size | number | 1 | Scales streak length, streak width and bloom radius. |
centerX | number | 0.5 | Horizontal position of the focal point, 0 (left) to 1 (right). Changes glide there instead of jumping. |
centerY | number | 0.5 | Vertical position of the focal point, 0 (top) to 1 (bottom). |
color | string | 'currentColor' | Colour of the streaks and the bloom. Any CSS colour, including var(--x); defaults to the inherited text colour. |
opacity | number | 1 | Overall opacity, 0 to 1. |
seed | number | 7 | Seed of the random pattern. The same seed gives the same burst on every load. |
followPointer | boolean | false | When true the focal point eases towards the pointer (mouse, pen or finger) while it is over the component. |
label | string | – | Accessible description. When set the canvas becomes role="img" with this label (children stay accessible); otherwise it is decorative. |
children | ReactNode | – | Content drawn on top of the burst. |
className | string | – | – |
A11y
No accessibility notes written yet.
The notes come with the source when Pro opens.