Library navigation
Other
Open in

Interactive physics-driven floral stems oscillating in a simulated wind field, featuring petal collision mechanics and shedding dynamics. Rendered directly through hardware-accelerated WebGPU WGSL fragment shaders with real-time binary glyph matrix sampling.

The breeze occasionally drops a random petal. Click any flower head to shed petals that flutter down to the ground. Each shed petal starts growing back automatically three seconds after it lands on the soil. Double-click to trigger a radial blooming animation and regrow missing petals. Drag flowers into each other to cause collisions and petal drops.

Installation

Add the binary-flower-garden component from Hangry UI to this project.


Use the project's package manager to run:
shadcn@latest add https://ui.razeev.com/r/binary-flower-garden.json


Integrate the component with the existing layout and styling.
Keep its interactions and reduced-motion support intact.

How to use

Import the component and optionally set the theme, wind speed, or custom classes. Set windSpeed from 0 (off) to 3× normal. Changing wind speed keeps growth and petal regrowth running at their normal pace.

import { BinaryFlowerGarden } from "@/hangry/shader/binary-flower-garden";


export default function BloomDemo() {
  return (
    <div className="w-full max-w-5xl mx-auto p-4">
      <BinaryFlowerGarden windSpeed={1} className="h-[32rem] w-full" />
    </div>
  );
}

Props

PropTypeDefaultDescription
windSpeednumber1Wind speed multiplier, from 0 (off) to 3. Respects reduced motion.
darkbooleantrueSets theme to dark mode (#141416) or light mode (#f5f5f7).
classNamestring-Additional CSS class names to apply to container.