Hero232: Growing Tree Hero

A split hero with a serif headline, an intro, an Arrow Pill and an underline link on the left, and the growing-tree component on the right: an ink botanical tree drawn on Canvas 2D that grows from a single point, opens blossoms at its tips, then sways while petals drift down.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/hero232?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/hero232?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/hero232.tsx plus the growing-tree component and the button23 and button2 buttons it uses.

Quick start

The installed file exports hero232Demo alongside the block: the exact props behind the preview above. Spread it to get a working hero in one line.

import { Hero232, hero232Demo } from "@/components/beste/block/hero232";

export default function Page() {
  return <Hero232 {...hero232Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Hero232 } from "@/components/beste/block/hero232";

export default function Page() {
  return (
    <Hero232
      eyebrow="Wren & Alder, a tea house in the old orchard"
      heading="Every cup begins with a tree."
      description="Single-garden teas from our own orchard, poured slowly in a timber pavilion among the blossoms."
      buttons={[
        { label: "Reserve a table", href: "/reserve" },
        { label: "Read the tea list", href: "/teas" },
      ]}
      tree={{
        seed: 7,
        duration: 8,
        branchColor: "var(--foreground)",
        blossomColor: "var(--primary)",
        paperColor: "var(--background)",
        regrow: 40,
      }}
    />
  );
}

Props

type ActionButton = {
  label: string;
  href: string;
};

Behavior notes

• Moving the cursor across the tree sends a gust through the branches, and with regrow set a new tree grows now and then.
• GrowingTree pauses through an IntersectionObserver and on hidden tabs, and shows the fully grown tree still under prefers-reduced-motion.
• Theme variables for branch, blossom and paper, as in the demo, keep the drawing in step with light and dark mode.
• The grid is 5 and 7 columns from md; the tree frame is 26rem tall on phones and min(40rem, 100svh - 78px - 8rem) from md.
• With reduced motion the copy and tree appear without their rise and fade.