# One-Shot Prompt

**Simulation**: Paper / Receipt
**Theme**: Tender (minimal receipt paper physics)
**Generated**: 2026-04-18

## Prompt

Create an interactive 3D receipt paper physics simulation using Three.js and custom Verlet integration. The paper should be a long vertical receipt (aspect ratio ~1:3) with printed receipt text that deforms naturally when grabbed, crumpled, and tossed.

### Physics Requirements

**Particle Grid**: 30 columns × 60 rows = 1800 particles, spaced 8 units apart

**Topology**: Rectangular grid with:
- Horizontal distance constraints (connect left-right neighbors)
- Vertical distance constraints (connect up-down neighbors)
- Diagonal shear constraints (connect diagonally for structural stability)
- Bending constraints to resist folding (higher stiffness than cloth)

**Integration**: Verlet position-based integration with:
- Fixed timestep accumulator pattern
- 8 substeps per frame minimum
- Delta-time capping at 33ms to prevent explosion after tab switch
- Gravity: 0.5 units/frame downward
- Damping: 0.98 velocity multiplier per frame

**Constraint Solving**:
- Iterative relaxation: 5 iterations per substep
- Distance constraints maintain rest length
- Pin constraints: Top-left and top-right corners pinned to fixed positions
- Self-collision: Simple repulsion between non-adjacent particles within 15 units

### Interaction Model

**Mouse/Touch Grab**:
- Raycast from screen to find nearest particle in 3D
- Create an invisible drag plane at particle depth
- Move grabbed particle to ray-plane intersection point
- Highlight grabbed particle with subtle glow
- Support multi-touch for mobile

**Camera Controls**:
- Orbit: Left-drag to rotate around center
- Zoom: Scroll wheel
- Pan: Right-drag to translate

**Keyboard Controls**:
- R: Reset paper to flat vertical position (animate, don't snap)
- Space: Pause/resume physics
- W: Toggle wind (gentle breeze from random direction)
- I: Toggle FPS/particle count display

### Visual Treatment

**Paper Material**:
- MeshStandardMaterial with double-sided rendering
- Off-white color (#f5f2eb)
- Slight roughness (0.6) for matte paper look
- Subtle normal variation via per-frame vertex normal updates

**Receipt Text**:
- Generate text texture on HTML5 Canvas (256×512)
- Draw receipt-style text: store name, items, prices, barcode
- Map texture to mesh UVs (u = x/cols, v = y/rows)
- Text deforms with paper surface

**Lighting**:
- Ambient light: intensity 0.4, color #ffffff
- Directional light: intensity 1.0, position (10, 20, 10), with shadows
  - Shadow map size: 2048×2048
  - Near: 0.5, far: 50
  - Bias: -0.001
- Optional subtle point light for warmth

**Environment**:
- Clean gradient background (light gray to white)
- Ground plane: large circular disc at y=-20, same off-white, receives shadows
- Fog: subtle depth cue (start 30, end 100, color matches background)

**UI Overlay** (unobtrusive):
- Top-left: "Tender" in clean sans-serif, subtitle "Receipt Paper Physics"
- Instruction text: "Click and drag to interact" (fade after 3 seconds)
- Bottom-left: Controls hint ("R: Reset · Space: Pause · W: Wind")
- FPS counter: toggleable, bottom-right, small monospace

### Mobile Support

- Detect mobile via touch capability or screen width < 768px
- Reduce grid to 20×40 (800 particles) for performance
- touch-action: none on canvas to prevent scroll
- Support single-touch grab
- Pinch-to-zoom for camera

### Performance

- Use BufferGeometry with Float32Array for positions
- Update positions via geometry.attributes.position.needsUpdate = true
- Avoid creating new objects per frame
- Target 60fps on mid-range desktop, 30fps+ on mobile

### States

| State | Behavior |
|-------|----------|
| Loading | "Initializing..." overlay for 1 second |
| Running | Physics active, all interactions enabled |
| Paused | Semi-transparent overlay, "PAUSED — press Space" |
| Resetting | Animate particles back to initial positions over 0.5s |

### Metadata

- Title: "Tender — Receipt Paper Physics"
- Description: "Interactive receipt paper physics simulation. Grab, crumple, and toss a virtual receipt with realistic cloth deformation."
- OG/Twitter tags for sharing

## Notes

- **Physics approach**: Verlet integration chosen for stability with constraints. Position-based methods handle collisions and constraints more naturally than force-based for this use case.

- **Self-collision**: Implemented as simple particle repulsion rather than full mesh collision. This approximates paper self-contact without the complexity of continuous collision detection or signed distance fields.

- **Bending constraints**: Paper is stiffer than cloth but can still fold. Use a bending stiffness multiplier of 2.0× compared to stretch constraints.

- **Texture generation**: Canvas API used to generate receipt text dynamically. This ensures no external image dependencies while maintaining crisp text at any zoom.

- **Camera setup**: Perspective camera at (0, 0, 80) looking at origin. Orbit controls give 360° view of the deforming paper.

- **Hosting**: Works on CodePen, Vercel, Cloudflare Pages, or local HTTP server.

## Hosting

### Local Preview
```bash
python3 -m http.server 3000
# Open http://localhost:3000
```

### CodePen
Paste entire HTML into HTML panel. Three.js loads from CDN.

### Vercel
```bash
vercel --prod
```

### Cloudflare Pages
Use `cf-pages-deploy` skill after saving index.html.