SkillFoxx

riso-windowseat skill

A Claude Code skill kit that makes procedural risograph films and prints: a single HTML file of Canvas 2D and Web Audio

  • 317 ★ on the repository
  • Last commit
  • MIT
Skill

Extended access

Why this level

  • `npm run setup` downloads Chromium and Firefox builds, and `npm install` brings packages with a bundled ffmpeg
  • The agent runs `tools/` scripts and writes files into `films/`, `prints/` and `out/`
  • A hook runs automatically after a film edit and scans the file for `Math.random()`
All reasons and checks

sevenevesai/riso-windowseatAuthor:sevenevesai

Install

In your terminal, with SkillFoxx CLI

npx skillfoxx add skills/riso-windowseat

Detects the agents on your machine, shows the access level and pins the version.

Other ways to install

Access and checks

How we review

Extended accessThe tool runs code or makes network calls and only reads external data.

  • `npm run setup` downloads Chromium and Firefox builds, and `npm install` brings packages with a bundled ffmpeg
  • The agent runs `tools/` scripts and writes files into `films/`, `prints/` and `out/`
  • A hook runs automatically after a film edit and scans the file for `Math.random()`

This is third-party code. Review the repository files before installing.

What it does

The repository grew out of the release of the film Window Seat. Making it took a set of Claude Code skills, craft notes and a render harness, and now all of it ships as an open kit. Every film and print here is a single `index.html`: Canvas 2D and Web Audio with no libraries, fonts, images or network calls, and sampled music is stored inside the file. Nine films (Window Seat, Roost, Held, Nonpareil, Eclosion, Passenger, Standby, Lumen, Emergence) run 1080 by 1080 at 30 frames per second, and the MP4s sit in the v1.0 release. `.claude/skills/` holds three skills. `riso-film` designs and builds a procedural animation and delivers `films/<name>/index.html` plus a verified MP4 in `out/`. `riso-still` makes posters and print series and delivers `prints/<name>/index.html` and a native-resolution PNG. `riso-score` writes or reworks the music: a deterministic `renderAudio()` exactly as long as the film, with measured loudness and sync. `riso-still` does not swap procedural graphics for AI raster generation. The build itself runs in `tools/`: `npm install` brings playwright-core and ffmpeg, `npm run setup` downloads Chromium and Firefox for rendering and `npm test` runs a self-test. Then you open Claude Code in the repository root and ask, for example, for a 40-second film about a lighthouse keeper's night or a poster of a heron on a pier. `CLAUDE.md` gives the session its contract and commands. After each film edit a hook flags `Math.random()` calls and a missing `window.__riso`.

Who it is for. Designers and creative coders who want to make short procedural risograph films and posters together with Claude Code.

Good fit when

  • You need a 40-second film built around a story, for example a lighthouse keeper's night
  • You need a risograph-style poster, say a heron on a pier at dusk
  • A finished film needs a score, or one loud passage needs softening (`riso-score`)
  • You want to extend Window Seat with a new passage, for example a snowy pass after the lake
  • You want to learn how procedural graphics and sound work: `docs/` holds craft notes and `studies/` holds interactive pages

Not a fit when

  • You want AI raster image generation: `riso-still` is procedural and does not make that swap
  • You need the skills in another project: they work from the root of the cloned repository
  • A film must be cut from real footage: everything here is drawn in code

Example request

Make a 40-second riso film about a lighthouse keeper's night and score it with `riso-score`

Limitations

  • The skills work from the root of the cloned repository, and moving them into another project means carrying over `CLAUDE.md`, the `riso-plates` rule and the hook.
  • Node.js 18 or newer and Claude Code are required. `npm run setup` downloads Chromium and Firefox builds, and the published MP4s are Firefox renders (`render.mjs --engine firefox`).
  • The license is MIT apart from third-party material: the Window Seat piano is CC BY 3.0 (keep the credit) and the Eclosion wing geometry is CC BY-SA 4.0.
  • The film Standby does not play on seveneves.ai/riso and is watched from the file.

How to disable. The skills act only inside the clone, so it is enough not to open Claude Code in that folder or to delete it. The browsers downloaded for rendering belong to the Playwright environment and are removed along with `tools/node_modules` and the Playwright cache.

FAQ

How do I start with riso-windowseat?

Clone the repository, go to `tools/` and run `npm install && npm run setup && npm test`. Then open Claude Code in the repository root and describe a film or print.

What comes out: video or code?

