Folio Opening

An opening spread set like a book page: a mono chapter label with a pulsing dot, a large serif headline (wrap a word in *asterisks* to set it in italic primary), a ruled lede, and a device illustration inked in the foreground colour over primary circuit dots on faint ruled lines. Everything is drawn from theme tokens, so it follows light and dark mode and the palette picker. Type scales with the section through container query units and the layout stacks in narrow containers. The float, drift and pulse stop when the user prefers reduced motion.

Installation

CLI

npx @modus-ui/cli add folio-opening

Manual

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

Usage

import { FolioOpening } from "@/components/ui/folio-opening";

export default function Example() {
  return (
    <div className="relative aspect-video w-full overflow-hidden">
      <FolioOpening title="Write it *once*." />
    </div>
  );
}

Props