Draft Folio

An open folio lying on the theme background, its photos washed to monochrome and its loupe, captions and paper drawn from the Modus tokens (--foreground, --primary, --card) so it follows light, dark and every palette. Drag a page and the leaf bends through a chain of 18 strips instead of pivoting flat, lit and shaded as it lifts. The book leans toward the cursor, zooms from the toolbar, riffles through every plate on first view, and carries a loupe you can pick up and drag across the paper. Each photo is washed onto a drawn spread, or pass your own spread artwork. It fills its positioned parent, waits until it is on screen to riffle, and skips the riffle, tilt and spring when the user prefers reduced motion.

Installation

CLI

npx @modus-ui/cli add draft-folio

Manual

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

Usage

import { DraftFolio } from "@/components/ui/draft-folio";

export default function Example() {
  return (
    <div className="relative h-[600px] w-full overflow-hidden">
      <DraftFolio
        pages={[
          {
            src: "https://images.unsplash.com/photo-1525625293386-3f8f99389edd?w=1400",
            title: "Marina Bay Sands",
            place: "Bayfront",
          },
          {
            src: "https://images.unsplash.com/photo-1600664356348-10686526af4f?w=1400",
            title: "The Merlion",
            place: "Merlion Park",
          },
        ]}
        startPage={0}
      />
    </div>
  );
}

Images must allow cross-origin use (Unsplash does) so they can be drawn onto the spread. Set spread: true on a page whose src is already a 1760×1240 transparent image of an open folio with the paper between 5.1–94.9% across and 21.8–78.2% down; it is used as-is.

Props