playreel

Video as code, for the live web

Prompt a film
of your live product.

Tell your AI agent what the film should say. playreel gives it a camera that is exact to the frame, and the vocabulary of human gestures — scroll, swipe, hover, type, tap — played on your real, live site. What comes back is a script: change anything with a sentence, and every render is identical.

Made by playreel, about playreel — the film is code, so it re-renders itself.

Use it without a terminal ↓

The problem

Every demo video starts dying
the day it’s made.

Your product ships weekly; the film of it doesn’t. A screen recording can’t be edited — only redone, by hand, every release. And handing the mouse to raw automation looks like exactly that. playreel’s answer is a script instead of a recording — the agent brings the reasoning, playreel brings the hands and the camera:

A live site

No mock-ups, no rebuilt clone. The camera points at your real product, wherever it runs — including pages only you can reach.

Frame-exact

A virtual clock advances the page one frame at a time. The same script gives the same film, every time, on any machine — which is why edits stay surgical and re-renders never surprise you.

Human gestures

Films made from raw automation look like automation. The vocabulary moves like a person: momentum, hesitation, a visible cursor, typing with cadence.

The solution

Brief. Build. Direct.

  1. Brief it

    “A 45-second promo of my site, warm, for my LinkedIn feed.” As short or as detailed as you like — the brief is the only thing you have to write.

  2. playreel makes it

    Your agent researches the product, writes the storyboard, and renders the film — with a score composed for its exact length and frame-by-frame verification, if you want them.

  3. You direct

    Watch it, then say what should change — “hold the hero longer”, “open on the problem”. Because the film is a script, the change is surgical: everything else stays exactly as it was.

The vocabulary

Gestures, camera and post —
the playreel vocabulary, for the agent to use.

Tap a word to see it as the agent writes it.

scroll

momentum on a real decay curve, never a jump

decayScroll(2400, { flicks: 1 })
swipe

release velocity handed to the page’s own physics

swipeActs(from, dx, v) // inertia
hover

the page’s genuine :hover — it really reacts

hoverTour(t, pts, ['Pricing', 'Docs'])
tap

a visible cursor glides, presses, and the press lands

tap(page, t, at('#signup'))
type

human cadence, deterministic to the frame

typeActs(text, { cps: 11, seed: 7 })
zoom

punch-in emphasis, keyed to timing marks

zoomTo({ z: 1.35, at: mark })
device stage

your app inside drawn phones — two screens, one capture

deviceStage({ phones: [parent, kid] })
media sync

page videos advance in lockstep with the film

t.cap(n) // <video> seeked per tick
cards

titles typeset by the browser, in your product’s own fonts

cardScene(page, t, 'title.html')
score

music composed for the film’s length, resolving on its last frame

mix({ video, cue, mode: 'end-align' })

Templates

Every film starts from an archetype.
The agent auto-picks — from your prompt and its research.

The first storyboard decision is what role your site plays in the film:

subjectthe product is the story — the classic demo
problemopen on the pain; the product arrives as the answer
identitywho you are — brand, people, proof
sourcethe story lies beyond the site; it supplies the material
datathe artefact your site generates; the camera move is the demo
workflowan app in use, step by honest step

Made with playreel

Real films, real sites.

Travel site promo — a WebGL globe spun by a hand-flick that feeds its own physics.
Family calendar — the live parent and kid apps, and the calendar integration, demonstrated.
Visual Atlas descent — one continuous flight through 2,814 photographs placed by AI.
L&R Ventures — a firm's self-portrait, every card typeset in the site's own fonts and data.

Two ways in

Developers install locally.
Everyone else runs it in the cloud.

Advanced — local installyour CLI agent, e.g. Claude Code, plus npm and Node

A storyboard is a small JavaScript file. This one is a complete film:

import { record, assemble, decayScroll } from 'playreel';

const scenes = {
  hero: async (page, t) => {
    await page.goto('https://your-site.example');
    await t.start();                       // the clock is yours now
    const ys = decayScroll(1400, { flicks: 1 });
    await t.cap(ys.length, { act: (i) => ({ scrollY: ys[i] }) });
  },
};

await record({ scenes, format: 'desktop' });
await assemble({ dir: 'out', timeline: [{ scene: 'hero' }] });

In practice you rarely write this yourself: point your coding agent at the package and the brief — the full vocabulary is documented where the agent will look, in the package README.

npm · GitHub · Apache-2.0

Everyone else — cloud sandboxyour LLM’s own sandbox, e.g. Claude Cowork — no terminal, no install

Once: in Claude’s settings, under Capabilities → Code execution, set Allow network egress to All domains — then start a new Cowork session (the setting takes effect when a session begins).

Then paste this:

Validated on Claude Cowork (desktop app, local mode) in August 2026. Sandboxes evolve — if a step fails, ask the agent for the exact error and to find the way around; that is what it is for.