A Claude Code skill built on HyperFrames that reads your local session history, picks a typical session and animates it as a watercolor short of Claude at a desk, using your real messages and an original score.
By Jake Moran @jake11moran Sep 24, 2026
## Workflow
1. **Setup:** `sh scripts/setup.sh` (once).
2. **Ask first.** Tell the user you'll read your local history with them to find the session, and wait for a yes.
3. **Harvest:** `python3 scripts/harvest.py --project <their project folder> --out <scratch>/candidates.json` prints
the routine and lists sessions, most typical first. `--session <id>` (with the same `--project`) prints one in
order, with local times and your replies. Per [references/sources.md](references/sources.md).
4. **Scaffold:** `node scripts/new-project.mjs <dir>`. Everything you write from here lives in `<dir>`.
5. **Story:** take a typical session and write `<dir>/story.json` beat by beat, in the order it happened, with each
beat's real time, per [references/story.md](references/story.md). The user's lines are verbatim spans; your replies
are your own words from that session. Set `screen` to what their work looks like, and pick the ending their
sessions have. `node scripts/schedule.mjs <dir>` checks it: run it after every edit.
6. **Room:** fill the slots from what you know about the user, per [references/room.md](references/room.md). Draw a
custom prop in `<dir>/scenes/props-custom.js` when the library has nothing true to them. If you are not Claude,
draw yourself: [references/cast.md](references/cast.md).
7. **Privacy gate:** show the user one table of every on-screen line (hook, nameplate, each quote, each reply, each
prop and why), each with its source. Take their edits, get an explicit yes, then set `"approved": true`. Until
then every frame carries a DRAFT stamp.
8. **Design pass:** run the `snapshot` command `schedule.mjs` prints. Look at every frame: quotes legible, props where
they belong, nothing covering a message. Show the user the contact sheet.
9. **Score:** write `<dir>/score/score.py` with your own theme, key and palette, per
[references/score.md](references/score.md). Then `sh <dir>/score/build.sh`. It fails on dead air.
10. **Render:** from `<dir>`: `npx --yes hyperframes@0.8.71 check`, then
`npx --yes hyperframes@0.8.71 render --fps 24 --crf 12 -o renders/session-story.mp4`.
11. **Check the render:** its length must match `schedule.mjs`. Pull a frame at each key moment
(`ffmpeg -ss <t> -i renders/session-story.mp4 -frames:v 1 renders/check-<t>.png`) and look at them. Then hand
it to the user to watch with sound. From Jake Moran's repo, under the Apache-2.0 license.
Found via Prompt Motion.
Create a single self-contained HTML file that renders an animated pixel art wizard casting a spell, using vanilla JavaS…
Recreate Rick Astley’s unmistakable dance as an HTML animation about one minute long, made from bold, moving brushstrok…
Workflow Quick discovery. Just enough to ask good questions: rules files, tokens, components, the logo (and any mascot…
A robot realises he is stuck in an AI-generated world and tumbles through 12 art styles, from 8-bit to claymation to pe…