Autumn Drift
A gnarled tree on a rocky outcrop in full fall color, swaying in wind and shedding leaves — the cursor is a gust that scatters them.
Installation
▸ Run the following command
npx shadcn@latest add https://www.mellowui.com/r/autumn-drift.json▸ Or install manually
- Copy the source from the Code tab above.
- Place it at
components/mellow/autumn-drift.tsx - Import and use.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| leafCount | number | 90 | Number of falling leaves. |
| wind | number | 0.5 | Wind strength 0–1: sway amplitude and horizontal drift. |
| treeAlign | "left" | "center" | "right" | "left" | Horizontal anchor of the tree. |
| leafColors | string[] | — | Fall foliage palette, as "r, g, b" triples. Defaults to pumpkin/brick/gold/maroon/amber. |
| 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. Defaults to the hosted gnarled tree; pass "" for the procedural tree. |
| foliageAnchors | FoliageAnchor[] | — | Foliage positions over the image, as fractions of the drawn image box. |
| className | string | — | Additional CSS classes. |
| children | ReactNode | — | Hero content rendered above the canvas. |