Sakura Drift
A gnarled cherry blossom tree on a rocky outcrop, swaying in wind and shedding petals — the cursor is a gust that scatters them.
Installation
▸ Run the following command
npx shadcn@latest add https://www.mellowui.com/r/sakura-drift.json▸ Or install manually
- Copy the source from the Code tab above.
- Place it at
components/mellow/sakura-drift.tsx - Import and use.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| petalCount | number | 90 | Number of falling petals. |
| wind | number | 0.5 | Wind strength 0–1: sway amplitude and horizontal drift. |
| treeAlign | "left" | "center" | "right" | "left" | Horizontal anchor of the tree. |
| petalColor | string | — | Petal / blossom color. Defaults to a themed sakura pink. |
| branchColor | string | — | Branch color. Defaults to rgba(var(--ink-rgb), 0.75). |
| treeImage | string | "https://www.mellowui.com/trees/gnarled-tree.webp" | URL of a transparent image of a bare tree. Replaces the procedural tree. |
| blossomAnchors | BlossomAnchor[] | — | Blossom positions over the image, as fractions of the drawn image box. |
| children | React.ReactNode | — | Hero content rendered above the canvas. |
| className | string | — | Additional CSS classes. |