Bough Study

A branching tree drawn on a 2D canvas in an ink ramp from the foreground up to the palette's primary, on the page ground. It grows from the trunk outwards, sways with layered wind, bends towards the pointer and shakes on click, then fades and grows a new one while motes drift around the canopy. It fills its positioned parent, re-reads the theme when the mode or palette changes, pauses when off screen and stays still when the user prefers reduced motion.

Installation

CLI

npx @modus-ui/cli add bough-study

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/bough-study.tsx.
3. Paste the code.

Usage

import { BoughStudy } from "@/components/ui/bough-study";

export default function Example() {
  return (
    <div className="relative h-[500px] w-full overflow-hidden">
      <BoughStudy />
    </div>
  );
}

Props