R02 · JQ AI Skills · JQ AI SYSTEMS
Paper Terminal
A terminal drawn as paper prints a document, folds along its sections into a card, and files the card on a shelf of many.
26.0s · 1920×1080 · 30fps · one take
The film for JQ AI Skills. A paper terminal types the same long prompt for the 103rd time, then prints the brand-voice-linter skill, folds it along its four steps into a card and files it on a shelf of all 47 skills.
An original score composed in code, built from paper and keyboard sounds. No spoken dialogue. On-screen text carries the story.
scene breakdown · select a scene to play
The prompt
The brief I gave Claude Code, with the HyperFrames skills installed, to start this film. Approvals and fixes came after, but this is where it began.
Make a 26-second 1920x1080 film in HyperFrames for JQ AI Skills, my library of reusable AI skill folders.
Story: a terminal drawn as a sheet of warm off-white paper. The same long brand-voice prompt has been typed on
Monday and Tuesday and is typed again today ("typed 103×"). Then "$ /skill brand-voice-linter". A roller
prints the real SKILL.md down the sheet in four sections: 00 Load the voice guide, 01 Scan, 02 Report,
03 Fix (only when asked). The sheet folds like an accordion along those four sections, with paper shading and
a teal crease on each fold, until only a strip is left. A card label stamps onto it, it flies onto a shelf,
and the camera pulls back to all 47 real skill names as paper cards. Five cards lift as they are called.
End on "Repeatable AI workflows, packaged as skills." and the repo URL.
Technique: CSS 3D only. Four strips nested inside each other, each hinged at its parent's bottom edge, so a
zigzag fold is three rotateX values. One painter function writes every element from time; no tweens fight.
The packet's flight target is computed from the shelf's own camera transform, so it lands exactly in its slot.
Brand: #111110 background, #F3F1EC paper, #0E0F0F ink, #00A89D teal, Geist, Geist Mono, Instrument Serif.
Score: compose it in code with numpy: key ticks, a printer roll, paper creases, a stamp, a slide, a warm
F major bed and a chime for each call, from the same timing table.Remix it
Swap the parts in braces and paste it in. Some starting points:
- A recipe that folds into a card in a recipe box.
- A contract that folds into an envelope in a filing cabinet.
- A lesson plan that folds into a course catalogue.
- A bug report that folds into a closed ticket on a board.
Make a {duration}-second {width}x{height} film in HyperFrames.
A terminal drawn as paper shows {the_repeated_task}. Then "{command}". A roller prints {document} in
{n} sections: {section_titles}. The sheet folds along those sections into a card labelled {card_label},
which files itself on a shelf of {collection}. Pull back to the whole shelf, lift {k} cards as they are used,
and close on {final_line}. CSS 3D nested hinged strips, one painter writing everything from time.
Palette: {palette}. Fonts: {fonts}. Score composed in code with paper sounds, synced to the picture.Ingredients
- stack
- HyperFramesHTMLCSS 3D transformsGSAPPython (score)
- length
- 26 s · 1920×1080 · 30 fps · one take
- 3D
- CSS only: four nested hinged strips, no WebGL
- palette
- #111110 · #F3F1EC · #0E0F0F · #00A89D
- type
- Geist · Geist Mono · Instrument Serif
- sound
- Paper and keyboard sounds composed in Python, -17 LUFS
- render
- About a minute, no GPU needed
- cost
- €0, all free and open source
how it's built
01 · 00:00
A terminal that is paper
The sheet is four strips with the terminal text laid over them. The prompt types from a fixed string, so every frame is exact, and the terminal scrolls like a real one.
02 · 00:06
Print, then fold
A roller moves down the sheet: terminal text is clipped away below it and the SKILL.md sections appear above it, one per strip.
03 · 00:08
An accordion in three numbers
Each strip is nested in the one above and hinged at its top edge, so the zigzag fold is three rotateX values, with shading and a teal crease from each strip's angle.
04 · 00:10
A card, not a cut
The stamp on the folded packet is the shelf card itself, scaled up 2.53 times, so the hand-off from packet to shelf is invisible.
05 · 00:13
A camera you can do maths with
The shelf is one layer moved by translate and scale. Each frame the packet aims at its slot under that same transform, so it lands exactly while the camera is still moving.
06 · 00:17
Sound from the same clock
Key ticks, a printer roll, one crease per fold pitched up each time, a stamp, a slide, a building pulse and a chime per called skill, all generated in Python.
gotchas
- Text that ends in an ellipsis on purpose still fails a layout check if it overflows. Shorten it instead.
- Nested preserve-3d strips need backface-visibility hidden on both faces, with the back face pre-rotated 180 degrees, or the folded sheet shows mirrored text.
- Keep the final camera slightly wider than the shelf so the HUD lines never sit on top of the cards.
source
Take the whole project
MIT for the code, composition and score. The JQ AI SYSTEMS logo and name are not included in the licence.