Both. The `riso-film` skill delivers `films/<name>/index.html`, which plays in a browser on Play, and a verified MP4 in `out/`. Posters come out as `prints/<name>/index.html` and a PNG.

Are external libraries and images needed?

No. Each work is one HTML file of Canvas 2D and Web Audio with no libraries, fonts, images or network calls, and music with samples sits inside the file.

Can I reuse the films and sounds?

The code, films and prints are MIT, except two parts: the Window Seat piano (CC BY 3.0, keep the credit) and the Eclosion wing geometry (CC BY-SA 4.0). The recordings of each sampled film are listed in its `AUDIO-SOURCES.md`.

How do I fix the sound in a finished film?

Ask the agent, for example: "The rain at 66 s is too loud". The `riso-score` skill rebuilds `renderAudio()`, checks loudness and sync and records the measurements in `FILM.md`.

Discussion

No questions or reviews yet.

Skills

Six Claude Code skills make animation for reels with no footage: graphs, map routes, exploded views and narrated explainers

PluginExtended access709

A skill for hand-drawn 2D animation as code: a detail vocabulary, anatomical rigs and a frame-exact MP4, on Node and ffmpeg

PluginMinimal access151

A Claude Code skill that records a product in the browser, composes a video with chapters and captions and masters the MP4 locally

SkillExtended access396

A Claude Code skill for code-made video: it splits a clip into scenes and picks an engine for each, from Paper.js to Manim.

SkillExtended access115

Claude Code skill that draws vertical 9:16 explainer reels in a cut-paper style: script, voice and MP4 from one prompt

SkillExtended access138

Skills give Claude Code three ways to make images: code-drawn graphics, Three.js 3D scenes and Flux diffusion on Cloudflare.

SkillExtended access113

README in short

The README opens with a description of the kit and a table of nine films with their lengths and plots, then walks through Window Seat, Roost, Held, Nonpareil and Eclosion in detail. Next come prints, a section on how the films are made and a Make your own section with install steps and sample prompts. It closes with a table of repository contents and licenses with links to recording sources.

README badge

Original SKILL.md

---
name: riso-film
description: Design, build or improve procedural risograph animations and videos in this repo, including narrative films, abstract shorts, motion effects and visual inspection. Delivers self-contained Canvas 2D HTML and a verified MP4. For standalone still art use riso-still; for sound use riso-score. Not for editing tools/.
---

# Riso film

Deliver `films/<name>/index.html` plus a verified MP4 in `out/`. Every pixel is drawn in Canvas
2D; the deliverable has no libraries, fonts, images or network calls. External subject references
may be studied, never embedded. Paths are relative to the repo root; commands run in `tools/`.
Reference exclusions in the user's request take precedence.

## 1. Direction

Read `.claude/rules/riso-plates.md`, `docs/brief.md` and `docs/visual-development.md` first.
Add `docs/drawing.md` and `docs/motion.md` for what is being built, `docs/characters.md` for
people, animals or hands, `docs/scene-space.md` for complex objects, framing, perspective or
precise speed changes, and `docs/quality-bar.md` for print finish and playback defects. Load
`docs/sound.md` only when scoring. [examples.md](examples.md) maps techniques to the shipped
films; open the matching source before inventing a routine that already exists.

Extract subject, feeling, scope and constraints. For an open aesthetic brief, choose a direction
and proceed; if the user asks for proposals, propose first. Write `FILM.md` early: design
decisions, observed references, shot/action plan, user constraints, remaining work.

Plan actions and consequences, not illustrated nouns. Per substantial shot: camera and shot size,
what changes, a readable arrival/hold, and where the eye goes at the next cut. Keep subject
motion, camera motion, transition and atmosphere distinct. `docs/forms/resonance.md` is an
optional call-and-response form (used by `films/lumen` and `films/emergence`); use it only when
asked or deliberately chosen. A single journey through one fixed frame (`films/window-seat`) or
one continuous take of one event (`films/roost`, `films/nonpareil`, `films/eclosion`,
`films/passenger`, `films/standby`) is an equally valid alternative to a montage. Preserve approved direction in revisions.

## 2. Prove the hard part first

Before filling a timeline, inspect real subject references and build one representative hard
frame. For complex art, compare small viewpoint/value thumbnails first. When the request remakes
a known video, measure the file itself (cuts, shots, actions) before choosing what to keep.
Figures get debug views and photo comparisons before shots: likeness judged at recognition scale,
a posable 3D hand per grip, 3D-solved arms (`docs/characters.md`). A subject that recurs at

Report a problem