gordensun/react-bits-video

motion-video-maker is a toolkit for turning a single HTML file into a finished animated MP4 video. It is packaged as a Skill, which is a folder that AI coding agents such as Cursor, Codex, and Claude Code can load into their skills directory. Once installed, the agent reads the skill's instructions and can write a composition, render it, and hand back a finished short video on request. The author describes the project as a distillation of three existing tools: react-bits for animation pieces, Remotion for deterministic video output, and Hyperframes for HTML-native composition. The video itself is a normal HTML page. A stage element declares the resolution, frame rate, and duration. Inside it, the author drops scenes with data attributes that say when each piece starts, how long it lasts, and which animation to play. The runtime ships seventeen text animations like split, blur, typewriter, decrypted, and an odometer-style count-up, eleven Canvas backgrounds such as particles and starfield, seven WebGL shader backgrounds like liquid-ether and lightning, twenty-four entrance presets for elements, three element effects, eight scene-to-scene transitions, and spring physics easing curves. A readability stack of CSS classes makes text legible on top of busy shader backgrounds. Rendering is deterministic. A Node script opens the HTML page in headless Chromium through Puppeteer, asks the page to seek to each frame by index, screenshots the viewport, and pipes the image sequence into FFmpeg to encode an MP4. Because every frame is computed from the same timeline state, two renders produce identical output. For humans, npm install pulls in Puppeteer, a font install script downloads twelve open-source Chinese fonts, and helper scripts scaffold a new video, run a live preview server, and produce the final MP4. Two example reels are included: a 42-second feature tour called time-flies-v2 and a 40-second technical retelling called raycast-deep-dive-v4.