remotion-dev

How to Create Videos With Google Antigravity CLI --- title: How to Create Videos With Google Antigravity CLI published: true description: Google Antigravity can direct video projects when paired with video software. Here is the CLI setup I'd use, an example brief and the limits. tags: ai, tutorial, video, antigravity --- Google Antigravity can direct a finished video from a written brief, as long as video software handles the frames. It plans the scenes, edits the project files, runs the render command and checks what came back. Paired with a studio, that loop ends in an MP4 you can watch. CoAnimator is the studio in this guide. It keeps the video as editable project files, previews changes live and renders on your machine, while Antigravity does the directing and the revisions. The one catch is setup: Antigravity opens as a terminal tab with its own approval flow, and the CoAnimator skill has to be added by hand. The rest covers the setup I'd use, an example brief, editing footage you already have, and the places this falls short. How to set up Google Antigravity CLI with CoAnimator Antigravity is four products: the app, the IDE, the CLI and the SDK. This setup uses the CLI, so check that you aren't in the standalone IDE. Pick any model your CLI offers. The workflow doesn't depend on a specific one, and what the agent can edit depends on your source material. 1. Install CoAnimator and the coa command. Open the app, set up the media tools (rendering needs FFmpeg and FFprobe), then go to Settings → General → Command line & agent skill and install coa. In a fresh terminal: coa --help ffmpeg -version ffprobe -version On Windows PowerShell, run coa.cmd --help instead. 2. Install the Antigravity CLI and sign in. The documented command pipes a remote script straight into your shell, so I'd download it, read it, then run it: curl -fsSL https://antigravity.google/cli/install.sh -o install.sh less install.sh bash install.sh On Windows the documented one-liner is irm https://antigravity.google/cli/install.ps1 | iex. The same advice applies: save the script with -OutFile, read it, then run it. The binary is agy, not gemini or antigravity. Run it once to finish Google's sign-in. That account has nothing to do with your CoAnimator licence. 3. Pick Antigravity in the agent picker. CoAnimator opens agy in a terminal tab inside the project folder. You get Antigravity's own interface, model picker and history, while CoAnimator supplies the folder and the window. CoAnimator's Antigravity guide covers the details. 4. Add the skill. A skill is a folder with a SKILL.md of instructions that the agent reads when a task matches. Google's skills codelab shows the format. CoAnimator's installer covers only Claude Code and Codex, so for Antigravity I'd download SKILL.md from that page and place it here: .agents/skills/coa-cli/SKILL.md .agents/skills/ is the current default workspace path, and the older .agent/skills/ is still read. Global skill folders differ between the app, IDE and CLI, which is why I prefer a project-local copy. Run /skills in the CLI to confirm it loaded, then start a fresh session. The skill teaches commands and conventions. It doesn't install coa or sign you in. 5. Run a smoke test before any creative work. > Inspect this CoAnimator project, confirm which tools are available, and explain how you would render it. Do not change the scenes yet. A good answer names the project folder and the coa render command. The agent should also read the app's bundled docs first, since that is where its project conventions live. How to brief Antigravity: an example plan for a 20-second video Pick a change a viewer can see. "Faster deploys" gives an agent nothing to direct. "A dry-run flag that previews changes before anything ships" has a command, an output and a payoff. The example is hypothetical: a 20-second clip announcing release 2.4 of a CLI tool called shipit. Swap in your own. Gather three files and name them by job: dry-run-demo.mp4 (a recording of the command), release-notes.md and brand-notes.md (fonts and colors). The 0.7.2 plugin list has no desktop screen recorder, so I'd record with a separate tool. If an image is only a style reference, say so in the brief, or the agent may try to rebuild it as a screen. Ask for a plan before any animation: > Plan a 20-second CoAnimator video announcing shipit 2.4 to existing users. One message: shipit deploy --dry-run shows what would change before anything ships. > > Use dry-run-demo.mp4 for the terminal action. Take the claim from release-notes.md and add no others. Read brand-notes.md for fonts and colors. Use 16:9 and make it readable without sound. > > Return a scene plan with timings, on-screen text, and which part of the recording each scene uses. List anything the recording does not show. Wait for my approval before building. The last two instructions do the most work. A plan takes seconds to fix and a finished animation doesn't. Asking for what the recording doesn't show gives the agent permission to report a gap instead of inventing output. A plan for this clip might look like this: - 0 to 4 s: a title card that names the flag - 4 to 11 s: the command running, zoomed to the line being typed - 11 to 17 s: the preview output, held long enough to read - 17 to 20 s: the version number and the upgrade command Terminal text is the weak point. A small monospace line that reads fine in the editor can turn to mush at delivery size. Before any motion, I'd approve three stills (title, command, output) at the size the video will play. After that, ask for movement with a reason: hold still while the output is readable, bring a caption in when its line appears, and zoom only to isolate one line. Narration comes last, once the sequence works muted. CoAnimator's plugin docs list an ElevenLabs plugin for it, which needs your own key. How to edit existing footage with Antigravity Tell the agent what has to survive the cut, and give boundaries instead of adjectives: > Cut dry-run-demo.mp4 down to the command and its output, source 00:12 to 00:31. Remove the setup typing and any idle pause. > > Keep the flag, the full preview output and the final prompt visible. Add a short title before the action. Keep the original recording as a source asset. > > Propose the cut points before applying them. Do not speed up the output section. Quote timestamps from the original file, and name the scene for anything after a cut. Once the opening is trimmed, 00:22 in the source and 00:22 in the export are different moments. An imported MP4 is flat. Trimming, cropping and overlays work, but text baked into the recording stays baked in, so a wrong terminal line means a new capture. Titles the agent animated itself remain editable. How to render and check the final MP4 A preview helps you decide. The exported file is what people watch. Ask the agent to render, or run it from the folder that holds your project: # macOS or Linux coa render ./shipit-2-4 --resolution 1080p --quality high --out ./shipit-2-4.mp4 # Windows coa.cmd render .\shipit-2-4 --resolution 1080p --quality high --out .\shipit-2-4.mp4 The coa reference lists every flag. The command exits 0 on success and 1 on failure, which makes it usable in a script. Free exports are 720p with a watermark, and the licensing page lists what a paid licence changes, so --resolution 1080p needs one. A render the agent says it started is not a finished file. Ask for the output path and any errors, then open the MP4. Check the first frame, the command, the output and the last frame, once with sound and once muted. Encoded files can differ slightly across machines, so judge the file you actually exported. Keep the project folder and its media beside the approved version, because an MP4 can't carry the editable structure. How to update the video when your product changes The first export is not the end of the project. Because it is a folder of plain files, I'd treat a product change the way I'd treat a code change. When shipit 2.5 alters the preview output, I'd re-record that one clip, ask the agent to swap it into the output scene, and re-render. The rest of the video stays as approved. The files also diff, so the video change can sit in a pull request next to the code change it describes. The same files mean switching agents later shouldn't need a rebuild, though I'd confirm that on a small project before relying on it. Limits of making videos with Antigravity - Quality follows direction. Output depends on the agent, the prompt and how much direction you give. Vague briefs produce vague videos, and learning to direct takes more practice than dragging clips. - Plugins assume Claude Code in places. Some plugin actions need it and its matching skill, so test any plugin from an Antigravity tab before the brief depends on it. - Gaps in 0.7.2. The docs list no AI avatar generation, no hosted rendering and no desktop screen recorder. There are also no built-in viewer analytics, so tracking who watched needs a separate tool. - Separate bills. Your Google plan and any plugin providers charge you directly. - Local rendering doesn't guarantee a fully private workflow. Editing and rendering run on your machine, but prompts, frames and files you hand to an agent or plugin can be sent to that provider. Antigravity, Remotion or a chat agent? Remotion is the other route you'll see in Antigravity video tutorials. It publishes agent skills in the shared skills format that Antigravity can load, and videos are React code rendered by the Remotion CLI or on AWS Lambda. That suits a video living inside a React product, or batches rendered from data. It is free for individuals and companies of up to three people, and larger companies need a company licence. I'd choose it when the video is a feature of the product, and a studio when one person is directing and revising a single video. For CoAnimator's own permission prompts and change receipts, a chat agent such as Claude or ChatGPT gets them and the terminal tab doesn't. I'd choose Antigravity when the team already pays for Google's plans and works in agy daily. Next step: a video for every release Once one video works, the same setup can run on a schedule. coa render runs without opening the editor and exits 0 or 1, so a release job can render the announcement clip in the same pipeline that builds the binary, and a failed render fails the build instead of shipping a stale video. Linux runners need a display server such as xvfb-run, and the agent step still needs a signed-in Antigravity session, so I'd try a weekly job on your own machine before moving it to CI. A launch video that is rebuilt with every release stops being a one-off asset and becomes part of shipping. To find out whether that is worth it for you, make one short clip, inspect the exported file, then time how long the second video takes compared with the first. That gap, not the first export, is the real test of this workflow.

