Videos

Each video is a React component that draws one frame for any moment in time. Nothing records the screen: a script sets the clock to each frame, photographs it and stitches the frames into an MP4 with the soundtrack.

What you get

A video comes as one .tsx file, a small shared kit.ts, a frame.tsx page and render.mjs, plus its .mp3 soundtrack and the images it uses. Open a video on the videos page and use the Source tab. Two videos are free; the others need Pro.

1. Put the files in your project

Copy the video file and kit.ts into one folder, for example components/videos/, and the images into public/videos/assets/. Each video draws on a fixed canvas for its shape (1080 by 1920 for 9:16, 1920 by 1080 for 16:9) and takes t (seconds), the frame size w and h (for the videos that come in more than one shape) and its copy as props:

<LaunchReel t={4.2} words="landing page, dashboard" brand="Your brand" url="yourbrand.com" />

2. Add the frame page

Save frame.tsx as a page, for example app/video-frame/page.tsx, and swap in the video you want. It draws the video full-window and exposes window.__setT(seconds), which is how the script moves the clock.

3. Render

Install Playwright once, make sure ffmpeg is on your PATH, start your app and run the script. The launch reel and the app walkthrough are 12 seconds, the others are between 5 and 16; each video's page says how long it is.

npm i -D playwright
npx playwright install chromium
node render.mjs --url http://localhost:3000/video-frame --duration 12 --audio launch-reel.mp3 --out launch-reel.mp4

# a video that comes in more than one shape: pick it with --format
node render.mjs --url http://localhost:3000/video-frame --format 16:9 --duration 12 --audio install-seconds.mp3 --out install-16x9.mp4

The default output is 1080 by 1920 at 30 frames a second, the shape Instagram Reels, TikTok and YouTube Shorts want; --format takes 9:16, 4:5, 1:1, 16:9, app or 21:9 for the videos that support them (the Hero Loop has no soundtrack, so leave out --audio). Use --width 540 for a quick draft; every frame is rendered, so a full-size render takes a few minutes.

Make it yours

Every word and colour is a prop, so you can change them in code or live on the video's Customize tab first. The build prompt on the Prompt tab rebuilds the whole video from a description if you would rather start from scratch with your own coding agent. The soundtrack is cut to the picture, so if you change the timing, change the music with it.