# Zapo the Spark Bunny: one mascot, twenty styles

Open `index.html` (double-click works; or `python3 -m http.server` and visit it). No build step, no libraries, fonts or image files. Every pixel is painted by the JavaScript in this folder.

**Zapo** is an original mascot: a teal teardrop body, one straight ear and one bent ear with orange insides, orange feet, a cream belly, pink cheeks, big white eyes with navy pupils, a yellow lightning-bolt mark on the forehead and a zigzag bolt-shaped tail. The shapes live once in `mascot.js` as SVG path data. Every style re-renders those shapes (or a raster of them) with its own technique.

## Files
- `mascot.js`: shared geometry, palette, seeded RNG and helpers (rasteriser, palette snapping, grain).
- `styles-a.js`, `styles-b.js`, `styles-c.js`: the 20 styles, each a function that draws onto a 480x480 canvas.
- `anim.js`: the 10-second clip, player controls and recorder.
- `index.html`: responsive page (2-column grid on phones, tap a tile to enlarge it).

## The 20 styles
1. Pixel art: 48x48 grid snapped to 8 colours
2. Woodcut: black ink, gouged hatching
3. Risograph poster: 3 inks, overprint, misregistration
4. Rubber stamp: single-ink impression, worn edges
5. 16-bit game sprite: SNES-style colour ramps with dithering
6. Ukiyo-e woodblock: sumi outlines, bokashi gradients, seal
7. Blueprint: technical drawing with dimension lines
8. Neon sign: glowing glass tubes on brick
9. Stained glass: Voronoi jewel panes with lead came
10. ASCII art: coloured glyphs on a 60x60 grid
11. Watercolour: layered washes with a pen line
12. Paper cut-out: layered paper with drop shadows
13. Comic panel: inks, Ben-Day dots, speech burst
14. Isometric voxel: 26x26 grid extruded into cubes
15. Embroidery: satin stitch in a wooden hoop
16. Chalkboard: chalk dust on slate
17. Art Deco: gold inlay and sunburst
18. Low-poly: Delaunay triangulation with faceted light
19. Halftone print: CMYK screens at four angles
20. Clay 3D: soft-lit plasticine render

## The 10-second clip
`anim.js` computes each frame from a single time value `t` (0 to 10 s), so scrubbing, replaying and recording all produce identical frames. A pose function drives a rig of the mascot's parts (ears, arms, tail, eyes, squash and stretch). The scenes are: drop-in bounces, a wave, a lightning power-up at dusk, ZAP and a super-speed run at night, a flip, a pixelating transition, and a sunrise finale with a title card. Controls: Play/Pause, Replay, and a scrubber with a time readout.

## How the WebM export works
1. **Record WebM** starts the clip from 0 and calls `canvas.captureStream(30)` on the clip canvas.
2. A `MediaRecorder` (VP9, falling back to VP8 or plain WebM, about 5 Mbit/s) collects chunks while the clip plays in real time. It records what is drawn on screen.
3. When playback reaches 10 s the recorder stops and the chunks become a `Blob`.
4. The page shows a **Download WebM** link (`zapo-spark-bunny-10s.webm`, 540x540, roughly 3 MB) and a preview player. Nothing is uploaded; the file stays in your browser.

If a browser lacks `MediaRecorder` or `captureStream` (some older iOS Safari versions), the Record button is disabled with an explanation. Playback still works. Keep the tab in the foreground while recording, because browsers pause animation in background tabs.