Modus UI

Paper Mill

Web (React)

A list of cards you drag into a slot that cuts them into falling strips.

Built for discarding drafts with a little ceremony: the slot and strips take the foreground ink, and the cards are whatever you render. Reordering and keyboard delete are built in.

  • Draft 01

    Opening paragraph, take three

  • Memo

    Notes from Thursday's review

  • Draft 02

    A headline nobody liked

  • Sketch

    Margins, rules and a folio

Modus / Paper Mill

Installation

CLI

npx @modus-ui/cli add paper-mill

Manual

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

Usage

tsx
import { PaperMill } from "@/components/ui/paper-mill";

export default function Example() {
  return <PaperMill />;
}

Props

PropTypeDefaultDescription
itemsany[]-
renderItemany--
onShredany--
onReorderany--
widthnumber340-
heightnumber460-
insetnumber14-
gapnumber10-
slitHeightnumber4-
fallHeightnumber140-
feedSpeednumber180-
bitenumber18-
autoFeedbooleantrue-
stripWidthnumber10-
curlnumber1-
autoAnimatebooleanfalse-
loopbooleanfalse-
loopAfterDeletebooleanfalse-
dragTiltnumber6-
liftnumber1.02-
slitColorstring"hsl(var(--foreground))"-
colorstring"hsl(var(--foreground))"-
disabledbooleanfalse-

Comments

  • No comments yet.