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 ↓

How a film gets made

Brief. Build. Direct.

  1. Brief it

    “A 45-second promo of my site, warm, for the 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.

Why a script beats a recording

The agent brings the reasoning.
playreel brings the hands and the camera.

An AI agent can research your product, find the story, and weigh every cut. What it cannot do is hold a camera steady or move a mouse like a person. playreel adds exactly those two things:

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 vocabulary

Gestures, camera and post —
as words an agent can write.

scroll

momentum on a real decay curve, never a jump

swipe

release velocity handed to the page’s own physics

hover

the page’s genuine :hover — it really reacts

tap

a visible cursor glides, presses, and the press lands

type

human cadence, deterministic to the frame

zoom

punch-in emphasis, keyed to timing marks

device stage

your app inside drawn phones — two screens, one capture

media sync

page videos advance in lockstep with the film

cards

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

score

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

Templates

Every film starts from an archetype.
You never pick one.

The first storyboard decision is what role your site plays in the film. The agent reads your brief and chooses:

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 — opens on a group chat drowning in logistics; the app is filmed live inside drawn phones.
Visual Atlas descent — one continuous flight through 2,814 photographs placed by AI.

Two ways in

Developers script it.
Everyone else asks for it.

For developersnpm, Node, your agent of choice

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

For Claude Cowork usersno terminal, no install — the agent does everything

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.