Suffit d'ajouter un prompt au lien github pour avoir se résultat Commente prompt et je te l'envoie en mp remotion-dev/skills

@Takardii99 Sa permet à Claude de générer des vidéos mais il le fait payer alors que c’est juste sa qui est disponible gratuitement remotion-dev/skills

Faire payer quelque chose qui est gratuit et s’en approprier le travail 🧐 Sont dossier Claude qui vends 49€ il est gratuit ici : remotion-dev/skills

remotion-dev/skills facturer 49$ pour quelque chose qui est sur github c'est insolent

# I Turned My GitHub Year Into a Retro Game — Rendered Locally With React and Remotion Every December I see those "GitHub Wrapped" posts and feel the same mix of curiosity and discomfort: what exactly are those services doing with my token? Where is my contribution data going? Why do I have to wait in a queue for someone else's server to render a video about my year? So I built my own, entirely on my machine. No cloud, no upload, no third-party service. Just Node, React, and a headless Chrome. This is the story of building Anima GitHub Local — and everything I learned from the open source ecosystem that made it possible. --- What it does You run npm run dev, open http://127.0.0.1:4317, type your GitHub username, pick a theme, and click render. A few minutes later you have a ~53-second H.264 MP4 on your disk. The video is styled as a retro game. Your contributions become in-game events: - Space: your ship crosses each month's sector destroying enemy ships, asteroids, and aliens. More contributions = more enemies, higher speed. - Metroid: a space hunter descends through a subterranean maze with lava, water, and diamonds, fighting monsters that vary each month. - Pitfall!: an explorer runs through the jungle jumping over jaguars, boars, caimans, and pit holes collecting treasures. The score increments in real time as events happen — it never teleports to the final total. At the end, fireworks go off and the message "keep the open source always alive at your heart, give first." types itself letter by letter. --- The stack Everything I used is open source: Remotion — the core. Remotion is a framework by Jonny Burger that lets you write videos as React components. Each frame is a React render; useCurrentFrame() is your timeline. It handles bundling (Webpack), rendering (headless Chrome via Puppeteer-core), and encoding (ffmpeg). I'd never have been able to build this without it. The @remotion/transitions, @remotion/player and @remotion/renderer packages are all part of that ecosystem. React 18 — the UI layer, both for the video composition and for the landing page. The same AnimaGithub component renders in the browser preview (@remotion/player) and gets passed to renderMedia for the actual MP4. Vite — the landing page bundler, running as middleware inside Express in dev mode. Zero separate ports. Express — the local server. Handles the render queue, serves the API, and streams the finished MP4. TypeScript — strict mode throughout. The shared types between server, video, and web layers (GitHubStats, GameTimeline, Beat) are what kept this project from becoming a mess. Atkinson Hyperlegible by the Braille Institute — the narrative font. It was designed specifically for low-vision readers: maximum letter differentiation, generous spacing. It reads perfectly at 40px over a busy game background. Orbitron, Press Start 2P, VT323 — the display fonts for HUD labels and score. All via @fontsource, all SIL OFL licensed. The GitHub GraphQL API does the heavy lifting for contributions — the contributionsCollection query is remarkably complete. I also use the commit search REST endpoint to compute productivity by hour of day. --- The architecture that surprised me The most interesting design decision was the game timeline engine in src/video/game/timeline.ts. The problem: contributions are just numbers. January had 38 commits, February had 3. How do you turn that into a video that doesn't stall in the quiet months and doesn't feel cramped in the busy ones? The solution: proportional frame allocation weighted by √contributions. Each month gets between 60 frames (2s) and 150 frames (5s), distributed so that the busiest months get more screen time, but not so much that quiet months feel skipped. const weights = active.map(({ month }) => Math.sqrt(month.count + 1)); Square root instead of linear — because a month with 100 commits shouldn't get 10× more time than one with 10 commits. It should feel about 3× more intense. Then I built a deterministic PRNG seeded by login:year:theme:anima-0.1.1. Every spawn position, every enemy trajectory, every firework launch delay is computed from that seed. Same input always produces the same video. No Math.random() anywhere in the render path. --- The pixel art system All sprites are original. I was inspired by the aesthetic of those classic games but I couldn't use their actual assets — legally or ethically. So I drew everything in the same grid format: export const COIN: Sprite = { palette: { c: "#8a5a12", y: "#ffd23f", w: "#fff6c9" }, rows: [ "..cccc..", ".cyyyyc.", "cyywwyyc", "cywyywyc", // ... ], }; Each character in the string is a pixel. The PixelArt component maps them to div elements in a CSS grid. Scale 6 = each "pixel" is a 6×6 CSS square. Deterministic, serializable, easy to edit in any text editor. The chiptune soundtracks are synthesized the same way — in scripts/generate-audio.mjs, entirely in JavaScript, using square waves, triangle waves, and noise functions. No samples. No libraries. You can read exactly how the Pitfall melody is constructed. --- What I learned from the community I'd be lying if I said this was built in a vacuum. Several open source projects and people shaped how I thought about this: github-unwrapped-2023 by the Remotion team — this is the reference that proved the idea was viable. Their architecture of fetching GitHub stats and rendering them with Remotion is what I followed. I read their code for hours. My implementation is different (local-first, game-style instead of infographic, no cloud dependencies), but their open approach to showing the full codebase made it possible to learn the pattern. Jonny Burger's writing on the Remotion blog — specifically the posts about determinism in video rendering. The rule "never use Date.now() or Math.random() inside a Remotion composition" is his, and it's the single most important constraint in this entire project. Fireship's video on Remotion — honestly where I first saw that writing videos in React was a real thing and not a toy. The GitHub GraphQL API documentation is genuinely excellent. The contributionsCollection type, the contributionCalendar, the commitContributionsByRepository with language breakdown — whoever designed that API made building tools like this accessible. --- Running it yourself git clone https://github.com/adalbertobrant/animagit cd animagit npm install npm run setup # copies fonts, synthesizes audio, downloads Chrome headless npm run dev # → http://127.0.0.1:4317 No token needed to try it — there's a real snapshot included for my profile. With a GitHub token in .env you can render for any public profile. CLI render: npm run render -- --username YOUR_USERNAME --theme pitfall --height 1080 The video lands in out/YOUR_USERNAME-pitfall-2026-1080p.mp4. --- What's next A few things I'd like to explore: - More themes — a Doom corridor, a Zelda overworld, a Sonic loop. - Multiplayer comparison — two users side by side, their contributions competing. - Better sprite animation — true frame-by-frame walk cycles instead of CSS skew simulation. The PixelArt component supports multiple frames already; I just need to draw them. - Web version — a SaaS variant that renders on a server, for people who don't want to run Node locally. If you build something with this, or fork it into your own theme, I'd love to see it. Open an issue, send a PR, or just post your video. The whole point is that your data stays yours. Keep the open source always alive at your heart, give first. --- Source: adalbertobrant/animagit Built with: Remotion · React · Vite · GitHub GraphQL API · Atkinson Hyperlegible

