remotion

之前不是说想做油管吗 我问有无有人有Skill 但是没有人理我 我今天自己去找了一些 这个做视频的skill分享给你们 remotion-dev/remotion Remotion：用 React 代码制作视频的工具。 通过组件编排文字、图片、音频和动画，适合产品演示、数据动画、字幕短片。模板写一次，替换内容即可批量生成。 支持搭配 AI 编程助手制作，核心价值是让视频制作可复用、可自动化。 以下视频就是我用一行提示词完成的 <Remotion 用这个机能 生成一条测试视频吧时长15s 介绍下Remotion 贴上github地址> 还是准备打算同步油管了 相关视频教程我之后也会同步更新

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

Agentes de IA que generan vídeos y gráficos animados de forma programática con React 🎬 remotion-dev/remotion

개발자들이 선택한 깃허브 디자인·모션 도구 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

அட. Video-வை React code-லயே எழுதலாம்.. Remotion-ல component தான் video. Data மாத்தினா video-வும் மாறும்.. Try பண்ணுவீங்களா ? remotion-dev/remotion Instagram-லும் பின்தொடருங்கள்: instagram.com

Testei +100 Repos do GitHub: Esses 10 São os Melhores! 🚀 Quer automações com IA para sua empresa? Desenvolvo soluções sob medida. Agende um diagnóstico gratuito: link.devaprender.com Testei centenas de skills e repositórios do GitHub para automatizar o meu negócio e o de outras pessoas com o Claude Code, e neste vídeo eu mostro quais ficaram na minha rotina. São ferramentas que escrevem melhor, controlam um navegador de verdade, mexem em planilhas, agenda e documentos, conectam o Claude a centenas de apps, criam vídeos com código e fazem auditoria de segurança. Tudo isso rodando no dia a dia, com demonstração real na tela. Muita coisa aqui não é skill famosa, daquelas que você ouve todo dia no Instagram, e praticamente ninguém conhece. Se você quer automatizar uma empresa com inteligência artificial, usar agentes de IA no trabalho ou até vender automação como serviço, essa lista vai te poupar semanas de teste. Fica até o final e se inscreve no canal para acompanhar mais vídeos como esse. No AI Slop: petergyang/no-ai-slop Playwright CLI: microsoft/playwright-cli Claude in Chrome: claude.com Google Workspace CLI (gws): googleworkspace/cli Composio: ComposioHQ/composio Remotion: remotion-dev/remotion Remotion skills: remotion-dev/skills Context7: upstash/context7 Web Scraping Skills (Thirdwatch): thirdwatch-dev/scraping-skills Camoufox: daijro/camoufox Cloudflare Security Audit: cloudflare/security-audit-skill 0:00 Introdução 0:29 No AI Slop: texto sem cara de IA 1:59 Google Workspace CLI 2:34 Playwright CLI 4:14 Claude in Chrome 5:24 Composio CLI 6:47 Remotion: vídeos animados com código 7:18 Context7: documentação atualizada 7:54 Skills de Web Scraping Antibot 8:35 Bônus: Camoufox 9:00 Security Audit Skill da Cloudflare 9:32 Encerramento CONTATO COMERCIAL(não respondo dúvidas de videos) ------------------------ jhonatan@devaprender.com