Herbarium Study

A Three.js scene drawn like a botanical study: ferns unfurl stroke by stroke from three clumps on a plate of contour rings, seed heads open on tall stalks and seed fluff drifts across on the wind. It enters with a slow ink-bleed reveal and a calm orbiting camera that leans toward the pointer. Every line takes its colour from the theme — ink on paper in light mode, pale strokes under a dusk glow in dark mode — and follows palette changes live. It fills its positioned parent, pauses when off screen or when the tab is hidden, and renders a still, fully grown frame when the user prefers reduced motion.

Installation

CLI

npx @modus-ui/cli add herbarium-study

Manual

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

Usage

import { HerbariumStudy } from "@/components/ui/herbarium-study";

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

Props