Remotion

HyperFrames is inspired by Remotion, and the two work the same way underneath: render a web page with headless Chrome, hand the frames to FFmpeg, get an MP4. The difference is the authoring model. Remotion’s bet is React components; HyperFrames’ bet is plain HTML that humans and agents can both write easily.

If your team already writes React, Remotion is the mature end of this idea — years of production use, a studio UI, a player component, and serverless rendering.

Start a project link

  npx create-video@latest
cd my-video
npm run dev          # opens Remotion Studio
  

You need Node and Git; you do not need to install FFmpeg or Chrome. Since v4, Remotion downloads FFmpeg and a Chrome Headless Shell into node_modules on first use.

The whole idea in one hook link

A component is drawn once per frame, and useCurrentFrame() tells it which frame it is. Animation is therefore just a function of a number — no timeline object, no playback state.

  import {AbsoluteFill, useCurrentFrame, useVideoConfig, interpolate, spring} from 'remotion';

export const Title: React.FC<{text: string}> = ({text}) => {
  const frame = useCurrentFrame();
  const {fps} = useVideoConfig();

  const opacity = interpolate(frame, [0, 20], [0, 1], {extrapolateRight: 'clamp'});
  const y = spring({frame, fps, config: {damping: 200}});

  return (
    <AbsoluteFill style={{justifyContent: 'center', alignItems: 'center'}}>
      <h1 style={{opacity, transform: `translateY(${(1 - y) * 40}px)`}}>{text}</h1>
    </AbsoluteFill>
  );
};
  

Compositions are registered once, with their dimensions, frame rate, and length:

  <Composition
  id="Title"
  component={Title}
  durationInFrames={150}
  fps={30}
  width={1920}
  height={1080}
  defaultProps={{text: 'Launch day'}}
/>
  

<Sequence from={90}> shifts a child’s sense of frame 0, which is how scenes get arranged in time.

Render it link

  npx remotion studio                       # preview, scrub, tweak props
npx remotion render Title out/title.mp4
npx remotion render Title out/title.mp4 --props='{"text":"v2.0 is out"}'
  

Because a composition takes props, one component renders a hundred variants — per customer, per release, per language — from the same build. That’s the case Remotion is really built for, and it’s why the render command takes JSON.

For scale, @remotion/lambda splits frames across AWS Lambda functions (npx remotion lambda render, concurrency up to 200); @remotion/player embeds the same composition in your own React app as an interactive preview, so a user can adjust the text and see the result before you spend a render on it.

The licence is the thing to check first link

Remotion is source-available, not open source.

Selling your own derivative of Remotion is not permitted at any tier. This catches teams out at exactly the wrong moment, so settle it before the video pipeline is load-bearing.

Remotion or HyperFrames link

Both turn “make the release video” into a build step. Pick on the licence and on which source format your team — or your agent — will actually maintain.

Next link

An agent is only as useful as what it can reach → Composio