I decided to give Remotion a try for agentic video production - it's pretty good! (Paired with Gemini TTS below) (and if you're a cyclist on Strava - do try aeyu.io!) remotion-dev/remotion

Claude W/ Remotion, animate skill, and PixelLab.ai for quickly putting together cutscenes. Hi, not sure if people are already using this, but I wanted to share a proof of concept I created recently combining AI video editing with pixel assets for cutscene creation. I gave Claude an initial prompt detailing the specifics of the setting in question, a planet from one of my games, and instructed it to use Remotion in conjunction with generated assets to make this video. Claude created a plan with individual cuts and timings based on what I asked for, incorporated my feedback, and prepared mockups for the pixel art generation, then edited together the assets using Remotion. Each cut gets its own .tsx file and the score was built by Claude using Python. My prompts were not particularly deep here: "I want to have this cloud session create animated content using remotion, animated via javascript cth9191/animate, asset generation via pixellab.ai midjourney & chatgpt pro. The goal is to produce personal animations and video content. Multiple topics and genres will be covered, but the initial test project is to create a short animation with a backing audio track. More details after repo and dependencies are configured." "remotion-dev/remotion Providing a link to the remotion repo if needed" and finally: "For the test run, the setting is on a planet that is 100% covered in city. A megalopolis planet called New Calidonia. This animated intro sequence should demonstrate daily life on the planet, describing both the fantastical elements and the mundane. A dog man and a robot argue over a parking space, a massively hairy alien hangs laundry on a balcony, an empty playground is built around a hologram of a tree. Each shot should be simple, short, and have some camera movement involved. Pixel art aesthetic is mandatory."

