Drape Type

A sheet of italic serif letters hanging from five pegs on the page, faint strokes in the muted tone and dense folds in the palette's primary. Letters stretch and rotate with the weave; grab the sheet and pull. It fills its positioned parent, re-reads the theme when the mode or palette changes, pauses when off screen and renders a still frame when the user prefers reduced motion.

Installation

CLI

npx @modus-ui/cli add drape-type

Manual

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

Usage

import { DrapeType } from "@/components/ui/drape-type";

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

Props