AI CSS Animations

Risograph Film

Procedural risograph films in single HTML files: every frame drawn in Canvas 2D as halftone-screened ink plates on cream paper with registration offsets, scored with Web Audio. Source of the "Window Seat" film.

By sevenevesai @sevenevesai Sep 22, 2026

Type
skill
Made with
Claude Code
Built in
Canvas
Topics
Shapes · Music

The skill

## Print system

- Paper: warm cream `#F2EDE3`, cloudy mottling and fibre flecks, baked once, static.
- Inks: blue `#0078BF`, fluorescent pink `#FF48B0`, yellow `#FFE800`, green `#00A95C`, orange
  `#FF6C2F`, violet `#765BA7`, indigo `#2E3192`. Choose for the subject; no pair has a fixed
  role. Three or four inks per scene. No pure black: overprint for darks.
- Screen each plate at ~4–5 px pitch at 1080 with distinct angles (e.g. 15°, 45°, 75°, 0°).
  Gradients change dot size; mid-tones leave paper between dots.
- Fix each ink's 1–3 px registration offset per scene; the subject's own contours reveal it.
- Starvation, speckle and carved highlights where they describe form; grain and contour wobble
  stable over time. No uniformly smooth fills or mechanical outlines.
- Clear value hierarchy: paper, a screened middle, an overprint dark where depth needs it. Choose
  sparse or dense deliberately; give each image time to read at its real speed; follow the eye
  through a handoff instead of forcing it back to centre.

[…]

## Motion, sound and text

- Take transformations from the subject's material and action (deformation, unfolding, flow,
  occlusion, growth, fracture, reveal, drift, stillness). Ripple, iris, collision and bloom are
  options, not obligatory beats.
- Every paper hold or hard cut needs a purpose. Full-scene dissolves are not a fix for
  disconnected shots; design any ink transformation explicitly.
- Score with tempo, phrasing and timbre from the subject; no fixed BPM, note pair or ending chord.
  Build from the `── sound kit ──` in [studies/sound.html](../studies/sound.html), measure with
  `tools/audio.mjs` before any full render; the `riso-score` skill runs that stage.
- Text and signatures are optional; draw glyphs as paths ([lettering](drawing.md#text-in-the-frame)).
  Never append an inherited title card.

From sevenevesai's repo, under the MIT license.

Similar prompts