127 Components
Falling Petals
BackgroundsBotanical particle background rendering organic Bezier cherry blossom petals, autumn maple leaves, and golden ginkgo foliage with 3D pitch/roll/yaw flutter and shared wind gusts.
3D Projected Flutter
Falling Petals
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:lucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/falling-petals.json"
Props
TypeScript props supported by <FallingPetals />.
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "sakura" | "autumn" | "golden" | "sakura" | Selects the botanical shape and color palette preset. |
| count | number | 65 | Number of falling petals or leaves rendered simultaneously. |
| windSpeed | number | 1.0 | Multiplier for horizontal wind drift and rolling gusts. |
| fallSpeed | number | 1.0 | Multiplier for vertical downward descent speed. |
| flutter | number | 1.0 | Intensity of 3D rotational pitch/roll/yaw tumbling and horizontal sway. |
| children | React.ReactNode | — | Optional foreground content rendered above the petals canvas. |
| className | string | — | Additional Tailwind CSS classes for the root container. |
Key Features
- Hand-crafted Bezier geometries for notched Sakura petals, Autumn Maple leaves, and Golden Ginkgo fans
- 3D-projected pitch, roll, and yaw rotation using dynamic Canvas 2D matrix transforms
- Harmonic horizontal sway combined with global wind gusts and pointer breeze impulse
- Depth-of-field scaling and alpha layering for natural parallax depth
Keyboard & Accessibility
- Canvas element is non-interactive (pointer-events-none) so foreground content remains fully accessible
- HUD theme switchers and sliders support keyboard navigation