81 Pro components and page blocks

Get Pro
uibrik

Crowd Bloom

Pro

Preview

Customize

Bloom
Duration1.0s
Bounce0.25
Swirl1.00turns
Stagger0.35s
Drift1.00
Magnify0.35

Installation

Pro

Crowd Bloom is a Pro component

Sign in to see the source, or install it with a license key. The live preview and props above are free to explore.

Sign inGet Pro

Install with a key

  1. Add the Pro registry to components.json:
    components.json
    {
  "registries": {
    "@uibrik-pro": {
      "url": "https://uibrik.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${UIBRIK_LICENSE}" }
    }
  }
}
  2. Put your key in .env.local and add that file to .gitignore:
    .env.local
    UIBRIK_LICENSE=your-license-key
  3. Install it:
    Terminal
    npx shadcn@latest add @uibrik-pro/crowd-bloom

Usage

import { CrowdBloom } from "@/components/uibrik/crowd-bloom/crowd-bloom";​<CrowdBloom  layout="bloom"  duration={1}  bounce={0.25}  swirl={1}  stagger={0.35}  drift={1}  magnify={0.35}  toolbar={false}  defaultLayout="bloom"  defaultSelected={null}  label="Layout"  onLayoutChange={(layout) => {}}  // items={[{ id: "…", src: "…", name: "…" }]}  // selected="…"  // onSelectedChange={(id) => {}}/>

Props

CrowdBloom
layout
Type "bloom" | "spiral" | "honeycomb"
"bloom"
How the faces are arranged. Changing it plays the whirlpool.
duration
Type number
1
Rough time for a face to reach its new place.
bounce
Type number
0.25
Springiness on arrival. 0 settles without overshoot.
swirl
Type number
1
Extra turns the crowd spins on the way to a new layout.
stagger
Type number
0.35
Delay between the first face and the last setting off, rippling out from the click.
drift
Type number
1
Speed the rings drift at rest. 0 holds them still.
magnify
Type number
0.35
How much faces under the mouse swell. 0 turns it off.
toolbar
Type boolean
false
Show a switcher above the faces for picking the layout.
items
Type { id: string; src: string; name: string }[]
SAMPLE_ITEMS
Faces in order. The first sits in the middle of the bloom.
defaultLayout
Type "bloom" | "spiral" | "honeycomb"
"bloom"
Layout to begin with when layout is left uncontrolled.
onLayoutChange
Type (layout) => void
–
Called when the switcher picks a layout.
selected / onSelectedChange
Type string | null / (id) => void
–
Controlled id of the face in the middle. Escape or a second click clears it.
defaultSelected
Type string | null
null
Face in the middle to begin with.
label
Type string
"Layout"
Names the layout switcher for screen readers.
className
Type string
–
Classes for the wrapper.