Modus UI

Turn Leaf

Web (React)

A paper leaf you drag, click or key-press to turn over, with a soft tilt and sheen.

Turn Leaf presents two faces, recto and verso, on a bordered card-coloured sheet. It tilts toward the pointer, turns with spring physics when dragged or pressed, and fades instead of rotating under reduced motion.

Folio 12 / Recto

The quiet page

Drag or press to turn
Folio 12 / Verso

Every leaf has two faces. Turn it back when you have read this one.

Modus / Turn Leaf

Installation

CLI

npx @modus-ui/cli add turn-leaf

Manual

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

Usage

tsx
import { TurnLeaf } from "@/components/ui/turn-leaf";

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

Props

PropTypeDefaultDescription
frontanynullContent of the front face.
backanynullContent of the back face.
flippedany-Controlled flipped state.
defaultFlippedbooleanfalseInitial flipped state when uncontrolled.
onFlipChangeany-Called with the new flipped state.
axisstring"y"Axis the leaf turns around: "x" or "y".
flipOnClickbooleantrueTurn the leaf on click.
draggablebooleantrueAllow turning the leaf by dragging.
dragDistancenumber0Drag distance in pixels to commit a turn; 0 uses half the width.
tiltbooleantrueTilt the leaf toward the pointer on hover.
tiltMaxnumber8Maximum hover tilt in degrees.
glarebooleantrueShow a moving glare highlight.
glareOpacitynumber0.22Opacity of the glare highlight.
hoverScalenumber1.03Scale applied on hover.
perspectivenumber1100CSS perspective in pixels.
stiffnessnumber170Spring stiffness of the turn.
dampingnumber20Spring damping of the turn.
widthnumber280Leaf width in pixels.
heightnumber380Leaf height in pixels.
radiusnumber10Corner radius in pixels.
backgroundstring"hsl(var(--card))"Face background colour.
colorstring"hsl(var(--foreground))"Face text colour.
shadowbooleantrueShow a drop shadow.
shadowColorstring"hsl(var(--foreground))"Drop shadow colour.
shadowOpacitynumber0.3Drop shadow opacity.
disabledbooleanfalseDisables turning and tilt.
ariaLabelstring"Turn leaf"Accessible label for the leaf.

Comments

  • No comments yet.