Paper Crumple

An image that crumples into a textured 3D sheet while held and follows the grabbed point as you drag. Release it as a crumpled ball, unfold it flat, or leave the paper creased, with customizable folds, paper grain, lighting and shadows.

Default

Press and hold the paper to crumple it, then drag to move it. Choose what happens on release and tune the folds, grain and lighting with the controls underneath.

Loading interactive paper.

Customize

On release

Crumple amount0.85

Hold duration0.55s

Release duration0.4s

Crease strength0.18

Fold density6

Fold sharpness0.6

Wrinkle depth0.65

Paper grain0.08

Roughness0.92

Paper back

Light strength1.8

Light angle-35°

Shadows

Shadow opacity0.16

Draggable

Drag tilt10°

Drop radius180px

Return to center

Image fit

Width400px

Height400px

Rotation0°

Fold seed7

Mesh detail64

Disabled

API Reference

PaperCrumple

Prop	Type	Default	Description
`src`	`string`	-	Required image URL. PNG transparency is preserved. Remote image servers must allow CORS.
`alt`	`string`	`'Crumplable image'`	Image description used by the fallback and the accessible hold control.
`backSrc`	`string`	`''`	Optional image printed on the reverse. Otherwise the back uses paperColor.
`width`	`number`	`320`	Unfolded paper width in pixels. Scales down to fit the stage with a 24px inset.
`height`	`number`	`400`	Unfolded paper height in pixels. Determines the sheet aspect ratio.
`sceneHeight`	`number`	`560`	Height of the full-width stage in pixels, including space to drag.
`imageFit`	`'cover' \| 'contain'`	`'cover'`	Cover crops the texture; contain keeps the entire image and leaves unused space transparent.
`releaseBehavior`	`'stay' \| 'restore' \| 'creased'`	`'restore'`	Freeze the current crumple, unfold completely, or unfold with lasting crease relief.
`crumpleAmount`	`number`	`0.85`	Maximum fold amount while held, from 0 (flat) to 1 (fully crumpled).
`crumpleDuration`	`number`	`0.55`	Approximate settling time in seconds while holding. 0 makes the change immediate.
`releaseDuration`	`number`	`0.4`	Approximate unfolding time in seconds. Another press can interrupt it.
`foldCount`	`number`	`6`	Number of crease guides in the paper solver, from 3 to 16. Each seed produces a different arrangement.
`foldSharpness`	`number`	`0.6`	Blend from rounded wrinkles (0) to angular creases (1).
`wrinkleDepth`	`number`	`0.65`	Compression depth, from 0 to 2. Higher values produce a tighter wad and stronger residual folds.
`creaseStrength`	`number`	`0.18`	Residual relief from 0 to 1 for the creased release mode. Longer holds leave stronger creases.
`paperColor`	`string`	`'#f4f0e8'`	Color of the unprinted back of the sheet.
`roughness`	`number`	`0.92`	Material roughness, from smooth (0) to matte (1).
`paperTexture`	`number`	`0.08`	Fine paper-grain bump strength, from 0 to 1.
`lightIntensity`	`number`	`1.8`	Strength of the directional light that reveals folds.
`lightAngle`	`number`	`-35`	Direction of the key light in degrees. 0 shines from above.
`shadow`	`boolean`	`true`	Enable self-shadowing and a soft drop shadow behind the paper.
`shadowOpacity`	`number`	`0.08`	Opacity of the cast and drop shadows, from 0 to 1.
`draggable`	`boolean`	`true`	Move the sheet while held. The grabbed material point follows the pointer.
`dragRotation`	`number`	`10`	Maximum tilt in degrees while dragging. 0 disables tilt.
`dragRadius`	`number`	`180`	Maximum resting offset on each axis, in pixels. The stage also bounds the resting position.
`returnToOrigin`	`boolean`	`true`	Restore and creased modes return to the center. Stay mode leaves the paper where it was dropped.
`rotation`	`number`	`0`	Initial sheet rotation in degrees.
`seed`	`number`	`7`	Seed for a repeatable arrangement of folds and paper grain.
`detail`	`number`	`64`	Simulation detail, clamped to 32-96. Higher values add smaller folds and take longer to prepare.
`disabled`	`boolean`	`false`	Disable pointer and keyboard input and finish any active hold.
`resetKey`	`number \| string`	`0`	Change this value to reset the position, crumple and accumulated creases immediately.

Events

Prop	Type	Default	Description
`state-change`	`(state: 'holding' \| 'flat' \| 'crumpled' \| 'creased') => void`	-	Reports holding, then the selected release state: flat, crumpled or creased.
`error`	`(error: Error) => void`	-	Emitted if WebGL initialization or image loading fails. The original image remains as a fallback.

Accessibility

Keyboard shortcuts and ARIA behavior.

Shortcut	Description
`Space` + `Enter`	Hold to crumple the paper. Release to let go.
`Arrow keys`	Move the paper while it is held. Hold Shift for larger steps.
`Escape`	Reset the position, crumple and creases.

If WebGL or the image fails to load, the original image stays visible and a status message is announced.

Lattice Loader Peek Rating