pagereel
Render any web page to video. Every video below was rendered by pagereel from the page linked under it, on every push to the repository.
npm install pagereel npx pagereel render page.html --duration 6 -o out.mp4
CSS only
Clock mode · no JavaScript, no pagereel code
Four rows of CSS keyframes. pagereel pauses every animation and places it at each frame's time, so the render is exact and loops.
pagereel render examples/css-only/index.html --duration 6 -o css-only.mp4
Canvas sketch
Clock mode · requestAnimationFrame, performance.now, Math.random
An ordinary animation loop with 1,400 particles. The virtual clock drives its frames and seeds its randomness, so parallel workers produce one seamless video.
pagereel render examples/canvas/index.html --duration 8 -o canvas.mp4
One Shape
Scene mode · pagereel/motion springs, pagereel/audio soundtrack
A 12-second UI film where one shape morphs through five states. The page paints any moment with seek(t); picture and synthesised sound share one beat grid. Unmute it.
pagereel render examples/one-shape/index.html --root . -o one-shape.mp4
Reels from a brief
Claude Code plugin · the reel skill and pagereel mcp
Each reel below was made unattended from the one-line brief under it: the agent read the site with site_kit, wrote the scene, linted it with pagereel check, scored its own frames in rounds and scored the soundtrack. Nothing was touched up by hand.
/plugin marketplace add iliev-blnk/pagereel /plugin install pagereel@pagereel
parlo
“Make a 15–20 s vertical reel for parlo, https://github.com/iliev-blnk/parlo”
Sonnet 5.5 · 55 turns · 3 rounds · check 0 → 0 errors · 5 min
Second run: the first failed when site_kit timed out on the GitHub page, which it no longer does.
grid.md
“Make a 15–20 s vertical reel for grid.md, https://iliev-blnk.github.io/grid.md/”
Sonnet 5.5 · 49 turns · 2 rounds · check 2 → 0 errors · 5 min
holdshort
“Make a 15–20 s vertical reel for holdshort, https://holdshort.pages.dev”
Sonnet 5.5 · 61 turns · 4 rounds · check 2 → 0 errors · 7 min