AI 모션그래픽 저장소 20개 모음 모션그래픽 제작에 쓰는 저장소 20개를 기획·에셋·움직임·입체 장면·출력 순서로 정리했습니다. 필요한 도구만 조합하고 각 저장소의 설치 안내와 이용 조건을 확인하면 됩니다. 도구·자료 주소 penpot/penpot excalidraw/excalidraw fontsource/fontsource lucide-icons/lucide svg/svgo lovell/sharp airbnb/lottie-web rive-app/rive-wasm motiondivision/motion greensock/GSAP juliangarnier/anime theatre-js/theatre mrdoob/three.js pmndrs/react-three-fiber pmndrs/drei pmndrs/postprocessing remotion-dev/remotion remotion-dev/skills FFmpeg/FFmpeg Vanilagy/mediabunny #모션그래픽 #개발도구 #AI활용 #투더제이 [en-US] 20 AI Motion Graphics Resources Collection We have organized 20 repositories used for motion graphics production in the order of Planning, Assets, Motion, 3D Scenes, and Output. Simply combine the tools you need and check the installation instructions and terms of use for each repository. Tool/Resource Addresses penpot/penpot excalidraw/excalidraw fontsource/fontsource lucide-icons/lucide svg/svgo lovell/sharp airbnb/lottie-web rive-app/rive-wasm motiondivision/motion greensock/GSAP gi thub.com/juliangarnier/anime theatre-js/theatre mrdoob/three.js pmndrs/react-three-fiber pmndrs/drei pmndrs/postprocessing remotion-dev/remotion remotion-dev/skills FFmpeg/FFmpeg Vanilagy/mediabunny #MotionGraphics #DevelopmentTools #AIUtilization #ToTheJ

