SHADERERA®Video made in code · v0.1.1AgentsGitHub ↗

SHADERERA

First public release · 2026For experts and their agents2D · 3D · type · GPU

A film is
render(t).

The programmable era of ads.

Source on GitHub ↗

A film is a function from time to a frame.

render(t)t = 0.00 s

A function from time to a frame.

render(t)t = 3.75 s

A function from time to a frame.

render(t)t = 7.50 s

A function from time to a frame.

render(t)t = 11.25 s

A function from time to a frame.

render(t)t = 15.00 s

A function from time to a frame.

You draw with whatever you like. Shaderera asks one thing of the code: the same t always gives the same frame. Everything else in production follows from that.

Code → frameReal source from MATTER

Every frame is
code you can read.

src/v2/film.tsMATTER
async render(t, options) {  const f = frameAt(t, audio, W / H)  const color = matter.render(f, options.frame)  drawType(typeCtx, W, H, t, { form: f.pops[0][1].form, particles: PARTICLES, frame: options.frame })  // Two layers, composited by the host: the matter, and the type over it.  return [    { color, alpha: 'opaque', name: 'matter' },    { color: typeCanvas, name: 'type' },  ]},
Terminal
shaderera check✓ deterministic: 50 timestamps, two orders, inspect + pixelsshaderera still 21 --sheetout/stills/main-21.000.pngout/stills/main-sheet.pngshaderera render9402 frames in 88.6 s on 4 host(s), nvenchost: node v24.14.1 · nvidia blackwell D3D12
MATTER at t = 21 s: particles torn into coloured shards, with the type layer reading SPEED HEAT
render(21.000)→ matter + type, composited

No timeline file, no project format: the film is source code. An agent can read every line, change one, and look at the frame it makes.

Selected films

Three films, made the way a client project is made: an empty project, a brief, an agent and render(t).

01 / 03Opening filmMade with Shaderera

MATTER

  1. MATTER, still 1
  2. MATTER, still 2
  3. MATTER, still 3
  4. MATTER, still 4
  5. MATTER, still 5
  6. MATTER, still 6

One body of particles, no cuts. Every transition is a morph, and the cut lands on the beat because the beat is a function of t.

Length
46.55 s
Rate
60 fps
Placements
16:9 · 9:16 from one render(t)
Drawn with
WebGPU compute, 2M particles
02 / 03Lyric videoMade with Shaderera

P(DOOM)®

  1. P(DOOM)®, still 1
  2. P(DOOM)®, still 2
  3. P(DOOM)®, still 3
  4. P(DOOM)®, still 4
  5. P(DOOM)®, still 5
  6. P(DOOM)®, still 6

A brand film for the end of the world. Swiss type on paper, words that assemble from particles and leave as dust, every word set on the voice.

Length
2:36.7
Tempo
132 BPM
Rate
60 fps
Sync
word times measured from the vocal
Song
Lyrics: osmarks
Opening verse and chorus: MusicPerson
Original song: made with Udio, November 2024
This version: “claude-pop”, made with Suno, posted by deckard (@slimer48484), September 2026
03 / 03Product configurator loopMade with Shaderera

WALLLOOM

  1. WALLLOOM, still 1
  2. WALLLOOM, still 2
  3. WALLLOOM, still 3
  4. WALLLOOM, still 4
  5. WALLLOOM, still 5
  6. WALLLOOM, still 6

A frame-swap configurator rebuilt in code as a film, as real as the product: pictures, mats, moulding and shadow, one order after another.

Length
44 s loop
Rate
30 fps
Placements
web hero, desktop and mobile
Drawn with
its own WebGPU renderer

Why an AI agent writing code is the best way to make a film

Why agents + code make better films01 / 06
src/scenes.tsP(DOOM)
// The scenes: one typographic set-piece per sung line, drawn by the kit in type.ts. Each scene shows// what its line says as a cold technical figure — a loss curve, an org chart, a status page, a spec// sheet, a memo — with the sung words set into it word by word, and the brand's small print beside// it. Scenes return what they ask of the GPU (ink.ts) and how they leave./** A slow push-in about a point, so nothing is ever still. */const drift = (f: F, k = 0.04, x = W / 2, y = H / 2) => {  const s = 1 + k * (f.u / Math.max(0.5, f.dur))  move(f, x, y, s)  move(f, -x, -y)}

You talk. The agent writes the film.

Describe the film in your own words. The agent writes render(t): every frame becomes code it can read, reason about and change.

YouA 15-second 9:16 teaser. The shoe turns once on a dark set, the line lands on the beat, the logo holds at the end.

AgentWritten. 900 frames, every one of them drawn by code you can open.

  1. BRIEF
  2. LOOK
  3. EXACT
  4. REVISE
  5. SCALE
  6. PROVE
  1. You talk. The agent writes the film. Describe the film in your own words. The agent writes render(t): every frame becomes code it can read, reason about and change.
  2. Agents can see what they made. Any moment comes back as a still, a contact sheet or an enlarged detail. The agent judges the frame, not just the code.
  3. Code doesn't drift. The same t always gives the same frame. A change touches only what you asked for, and nothing re-renders differently behind your back.
  4. Notes become edits, not re-dos. Client notes land in minutes. Every revision is saved, and any earlier one is one step away.
  5. One film, every cut. Languages, ratios, headlines and placements are parameters. The agent makes every variant from the same code.
  6. It checks its own work. Text fit, safe areas, blank frames and delivery specs are measured, so the agent tells you what passed and what it could not verify.
No ceilingNo taste lock

Draw with anything.

No scene format.

No timeline file.

No house style.

Code is the source of truth.

Bring any dependency: a font parser, a physics library, a model. Shaderera core measures everything and fails a film only on errors, or on what you declared in requirements.json.

DeliverSpecs are data you bring, never defaults

One film.
Every placement.

shaderera deliver makes one job per variant × locale, renders and reviews each, and checks every file against its placement as ffprobe reads it.

InstallMCP server + agent skills

For experts
and their agents.

The easiest way in: copy one prompt into your agent. It checks your machine, installs what is missing, starts a film project and gives the agent eyes.

Set up with any agent →

Or by hand

01Install the plugin. The skills come with it.

Claude Code

02Any agent with skills.

Codex · Cursor · Gemini CLI · OpenCode

Then ask for the film in your own words
“Make a 15-second 9:16 teaser for our running shoe: the shoe turns once on a dark set, the line Built for the last mile lands on the beat, and the logo holds for the last 2 seconds. Run check, show me a contact sheet, then render.”
  1. writes render(t) in src/
  2. runs check after each edit
  3. looks at stills
  4. reports what it could not verify by looking
FAQ08 answers

Questions.

01What is Shaderera?
Shaderera is a toolkit for making 2D/3D hybrid video in code. A film is render(t), a function from time to a frame. Shaderera checks that the same t always gives the same frame, renders H.264 or ProRes through ffmpeg, shows any moment as a still or contact sheet, reviews the film, and delivers campaign batches per placement.
02Who is Shaderera for?
People who write code to make video, such as motion designers, creative technologists and ad studios, and the AI coding agents they work with. There is no beginner path and no templates: every project starts empty, and every frame is your code.
03What can I draw with?
Anything: Canvas2D, three.js, raw WebGPU, a DOM page in HTML, CSS and React, footage, or your own shaders. There is no scene format, timeline file or house style. Code is the source of truth, and you can bring any dependency.
04How do AI agents use Shaderera?
Through agent skills (a Claude Code plugin, or npx skills add shaderera/shaderera for Codex, Cursor, Gemini CLI and OpenCode) and an MCP server that renders frames as images, inspects state and traces a pixel back to the line of code that drew it. Every command takes --json and returns one envelope with ok, an exit code, and findings that carry t, file:line and a box.
05Why must the same t always give the same frame?
Because then frames can render in any order, on several hosts at once or across machines, and a render can be checked before it runs and repeated exactly later. Shaderera's check renders each frame in two orders and compares them before anything renders for real.
06What formats and placements can it deliver?
H.264 MP4, ProRes HQ and ProRes 4444, and PNG handoffs. A delivery checks each file, as ffprobe reads it, against the placement spec you bring, for example Meta Reels ads, YouTube 1080p, Amazon Streaming TV, EBU R128 or ATSC A/85 loudness, and DOOH screens.
07What do I need to run it?
Node.js 24 or newer and ffmpeg on the PATH. Chrome is needed only for the browser host (DOM and WebGPU in a page). shaderera doctor reports what your machine has and lacks.
08Is Shaderera free?
Yes. Shaderera is open source under the MIT licence: the engine, the starter project, the catalog items and the skills. Use it for anything, including inside a product you sell. Whatever you make with it is yours. Only the name and logo are kept: a product may be built on Shaderera, but not called Shaderera.