Growing Tree
A tree drawn like a fine ink botanical plate grows from a single point on Canvas 2D: a leader climbs while side shoots break away, twigs split and small blossoms open at the tips. Once grown it sways on springs in a passing breeze, every branch carrying the ones above it, and petals let go, tumble down and rest on the ground before they fade. A cursor moving across it sends a gust through the branches, and it can regrow a new tree now and then. Seed, complexity, growth time, colors, blossoms, petal fall, wind, sway and regrow are all props. Colors follow the theme, the petal count adapts to the device, it pauses offscreen and shows the grown tree still for reduced motion.
Usage
The import and the props worth knowing about, in one place.
import { GrowingTree } from "@/components/beste/component/growing-tree";
// As a layer behind content
<section className="relative min-h-[40rem]">
<GrowingTree className="absolute inset-0" />
<div className="relative">...</div>
</section>
<GrowingTree
className="min-h-[32rem]"
seed={21} // a different tree, always the same for this seed
complexity={0.8} // a fuller crown
duration={12} // seconds to grow
branchColor="var(--foreground)" // any CSS color, tokens included
blossomColor="#d9677a"
fall={0.7} // more petals drifting down
wind={0.3} // a calmer breeze
regrow={0} // keep this tree
/>Props
Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
seed | number | — | Seed for the tree's shape; the same seed always grows the same tree. |
complexity | number | — | How far the branching goes, 0 (a young sapling) to 1 (a full crown). |
duration | number | — | Seconds the tree takes to grow from a single point to full blossom. |
branchColor | string | — | Color of the branches. Any CSS color, tokens included. |
blossomColor | string | — | Color of the blossoms and falling petals. |
paperColor | string | — | Color of the ground the tree stands on. |
blossoms | number | — | How many tips open into blossoms, 0 to 1. |
fall | number | — | How often petals let go and drift down, 0 (never) to 1 (a steady fall). |
wind | number | — | Strength of the passing breeze, 0 to 1. |
sway | number | — | How far the thin branches bend, 0 (stiff) to 1 (supple). |
regrow | number | — | Seconds a finished tree stands before it fades and a new one grows; 0 keeps it. |
interactive | boolean | — | Moving the cursor across the tree sends a gust through the branches. |
paused | boolean | — | Freeze the tree where it is. |
className | string | — | |
children | ReactNode | — |
