[umiyosh]

Summary

An HTML film could only be drawn in the flat dark look the page set itself. This adds drawing styles to the kit, so Claude can draw a film in the look that fits the theme. Part of #16.

• <body data-style="…"> picks one of five styles: paper (pencil on paper), crayon (coloured pencil), blueprint, collage (paper collage) and whiteboard. Without data-style a film looks as before.
• Each style sets the colour variables (--ground, --ink, --accent, --mark, --tint-1 to --tint-4, …), the ground texture and the line width.
• Parts that look the same in every style:
  • .drawn: a box outlined (and coloured in with --fill) by a wobbling hand-drawn line
  • .sketch: wobbling lines for an SVG drawing
  • .hatch: diagonal shading
  • .marker: a highlighter stroke behind a word, drawn left to right as GSAP tweens --mark-x from 0 to 1
  • .cutout and .taped (collage): a piece of paper with torn edges and a strip of tape
  • .tooth (crayon): a coloured-pencil fill
• kit/player.js adds the SVG filters these use (#mr-pencil, #mr-crayon, #mr-marker, #mr-torn, #mr-tooth). It also adds the hatch patterns for SVG shapes (fill="url(#mr-hatch)" and url(#mr-hatch-accent)). The lines boil: the filter seed changes 8 times a second, set by film time, so frames stay deterministic.
• The kit now also ships Klee One (@fontsource/klee-one), a handwriting-like font for the hand-drawn styles.
• references/html-film.md explains which style fits which theme, and when to use each part. Claude picks the style from the request, so there is no new option for users.
• The pencil-on-paper style was tuned against a reference image the user gave: a plain off-white sheet with no grid, graphite lines, ochre for what matters, and a highlighter behind headings.

How it was checked

• make check: 11 test files, 113 tests passed, coverage 96.84%.
• New tests in tests/html-film.test.ts, on a pencil-on-paper page:
  • kit puts the stylesheet and Klee One in the film
  • a .drawn card stays where the page puts it, and its text is measured for contrast against the card
  • the boil changes the frame over time and draws the same frame for the same time
  • the highlighter grows with --mark-x
  • SVG shapes are filled with the kit's hatching (the test fails when the pattern id is renamed)
• A real film: an 82.5 s video, "the industrial revolution of software", drawn in pencil on paper.
  • motion-render check reported layout: ok.
  • The build took 1 min 52 s, about 1.35 min per minute of video, with the filters on.
  • The user watched it and approved it.

Test plan

• make check
• Build a pencil-on-paper film end to end and look at the MP4
• Build one film in each of the other styles (coloured pencil, blueprint, collage, whiteboard) and look at the MP4