Motion as code with an agent|INEMA.CLUB-PRO

Cinema with AI program · course 3 of 6 · 8 lessons

Motion as code with an agent: the video that comes out of the terminal, the same every time

HyperFrames and Remotion turn HTML and React into MP4. You ask the agent, check it in five frames, tie the piece to a DESIGN.md, add a local voice and captions, and deliver a 15 s opening in 16:9 and 9:16. Everything renders on your machine, with no credits.

Start with lesson 1 Open the kit on GitHub
Dark editing desk with a timeline monitor, a keyboard, and a closed clapperboard; the course title is on the left.
  • 8lessons
  • 24exercises with expected output
  • 16tested blocks in the kit
  • 0credits spent: local render

The lessons

From the mental model to rendering in both formats: determinism, HyperFrames, the request to the agent, the brand, Remotion, libraries, audio, and your own piece.

  1. Lesson 1 · 15 minVideo is code: a composition with time and deterministic renderIn motion graphics as code, the video is a page that knows how to draw any instant. A headless browser asks for frame 0, then 1, then 2, and FFmpeg stitches them into an MP4. If the same input always gives the same frames, you can redo, fix, and version the video like code. In this lesson you prove it on your own machine.
  2. Lesson 2 · 15 minHyperFrames from scratch: HTML with data-* becomes MP4HyperFrames is an open engine from HeyGen that renders HTML into video. Three attributes set the size and duration, a paused GSAP timeline sets the motion, and the check verifies everything before the render. In this lesson you create the project, write the first composition, and walk away with a verified MP4.
  3. Lesson 3 · 15 minAsk the agent: the RISE method and the five-frame testA vague request produces generic animation and ten rounds of fixes. RISE organizes the request into four parts: References, Idea, Style, and Examine. The last one saves you the most: the agent checks five frames and fixes things before you render. In this lesson you write the request and check the result with a command.
  4. Lesson 4 · 15 minBrand system and motion philosophy: the DESIGN.md for your videoWithout a written rule, every request to the agent brings a new color and a different motion, and the pieces don't look like they're from the same brand. DESIGN.md is the file the agent reads before composing: colors, fonts, how things move, and what's forbidden. In this lesson you write yours and fail any off-brand color with one command.
  5. Lesson 5 · 15 minRemotion: frame, interpolate, spring, and when to pick ReactRemotion does the same thing as HyperFrames in another language: each frame is a React component that receives the frame number. interpolate maps frames to values and spring gives physics to an entrance. In this lesson you render the same idea from lesson 2 in React, read the license, and decide when each engine is worth more.
  6. Lesson 6 · 15 minGSAP, D3, Three.js, or Lottie: which library for each pieceEach type of motion has one library that solves it in a few lines and another that fights you. Text choreography is GSAP; a chart that comes from data is D3 drawing and GSAP animating; a 3D scene is Three.js; a ready-made After Effects animation is Lottie. In this lesson you choose by asking the right question, and you render a chart and a 3D scene.
  7. Lesson 7 · 18 minAudio and captions in code: local narration, soundtrack, and karaokeThe same CLI that renders also speaks and listens, all on your machine: it generates the narration with a local voice, transcribes word by word with the timing of each one, and hands that to the composition. In this lesson you build the technical side of sound: narration, a rehearsal soundtrack, and the karaoke caption that lights up each word the moment it is spoken.
  8. Lesson 8 · 20 minYour piece: a 15 s opening in 16:9 and 9:16, rendered and checkedTime to put it all together into a piece you actually use: a 15 s opening with your DESIGN.md, in the two formats social networks ask for. The 9:16 doesn't come from the 16:9 through a render option: it's another composition that reuses the CSS and the choreography. In this lesson you deliver both, checked by the kit, and build the plan with dates.

Who it's for

  1. 1People who already use Claude Code or Codex in the terminal and want video, openings, or motion without a graphic editor.
  2. 2People who make video for a company or a course and need to repeat the same piece with other text, another color, or another format.
  3. 3Devs who want to know when to choose HTML (HyperFrames) and when to choose React (Remotion).

What you'll be able to do

  1. 1Prove that your render is deterministic and find what breaks that.
  2. 2Ask the agent for a composition with the RISE method and check it in five frames before the MP4.
  3. 3Write the video's DESIGN.md and fail any off-brand color with one command.
  4. 4Add narration and karaoke captions made on your machine and deliver checked 16:9 and 9:16 versions.

Before you start

  1. 1Linux or macOS with Node 22 or newer, FFmpeg, Python 3, and git. On Windows, use WSL.
  2. 2About 2 GB free: the render browser (~240 MB), the local voice (~340 MB), and the transcription model (~490 MB) download on first use.
  3. 3Recommended: course 0 (Direction) for the language of shots and light. Sound, editing, and ethics are in course 2.