Folio Title

A numbered journal index on the page ground: mono caption, numerals in --primary, italic serif titles and pill-shaped meta tags, all drawn from the theme tokens so it follows light, dark and every palette. On mount each title decodes left to right, one after another. A short band of scrambled glyphs leads the reveal while a few characters further along flicker, then the title settles. Type scales with the container, the meta column drops away on narrow screens, and titles appear as-is when the user prefers reduced motion. The component fills its parent, so give it a sized container.

Installation

CLI

npx @modus-ui/cli add folio-title

Manual

1. Install framer-motion.
2. Copy the code from the component tab.
3. Create a file at components/ui/folio-title.tsx.
4. Paste the code.

Usage

import { FolioTitle } from "@/components/ui/folio-title";

export default function Example() {
  return (
    <div className="h-[420px] w-full">
      <FolioTitle
        entries={[
          { title: "A Grid Is a Promise You Keep", meta: "ESSAY · 6 MIN" },
          { title: "Tokens Before Pixels", meta: "WORKSHOP · 9 MIN" },
        ]}
      />
    </div>
  );
}

Props