Paper crumple
Hold a printed sheet to wad it into a ball, drag it around, and release to smooth it flat again.
Field notes
A printed tide table you can pick up and crush. Hold it to wad it up, drag to move it, then let go to smooth it — or keep the folds.
Hold to crumple · drag to move · Esc resets
The sheet is flat. Press and hold it to wad it up.
Implementation
1"use client";2 3import {4 useEffect,5 useId,6 useRef,7 useState,8 type CSSProperties,9 type HTMLAttributes,10 type KeyboardEvent as ReactKeyboardEvent,11 type PointerEvent as ReactPointerEvent,12} from "react";13 14/**15 * Hold the sheet to wad it up. While held it follows the pointer and tilts with16 * the drag; letting go restores it (or leaves it crumpled/creased, depending on17 * `releaseBehavior`).18 *19 * The renderer is an original canvas-2D spring mesh: every vertex is pushed by20 * a deterministic ridge/wrinkle field, folded toward a dome, tilted, projected21 * with a shallow perspective, and each triangle is textured with an affine22 * mapping from the print. No external graphics library is used.23 */24 25export type PaperCrumpleState = "flat" | "holding" | "crumpled" | "creased";26 27export type PaperCrumpleRelease = "restore" | "stay" | "creased";28