Modus UI

Folio Crush

Web (React)

A WebGL print you can hold to crush into a ball and drag around.

The sheet backs onto the theme's muted paper tone, resolved live from the palette, and sits slightly askew on the page.

Modus / Folio Crush

Installation

CLI

npx @modus-ui/cli add folio-crush

Manual

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

Usage

tsx
import { FolioCrush } from "@/components/ui/folio-crush";

export default function Example() {
  return <FolioCrush src="/print.jpg" />;
}

Props

PropTypeDefaultDescription
srcstring-The image URL to display on the paper front.
altstring"Folio print"Accessible alt text.
backSrcstring""Optional back face image URL.
widthnumber320Width of the paper in pixels.
heightnumber400Height of the paper in pixels.
sceneHeightnumber560Height of the container scene.
imageFitstring"cover"CSS object-fit for the image.
releaseBehaviorstring"restore"What happens on release: "restore" or "stay".
crumpleAmountnumber0.85How much the paper crumples (0–1).
crumpleDurationnumber0.55Duration of crumple animation in seconds.
releaseDurationnumber0.4Duration of release animation in seconds.
foldCountnumber6Number of fold lines.
foldSharpnessnumber0.6Sharpness of the fold creases.
wrinkleDepthnumber0.65Depth of the wrinkle displacement.
creaseStrengthnumber0.18Strength of crease shadowing.
paperColorstring"hsl(var(--muted))"Color of the paper.
roughnessnumber0.92Material roughness (0–1).
paperTexturenumber0.08Paper texture noise intensity.
lightIntensitynumber1.8Light intensity on the paper.
lightAnglenumber-35Angle of the directional light in degrees.
shadowbooleantrueWhether to show a drop shadow.
shadowOpacitynumber0.08Opacity of the drop shadow.
draggablebooleantrueWhether the paper can be dragged.
dragRotationnumber10Max rotation on drag in degrees.
dragRadiusnumber180Max drag displacement radius.
returnToOriginbooleantrueWhether the paper snaps back on release.
rotationnumber-4Initial rotation of the paper in degrees.
seednumber7Random seed for wrinkle generation.
detailnumber64Mesh subdivision detail level.
disabledbooleanfalseDisables interaction.
resetKeynumber0Change this value to programmatically reset state.
onStateChangefunction-Callback fired on status change.
onErrorfunction-Callback fired on load error.
styleobject-Inline style for the container.

Comments

  • No comments yet.