Imagen que se arruga como papel al mantenerla pulsada.
npx shadcn@latest add https://reactbits.dev/r/PaperCrumple-TS-TW
Para acciones frecuentes: confirmar, marcar, valorar. El feedback convierte un clic en una sensación.
| Prop | Tipo | Por defecto |
|---|---|---|
| src | string | - |
| alt | string | 'Crumplable image' |
| backSrc | string | '' |
| width | number | 320 |
| height | number | 400 |
| sceneHeight | number | 560 |
| imageFit | 'cover' | 'contain' | 'cover' |
| releaseBehavior | 'stay' | 'restore' | 'creased' | 'restore' |
| crumpleAmount | number | 0.85 |
| crumpleDuration | number | 0.55 |
| releaseDuration | number | 0.4 |
| foldCount | number | 6 |
| foldSharpness | number | 0.6 |
| wrinkleDepth | number | 0.65 |
| creaseStrength | number | 0.18 |
| paperColor | string | '#f4f0e8' |
| roughness | number | 0.92 |
| paperTexture | number | 0.08 |
| lightIntensity | number | 1.8 |
| lightAngle | number | -35 |
| shadow | boolean | true |
| shadowOpacity | number | 0.08 |
| draggable | boolean | true |
| dragRotation | number | 10 |
| dragRadius | number | 180 |
| returnToOrigin | boolean | true |
| rotation | number | 0 |
| seed | number | 7 |
| detail | number | 64 |
| disabled | boolean | false |
| resetKey | number | string | 0 |
| onStateChange | (state: PaperCrumpleState) => void | - |
| onError | (error: Error) => void | - |
| className | string | '' |
| style | CSSProperties | - |