remotion-dev

@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

claude remotion skill: How to Install It and Make a Small-Business Promo Video The claude remotion skill is the set of official Remotion Agent Skills that teaches Claude Code how to build videos with Remotion. You describe the video in plain words, Claude writes the React code, and Remotion renders it to a video file. This research-based guide covers what Remotion is, what the skills do, how to install them, a simple promo-video idea for a small business, and the cautions worth knowing first. What Remotion is Remotion is a framework for making videos with code. Its fundamentals page explains the idea: you get "a frame number and a blank canvas" and draw anything on it with React. A video has a width, a height, a frame rate (fps) and a length in frames. If what you draw changes from frame to frame, you get an animation. The Remotion README calls it "video tools for the agent era" and says you can make videos with a coding agent, by drag and drop or in code. What the skill does Agent Skills are folders of instructions, scripts and reference files. Claude loads one only when your request matches its description. In Claude Code they live in ~/.claude/skills/ (personal) or .claude/skills/ (per project). According to the Remotion Agent Skills docs, Remotion keeps a set of skills that "define best practices for working in Remotion projects," for agents like Claude Code, Codex, Kimi Code or Cursor. The list includes: - /remotion-best-practices, which covers all the others (use it if unsure) - /remotion-create to start a new project or composition - /remotion-markup for animation, layout, fonts, audio and timing - /remotion-studio to preview the video - /remotion-render to render a video or a still image - /remotion-captions for subtitles - /remotion-docs to look up current Remotion docs How to install and try it Per the project's README and docs, run this inside your project folder: npx skills add remotion-dev/skills The docs also list a GitHub CLI option (gh skill install remotion-dev/skills), and new projects created with bun create video offer to add the skills during setup. If you don't have a Remotion project yet, the Remotion README says that with Node.js installed you can start one with: npx create-video@latest Then open Claude Code in that folder and try a README example prompt, such as /remotion-create Make a promo video for a record store. Use case: a 15-second promo for a small business Say you run a bakery and want a short vertical clip for Instagram or WhatsApp Status. A prompt could look like this: /remotion-create Make a 15-second 1080x1920 promo video for "Rosie's Bakery". Scene 1: shop name fades in on a warm cream background. Scene 2: three lines slide in: "Fresh bread daily", "Custom cakes", "Open 8am to 8pm". Scene 3: phone number and "Order today" with a soft zoom. Use my logo from public/logo.png and the font Inter. Next, run /remotion-studio to preview it, ask for changes in plain words ("make scene 2 slower", "use our brand green"), and finish with /remotion-render. Because the video is code, you can change the text later and render a new version for each offer or season instead of starting over. Limits and cautions - License. Remotion has its own license. It is free for individuals, for-profit companies with up to 3 employees, non-profits and people still evaluating it. Bigger for-profit companies need a paid Company License. Check which one applies to you. - Read skills before you install them. Anthropic's docs advise using skills only from trusted sources and checking every file first, because a skill can tell Claude to run code. The Remotion skills come from the Remotion team, but it's still worth a quick read. - You still need a dev setup. This runs in a coding agent with Node.js, not in a simple chat window. - Check the output. Watch every render before you post it. Look for typos, wrong prices and music you don't have the rights to use. For more research-based AI guides, visit ainews.useaifix.com. If you want help automating your marketing with AI, see useaifix.com.

Esse vídeo não foi editado. Foi programado pelo Claude Este Short foi feito com Remotion, uma ferramenta gratuita e de código aberto que transforma código em vídeo (mais de 66 mil estrelas no GitHub). Com a skill oficial do Remotion, o Claude Code escreve cada cena (animação, legenda, áudio e até 3D) e você ajusta conversando. Instala com: npx skills add remotion-dev/skills A skill remotion-best-practices tem mais de 660 mil instalações no skills.sh. Docs: remotion.dev Repositório: remotion-dev/remotion 5 skills grátis pro Claude, em português: preview.mailerlite.io #claudecode #remotion #ia