Ray Bloom
backgroundProGlødende striber, der stråler ud fra et midtpunkt, med en langsom blomsterudfoldning, som kan følge markøren.
Åbner snart
Pro kan ikke købes endnu. Siden åbner, når betalingen er klar.
Preview
Forhåndsvisningen kunne ikke hentes.
Live demo. Temaet skifter selve demoen.
Kode
ray-bloom.tsxPro
Koden er låst
Ray Bloom er en del af Manniche UI Pro. En nøgle åbner kildekoden til alle 60 effekter.
Åbner snart49 € · Introduktionspris til og med 31. december 2026. Derefter 79 €.
- Engangsbetaling
- Én udvikler
- Nøglen kommer på mail 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
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 | Standard | Hvad den gør |
|---|---|---|---|
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
Ingen a11y-noter skrevet endnu.
Noterne kommer sammen med kildekoden, når Pro åbner.