Paper Shredder

"use client";

import { useEffect, useRef, useState, type KeyboardEvent, type PointerEvent } from "react";
import { useReducedMotion } from "motion/react";
import { IconFileText } from "@tabler/icons-react";
import { cn } from "@/lib/utils";
import { ShredScene, paintSheet } from "./strips";

// Paper shredder. Drag the document down into the slot; once its edge is in,
// the motor takes it and pulls it through at a steady speed. The part that
// has gone through comes out the bottom as strips of real paper, simulated
// in three.js (see strips.ts): they hang and sway from the cutter, curl,
// flutter down when the sheet lets go, and drape into a pile in the bin.
//
// The document and the shredder are DOM; the strips are a WebGL canvas
// behind the body, textured with a paint of the same document, so the cut
// lines up with the slot exactly. Paper travels through the body before it
// comes out, so strips only appear once the sheet is pushed that far in.

const STAGE_W = 320;
const STAGE_H = 480;
const W = 220; // document, px
const H = 136;
const CARD_X = (STAGE_W - W) / 2;