Specimen Desk

A fan of seven type specimen cards pinned at one corner on a desk, beside a closed notebook, a pencil and an ink pot. Each card is set in a Modus font and toned from the theme, from paper through the primary to ink. Drag sideways, use the arrow keys or click a card to bring it to the front of the fan; click it again (or press Enter) to lift it for a closer look. In light mode the desk sits in pale daylight on a paper-white mat; in dark mode a single lamp pools light over an oak desk. Colours follow the theme and palette live. It fills its positioned parent, pauses when off screen or when the tab is hidden and renders a still frame when the user prefers reduced motion.

Installation

CLI

npx @modus-ui/cli add specimen-desk

Manual

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

Usage

import { SpecimenDesk } from "@/components/ui/specimen-desk";

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

Props