Paper Crumple

<script setup lang="ts">
  import { ref } from 'vue';
  import PaperCrumple from '~/components/ui/paper-crumple/PaperCrumple.vue';
  import type { PaperCrumpleState } from '~/components/ui/paper-crumple/types';

  const state = ref<PaperCrumpleState>('flat');
  const resetKey = ref(0);

  function onState(next: PaperCrumpleState) {
    state.value = next;
  }
</script>

<template>
  <PaperCrumple
    src="/images/poem.jpg"
    alt="A handwritten poem on paper"
    :width="400"
    :height="400"
    :scene-height="360"
    image-fit="contain"
    release-behavior="creased"
    :reset-key="resetKey"
    @state-change="onState"
  />
</template>

Remote images must send CORS headers, because the image becomes a WebGL texture. The original image shows as a fallback while the scene loads or if WebGL is unavailable.

• The sheet is a real <button> with an aria-label that describes the controls, and aria-pressed while held.
• Keyboard: hold Space or Enter to crumple, arrow keys (Shift for bigger steps) to move, Escape to reset. A focus ring shows on keyboard focus.
• A polite role="status" region announces loading and errors.
• With prefers-reduced-motion, changes are instant and drag tilt is off.
• Rendering pauses when the stage is offscreen or the tab is hidden.
• Ported from React Bits by David Haz.