# One-Shot Prompt

**Simulation**: Receipt paper / perforated paper physics
**Theme**: Tactile checkout counter, matte paper, soft hardware light
**Generated**: 2026-04-23

## Prompt

Build a complete, self-contained single-file `index.html` for a physics-forward receipt-paper demo deployed at `https://crest-alpha-origin.pages.dev/physics/`.

The simulation should feel like a thin thermal-paper receipt being pulled from a countertop printer: the user can grab any part of the strip, drag it, torque it, stress the perforation, tear it free, and watch the detached section fall, buckle, fold, and settle onto a surface. The piece should be visually distinct, tactile, and satisfying rather than generic.

Technical and interaction requirements:

- Use a single HTML file with inline CSS and inline JavaScript.
- Use one external dependency only: Three.js imported from a CDN as an ES module.
- No external images. Any receipt print, paper texture, noise, or UI decoration must be generated in code or on a canvas.
- Use a dense paper grid with Verlet integration and a fixed timestep accumulator.
- Use at least 4 substeps per frame and multiple constraint iterations per substep.
- Model the receipt as a narrow, long rectangular plane with roughly 14-20 columns and 34-52 rows depending on viewport and reduced-motion mode.
- Add structural, shear, and bend constraints. Bend stiffness should be higher than cloth so the paper resists folding before giving way.
- Pin the very top of the receipt inside a small printer/dispenser assembly.
- Add a dedicated perforation band several rows below the pinned edge. Constraints across that band should be flagged as tearable with a lower break threshold than the rest of the sheet.
- Tearing must happen through direct manipulation: when the user pulls the lower sheet hard enough across the perforation, the tearable constraints progressively break and the lower section detaches.
- Detached paper must continue simulating under gravity and collide with a floor plane.
- Include lightweight self-collision or non-adjacent particle repulsion so the paper does not collapse completely through itself.
- Compute updated mesh normals every frame after vertex updates so the folds catch light convincingly.
- Use a matte off-white paper material with a procedurally generated receipt texture: store name, item rows, dividers, totals, timestamp, and tiny utility text printed directly onto a canvas texture mapped to the paper.
- Render a believable environment: subtle background gradient, printer housing near the top, a shadow-catching countertop or floor plane, ambient light, and at least one shadow-casting directional light.
- Add a small hover indicator at the nearest grabbable point.
- Support pointer and touch:
- Desktop: left-drag on the receipt grabs paper, drag empty space or use secondary button to orbit, wheel zooms, `R` resets, `H` toggles help, `Space` pauses.
- Touch: one finger grabs when touching paper, otherwise orbits; two fingers perform pinch-zoom and orbit.
- Include a visible but restrained HUD with the simulation name, a short instruction, tear-state readout, reset button, pause button, motion toggle, and help button.
- Include a dismissible help panel describing controls and the tear mechanic.
- Include a reduced-motion fallback using `prefers-reduced-motion`: lower particle density, disable non-essential idle sway and decorative motion, and expose the active state in the UI.
- Reset should restore the receipt smoothly rather than jarringly.
- Keep the overall tone physics-lab meets point-of-sale hardware: precise, tactile, softly industrial, legible.

Design direction:

- Prioritise tactile materiality. The paper should look thin, slightly translucent at edges, softly shadowed, and believable when folded.
- Keep UI typography clean and sans-serif, with high legibility and strong hierarchy.
- Make the route feel distinct from other catalogue pages by centring the paper simulation and the perforation mechanic rather than generic scene dressing.
- Avoid gimmicky neon or game UI. Let the physics and material response carry the spectacle.

Implementation notes:

- Use `THREE.PlaneGeometry` whose vertices are driven directly from the physics particles.
- Store particle state in typed arrays or compact objects.
- Use a raycaster to intersect the receipt mesh and select the closest particle around the hit point.
- Use a drag plane aligned to the camera for grab interaction.
- Track strain across the perforation band and show a small status indicator such as `attached`, `tearing`, or `detached`.
- Generate the receipt texture in an offscreen canvas, including a dashed perforation guide aligned with the tear band.
- Include page metadata, Open Graph tags, Twitter summary card tags, and an inline SVG favicon.

## Notes

- Physics approach: position-based paper with Verlet integration, bend resistance, and progressive perforation breakage.
- Performance: keep the mesh resolution adaptive for touch devices and reduced-motion users.
- Notable techniques: dynamic canvas texture, tearable constraints, camera-aware dragging, simple self-repulsion, and smooth reset blending.
- Hosting: static `index.html` suitable for Cloudflare Pages, including `https://crest-alpha-origin.pages.dev/physics/`.