← All components
Interaction / effect
Generation Bloom
A warm halo, expanding ring and ten engraved sparks celebrate something new.
PLAYGROUND
Take it with you.
SOURCE ACCESS
Preview freely. Unlock the files.
Enter the shared password to copy the complete source, download every file, and install components in your app.
Access lasts 24 hours. Your preview settings stay with you.
Component notes
- Wrap your card or other content inside GenerationBloom. Only the decorative particles disappear; your content remains.
- All ten original star positions, sizes and paths, the warm halo, ring and original cubic easing are retained.
- The complete halo lasts1700ms by default, repairing the original early1400ms removal. Changing duration scales the complete timeline.
- Decorative layers ignore pointer input and are hidden from assistive technology. Reduced motion omits the burst. Pause, offscreen handling and Replay use one owned clock.
- The included Demo.tsx and styles recreate the complete preview.
React 19Framer Motion 12.42.2
Chungus UI · Project-authorized component and adaptation. Public distribution terms pending release.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
duration | number | 1700 | Duration |
palette | warm|silver | warm | Palette |
distance | number | 1 | Spark distance |
children | ReactNode | undefined | Wrap a card or artifact to fit the effect around it. Without children, a440×220px empty frame is provided. |
style | CSSProperties | undefined | Styles for the containing wrapper. |
onComplete | () => void | undefined | Called once when the full effect ends; reduced motion skips the decorative effect. |
className | string | '' | Additional root classes. |
paused | boolean | false | Freeze animation and pending local playback. |
replayToken | number | 0 | Change this value to restart. |