# Video style library

Every video style we have tried, with where it lives and how to make another one.
Add a row each time a new style is tried. Mark the keepers with ★.

| Style | Technology | Example film | Reuse it | Render cost on this laptop |
|---|---|---|---|---|
| ★ Watercolour | p5.js + p5.brush (hand-painted strokes, boiling ink, paper grain) | *The Sustainable Island 2027: how we use AI* (69.6 s, 24 fps), Sept 2026 | Kit + film in `~/vefskolinn/sustainable-island-film/`. Ask: "Read ANIMATION_GUIDE.md and make a watercolour video about …" | **Heavy.** Seconds per frame on integrated graphics; laptop gets hot. Keep fills small, render one resolution. |
| ★ Player 2 arcade | HyperFrames (HTML + GSAP), faceless-explainer workflow | *Player 2 óskast* recruitment video (80.7 s, 30 fps), Oct 2026 | HyperFrames recipe **`player-2-arcade`** (stored in `~/.media/recipes/`). Ask: "make another player-2-arcade video about …". Project: `videos/player-2-wanted/` | **Light.** ~1.5 min to render 80 s; file 9.7 MB. |

| ★ Orðabókin flashcards | HyperFrames (HTML + GSAP), faceless-explainer workflow, BlockFrame preset; frames written by one generator script | *Orðabókin — UPPT1ÍA03AT á átta orðum* (75.0 s, 30 fps), Oct 2026 | Project: `introToUppt/` — `tools/build_frames.py` (all frames), `tools/make_voice.py`, `tools/make_music.py`. Ask: "make another Orðabókin video about …" | **Light.** ~1.3 min to render 75 s; file 11.1 MB. |
| Neon street pixel (storyboard only) | Hand-coded canvas pixel engine, 480×270 ×4, sticker outlines, neon glow, 128 BPM darksynth score in code | *Vefskólinn kynning* v2 storyboard (2:07, music only), Oct 2026 | `videos/vefskolinn-kynning/` (storyboard.html, storyboard/*.js, tools/make_music.py) | Storyboard only (not rendered). |
| ★? Clay stop-motion | Three.js plasticine engine (lumpy fingerprinted clay that boils per pose, pressed-on hair/beard layers, 12 poses/s on twos, light flicker, visible rig wires) driven by a GSAP proxy tween in HyperFrames | *From one island to another* (1:37, 24 fps, English voice Emma + subtitles), Oct 2026, for I.E.S. El Rincón teachers | `videos/el-rincon-clay/` — engine `storyboard/clay.js`, puppets `puppet.js` + `head.js` + `cast.js`, props `props.js`, shots `scenes.js`; voice `tools/make_voice.py`, timeline `tools/make_timeline.py`, score `tools/make_music.py`. Ask: "make another clay video about …" | **Medium.** 5 min 20 s to render 97 s with 2 workers (≈38 CPU-min); 86 MB at delivery quality. |
| ★? Neo-punk expressive pixel | Hand-coded canvas pixel engine (320×180 ×6, drawings on twos, boiling outlines, 1–2 frame flash frames) driven by HyperFrames; acid-punk score in code | *Vefþróun með gervigreind* (1:59, 24 fps, music only), Oct 2026 | `videos/vefskolinn-gervigreind/` — engine in `storyboard/px3.js`, `cast3.js`, `scenes3.js`; music `tools/make_music3.py`; built from the user's "Neo-Punk Expressive Pixel Art" art direction | Light: one small canvas per frame. |

## What each style brings with it

### Watercolour (p5.brush)
- **Look:** paper and watercolour, boiling ink linework, flat 2D, a colour arc through the times of day.
- **Voice:** Kokoro running locally (English voices only, CPU-heavy).
- **Music:** generated by `audio/make_audio.py` in the project.
- **Good for:** warm, story-like films where the look matters most.

### Player 2 arcade (HyperFrames)
- **Look:** retro pixel arcade on night indigo, CRT scanlines, HUD bar. Colour meaning: cyan = us, pink = the teacher, yellow = look here, green = progress.
- **Fonts:** Jersey 10 for all Icelandic text, Press Start 2P only for Latin text and digits (its accented capitals are broken), Silkscreen for small labels. All are in `videos/player-2-wanted/assets/fonts/`.
- **Voice:** Icelandic, Microsoft Edge neural voice **Gunnar** (`is-IS-GunnarNeural`) via edge-tts, so it runs in the cloud. Guðrún (`is-IS-GudrunNeural`) was the runner-up. Demos are in `voice-demos/`.
- **Music and SFX:** original chiptune and 8-bit effects synthesized in code by `videos/player-2-wanted/tools/`.
- **Captions:** pixel caption skin in `videos/player-2-wanted/.hyperframes/caption-skin.html`.
- **Mix that worked:** voice +7 dB with a limiter, music 0.16, SFX 0.12 (quiet ones 0.08).
- **Good for:** playful invitations, anything with steps or levels, teacher and student audiences.

## Notes for next time
- Icelandic narration: use the Edge neural voices (Gunnar / Guðrún). The Tiro service no longer responds, and the Piper voices sound more robotic.
- Always check a pixel or display font for þ ð æ ö á é í ó ú ý before building.
- The storyboard webpage (sketch pass) made it much easier to judge the video before the build. Keep that step.
- Pixel fonts only stay readable at their own grid size. Rendered onto a small pixel canvas, Jersey 15 is right at exactly 22 px (or 44, 66): at 15–20 px its R turns into A. Micro 5 breaks M and Ð apart. Blackletter pixel fonts (Jacquard) are unreadable in Icelandic capitals. Pixelify Sans draws æ as "ae". Test GERVIGREIND, BYRJAR, KÓÐANN, ÞÚ, ÆÐI before building, and keep accents clear of the frame's top edge.

### Neo-punk expressive pixel (canvas engine + HyperFrames)
- **Look:** flat poster fields with 2–5 colours from black, cream, orange, blood red, electric blue and acid green. Lopsided characters with mismatched eyes and sharp teeth; the AI is a one-eyed acid-green creature.
- **How it renders:** the storyboard engine is the renderer. `index.html` puts one 320×180 canvas on screen at 6× and redraws it from a GSAP proxy tween's `onUpdate`, so what you approve on the storyboard is what renders.
- **Type:** Jersey 15 at 22 px (see the notes below).
- **Music:** `make_music3.py` builds acid-punk at 132 BPM, with a 303-style acid line as the AI's voice.
- **Good for:** loud, poster-like films for young audiences.

### Orðabókin flashcards (HyperFrames, BlockFrame)
- **Look:** neo-brutalist zine flashcards: 4–6px black borders, hard offset shadows, five pastels cycled per card, lowercase Inter 900 headword like a dictionary entry, Space Grotesk pills, an 8-square progress bar.
- **Teaching mechanics:** each card types its word in, Gunnar says the word alone, then the sentence; each on-screen word lights up yellow as it is spoken (karaoke from edge-tts word timings). Invented pictures built from bordered blocks pop in across the sentence.
- **Voice:** Gunnar (`is-IS-GunnarNeural`) at −10% for language learners; headword and sentence are two clips with a 0.75 s gap. Write numbers out as words in SCRIPT.md (the first take silently dropped "prósent"); the screen keeps digits.
- **Fonts:** Inter + Space Grotesk from Fontsource "latin" woff2 files (cover þ ð æ ö, accents and „“).
- **Music:** soft marimba plucks over a pad (F–Dm–B♭–C, 84 BPM) + paper-flip SFX, all in `tools/make_music.py`. Mix: music 0.10, flips 0.18.
- **Gotchas:** CSS classes and ids must not start with a digit (frame ids like `02-…` → prefix `k`). Voice files get content-hashed names, because Studio cached an old take under the same filename.
- **Good for:** vocabulary-first explainers for language learners, course introductions, any "N things you need to know" list.

### Clay stop-motion (Three.js + HyperFrames)
- **Look:** Aardman-ish plasticine puppets on a wooden tabletop with a paper sweep; warm key light, soft shadows; everything moves on twos with a slight boil, exposure flicker and tiny per-pose nudges. Sun, planes and flying papers hang on visible steel rods.
- **Likeness:** puppets are specs in `cast.js` (skin, hair style/colour, beard style, glasses, shirt pattern, build). Hair, beards and stubble are clay layers smeared onto the skull with soft tapered edges; hair gets pressed strand grooves. Sculpt from a numbered photo lineup and let the user name the faces.
- **Type:** Fredoka 600/700 (has æ ð þ ó á í ¡) on clay plaques with raised lettering; keep the lettering plane clear of the clay (the boil otherwise eats letters).
- **Voice:** English edge-tts; Emma (`en-US-EmmaMultilingualNeural`) chosen, names respelled (Vef-skoh-linn, Tike-nee-skoh-linn, Tee-boo). Shots are timed to the narration's word timings.
- **Music:** ukulele (Karplus-Strong) + pizzicato + glockenspiel, 100 BPM; voice +6 dB with limiter over music 0.16, pre-mixed to `assets/audio/mix.wav`.
- **Good for:** warm, personal films about real people — thank-yous, partnerships, team intros.