remotion-reel
Instagram reels rendered entirely from code.
// the problem
A-CAT teaches photography and videography to kids in Acre, and its Instagram needs to speak three languages — Hebrew, Arabic, English — sometimes in the same reel. Drag-and-drop editors make that miserable: every text change means re-nudging keyframes, RTL text fights the timeline, and nothing is reproducible. I'm a filmmaker; I know exactly what motion I want. The question was how to specify it precisely instead of dragging handles until it's close enough.
// what I built
A Remotion project where each reel is a React component rendered to vertical 1080×1920 MP4. Timing is frame math at 30fps. Reusable pieces do the cinematography: a Ken Burns component for zoom and pan on stills, a kinetic typography system, white-flash cut transitions, and a vignette for the film look. Four compositions shipped — from a 7.5-second three-photo reel to a 16-second piece cutting eight animated clips to a full track, including one beat-synced to a drop that starts 38 seconds into the song.
// how the motion works
The words don't fade in. They slam. Each Hebrew word launches from 160px below with a spring tuned to damping: 6, mass: 0.22, stiffness: 390 and overshoot deliberately unclamped — the scale punches past its target to roughly 1.3x before settling, with up to 18 degrees of rotation snapping straight. That overshoot is the whole feel; clamp it and the energy dies.
Arabic lines enter differently: they slide in from 720px on the right — the direction Arabic reads from — with 8px of blur that clears over 12 frames as the text lands. An accent underline draws itself left to right over 18 frames with cubic easing. A trilingual ticker scrolls at 3.2px per frame and wraps seamlessly every 960px using a modulo. Every one of these numbers was tuned by eye, the same way you'd tune a cut.
// what broke
The NGO's photo archive doesn't care about your aspect ratio. One key shot was photographed 90 degrees sideways; instead of re-cropping and losing composition, the component rotates the full landscape frame in CSS — rotate, scale, translate — until it fills the portrait canvas correctly. And RTL needed forcing at every level: direction: rtl plus reversed flex rows for Hebrew word order, explicit right alignment for Arabic. Browsers think they know better. They don't.
// where it is now
In use at A-CAT for its social media, rendered locally by CLI — npx remotion render ShagirimReel — with documentation written so staff can run it without me. Twenty-four source photos and eight animated clips have gone through it across the four compositions so far. When the next reel needs different text, it's a code edit and a re-render, and the motion stays exactly as tuned.
// © eden_hadad · edenhadad.com