개발자들이 선택한 깃허브 디자인·모션 도구 TOP 14 웹사이트 UI 디자인부터 인터랙션, 모션그래픽, 3D 애니메이션까지. 깃허브에서 인기 있고 실제로 쓸 만한 AI 디자인 스킬과 도구 14개를 네 챕터로 정리했습니다. 필요한 챕터만 골라 보세요. 00:00 인트로 00:19 CH1 AI 디자인 스킬 00:19 프론트엔드 디자인 (Anthropic) 00:45 UI UX 프로 맥스 01:11 테이스트 스킬 01:33 홀마크 01:57 임페커블 02:28 CH2 작업공간 02:31 구글 스티치 02:55 오픈디자인 03:19 CH3 웹 인터랙션 03:22 에밀 코왈스키 애니메이션 스킬 03:49 리액트 비츠 04:09 키프레임 갤러리 04:23 CH4 모션그래픽 04:27 리모션 04:44 하이퍼프레임즈 05:06 클로드 모션 05:32 어썸 오푸스 5.5 비디오스 05:51 마무리 ▶ 영상 속 도구 링크 [CH1 AI 디자인 스킬] 프론트엔드 디자인: github.com/anthropics/skills/tree/main/skills/fro… UI UX 프로 맥스: nextlevelbuilder/ui-ux-pro-max-skill 테이스트 스킬: Leonxlnx/taste-skill 홀마크: Nutlope/hallmark 임페커블: pbakaus/impeccable (impeccable.style) [CH2 작업공간] 구글 스티치: stitch.withgoogle.com 오픈디자인: nexu-io/open-design [CH3 웹 인터랙션] 에밀 코왈스키 스킬: emilkowalski/skills 리액트 비츠: reactbits.dev (DavidHDev/react-bits) 키프레임 갤러리: keyframe.gallery [CH4 모션그래픽] 리모션: remotion.dev (remotion-dev/remotion) 하이퍼프레임즈: heygen-com/hyperframes 클로드 모션: claude.com 어썸 오푸스 5.5 비디오스: yihui-dev/awesome-opus5-5-videos [en-US] TOP 14 GitHub Design & Motion Tools Chosen by Developers From website UI design to interactions, motion graphics, and 3D animation. We have organized 14 popular and practically useful AI design skills and tools from GitHub into four chapters. Pick only the chapters you need. 00:00 Intro 00:19 CH1 AI Design Skills 00:19 Frontend Design (Anthropic) 00:45 UI UX Pro Max 01:11 Taste Skills 01:33 Hallmark 01:57 Impeccable 02:28 CH2 Workspace 02:31 Google Stitch 02:55 OpenDesign 03:19 CH3 Web Interactions 03:22 Emil Kowalski Animation Skills 03:49 React Beats 04:09 Keyframe Gallery 04:23 CH4 Motion Graphics 04:27 Remotion 04:44 Hyperframes 05:06 Claude Motion 05:32 Awesome Opus 5.5 Videos 05:51 Wrap-up ▶ Links to tools in the video [CH1 AI Design Skills] Frontend Design: github.com/anthropics/skills/tree/main/skills/fro… UI UX Pro Max: nextlevelbuilder/ui-ux-pro-max-skill Taste Skills: Leonxlnx/taste-skill Hallmark: Nutlope/hallmark Impeccable: pbakaus/impeccable (impeccable.style) [CH2 Workspace] Google Stitch: stitch.withgoogle.com Open Design: nexu-io/open-design [CH3 Web Interactions] Emil Kowalski Skills: emilkowalski/skills React Bits: reactbits.dev (DavidHDev/react-bits) Keyframes Gallery: keyframe.gallery [CH4 Motion Graphics] Remotion: remotion.dev (remotion-dev/remotion) Hyperframes: heygen-com/hyperframes Claude Motion: claude.com Awesome Opus 5.5 Videos: yihui-dev/awesome-opus5-5-videos [id] 14 Alat Desain & Motion GitHub Pilihan Para Developer Mulai dari desain UI situs web hingga interaksi, grafis gerak, dan animasi 3D. Kami telah mengorganisir 14 keterampilan dan alat desain AI yang populer dan praktis dari GitHub ke dalam empat bab. Pilih hanya bab yang Anda butuhkan. 00:00 Pendahuluan 00:19 CH1 Keterampilan Desain AI 00:19 Desain Frontend (Anthropic) 00:45 UI UX Pro Max 01:11 Taste Skills 01:33 Hallmark 01:57 Impeccable 02:28 CH2 Workspace 02:31 Google Stitch 02:55 OpenDesign 03:19 CH3 Interaksi Web 03:22 Keterampilan Animasi Emil Kowalski 03:49 React Beats 04:09 Galeri Keyframe 04:23 CH4 Grafis Gerak 04:27 Remotion 04:44 Hyperframes 05:06 Claude Motion 05:32 Video Awesome Opus 5.5 05:51 Penutup ▶ Tautan ke alat dalam video [CH1 Keterampilan Desain AI] Desain Frontend: github.com/anthropics/skills/tree/main/skills/fro… UI UX Pro Max: nextlevelbuilder/ui-ux-pro-max-skill Taste Skills: Leonxlnx/taste-skill Hallmark: Nutlope/hallmark Impeccable: pbakaus/impeccable (impeccable.style) [Ruang Kerja Bab 2] Google Stitch: stitch.withgoogle.com Open Design: nexu-io/open-design [Interaksi Web Bab 3] Emil Kowalski Skills: emilkowalski/skills React Bits: reactbits.dev (DavidHDev/react-bits) Galeri Keyframes: keyframe.gallery [Grafik Gerak CH4] Remotion: remotion.dev (remotion-dev/remotion) Hyperframes: heygen-com/hyperframes Claude Motion: claude.com Video Awesome Opus 5.5: yihui-dev/awesome-opus5-5-videos