Remotion Video Tooling and EditKit

My role

I directed AI (Claude Code with the Remotion skills) to build it. I supplied my own gameplay footage, set the editing style (frequent slow, slight zoom-ins on funny moments, punches on impacts) and reviewed every render. AI wrote the code; Remotion itself is a third-party framework. No one else worked on this project.

What it is

This is a Remotion project: video made from React code instead of a timeline editor. It holds a reusable EditKit (camera moves, screen shake, pop captions, vertical reframing), a hand-timed BedWars short, a data-driven shorts generator, and an animated explainer called RoadTo1000.

Clips are first cut with ffmpeg into a public folder. A composition then plays them inside the EditKit camera, lays captions on top, and renders to MP4. The shorts generator reads a JSON file of timestamps and builds many shorts from the same code.

It was used to render six videos in one evening (five vertical shorts and widescreen/explainer work). The tooling is private and nothing from it is claimed as posted; a later rule says sessions deliver the file and never post it.

How it was built

1. Scaffold the projectStarted from the standard 'Create a new Remotion video' template (one git commit, no remote). The template's HelloWorld, Logo and Title compositions are still registered in Root.tsx as Elements.
2. Register compositions in one root filesrc/Root.tsx registers 16 compositions: 3 template elements, RoadTo1000, 5 TikToks-folder shorts (1080x1920 at 30 fps), BedwarsShort (1410 frames, about 47 s), EditKitDemo (180 frames) and 5 RoadTo1000 scene previews.
3. Build the Camera componentsrc/EditKit/Camera.tsx takes a list of moves: slow (eased in-out push-in), punch (fast hit that overshoots then settles, bezier 0.2,1.4,0.4,1) and out (pull back). Each move has a start frame, duration, target scale and optional focus point. The camera keeps its last scale until the next move.
4. Add screen shakeCamera also takes a list of impact frames. After each one it applies a 12-frame decaying sine/cosine shake of up to 14 px.
5. Add captions and vertical framingEditKit/Caption.tsx draws bold pop captions with emoji; EditKit/VerticalShot.tsx reframes 16:9 footage into 9:16 with a blurred fill above and below, as seen in the check sheets.
6. Compose the BedWars short by handsrc/BedwarsShort/BedwarsShort.tsx sequences six moments from one of my own recordings, each with its own camera move and caption, for a 47-second 9:16 short.
7. Make the shorts data-drivensrc/Shorts/AutoShort.tsx reads src/Shorts/shorts.json (851 lines) so each short is just a list of clip timestamps, moves and captions. Five shorts (bw-bow, bw-clutch, fn-ranked, fn-build, ar-extract) were rendered from it.
8. Build the RoadTo1000 explainerA pure-animation video of 645 frames at 1920x1080 made from Intro, Chart, Studio, Goal and Outro scenes plus a shared Backdrop and theme file. The Goal scene animates a progress ring toward a peak constant against a goal of 1000.
9. Check stills before videoFollowing the edit skill, still frames were rendered first (out/check-*.png, bw-*.png, chk-*.png) and viewed, then the MP4 was rendered, then checked for silent audio, black frames and resolution.
10. Render and reviewSix MP4s were rendered into out/ (roughly 43 MB to 111 MB each) and reviewed by me before anything else happened to them.

Decisions and why

Build video in code with Remotion instead of a timeline editor

Camera moves and captions become reusable components, so the same style can be applied to many clips without redoing the work by hand.

Move shorts to a JSON-driven composition

After the first hand-timed short, a data file means a new short needs only timestamps and captions, not new code.

Lock the style to slow push-ins plus punch zooms with shake

That was my chosen editing style for funny gameplay moments; encoding it as three named move types keeps every video consistent.

Render stills and check them before the full MP4

A still renders in seconds and catches caption and framing mistakes before a long render.

Hardest problems

Making a zoom feel natural instead of mechanical

Three different easing curves (gentle in-out for slow, overshoot for punch, fast-out for pull back) and a camera that carries its scale between moves.

Fitting widescreen game footage into a phone-shaped frame

A VerticalShot component that centres the 16:9 clip and fills the rest with a blurred copy; confirmed on the contact sheets for all five shorts.

Catching broken renders (silent audio, black frames)

A delivery checklist from the edit skill: render stills first, then verify duration, audio, black frames and resolution before handing over.

Numbers

Timeline

• 2026-10-11Remotion project created (one git commit, about 19:25 local).
• 2026-10-11EditKit, BedwarsShort, AutoShort shorts and RoadTo1000 built and rendered, with outputs timestamped 19:27 to 21:27.
• 2026-10-12Rule set that sessions deliver edited files and never post game clips.
• 2026-11-05Video work later assigned to a collaborator's side under a collaboration rule.

What I took from it

• Turning an editing style into three named camera moves made later videos fast and consistent.
• Checking cheap still frames before expensive renders caught most mistakes early.
• Data-driven compositions (a JSON file of timestamps) scale better than hand-timing every short.

Links

• Remotion (the framework)