Video & Animation

Master Art Director and Design Router skill. Use whenever the user asks to design, redesign, animate, prototype, extract a design system, build a 3D/WebGL hero, create diagrams/decks, or produce a launch video. Automatically diagnoses the project intent, eliminates generic AI slop, selects the optimal Skill Combo (1-7), and routes to the right upstream skills, UI component libraries, and MCP servers.

Make and edit video with picture and sound on one clock: launch films and motion graphics, social posts, shorts, cutting and tightening interviews, podcasts and tutorials, captions and subtitles, sound for a finished picture, an editor's Premiere revisions, quick conversions, and checking how an export looks, sounds or plays. Not for audio-only files, downloading, transcribing or metadata alone.

The Animatic look for a podcast or talk-show film - storyboard panels held on screen and moved in stepped, hand-made motion, cut to the voice, with pencil-sketched pictures and lettered words in loose frames, and the speaker between panels. Optional cards beside the speaker, pictures that move with the story and a themed blueprint ground. Works with footage, from audio alone, or from a script with drawn hosts, in 16:9 and 9:16. Use when the producer picks Animatic, wants an animated or illustrated feel for a talk, or has an audio-only podcast with no camera to turn into video. Works with podcast-playbook, which does the sound, the transcript and the cut. Triggers include "animatic", "animatic podcast", "animatic motion", "การ์ดอธิบาย", "ภาพเคลื่อนไหวเล่าเรื่อง", "สตอรี่บอร์ด", "ภาพสเก็ตช์", "พอดแคสต์เสียงอย่างเดียว", "audio-only podcast video".

Create high-end motion-graphics videos, explainer videos and short-form edits (Reels/Shorts/TikTok/YouTube) as rendered MP4s in any aspect ratio, using a Remotion engine built from frame-level analysis of 82 professional edits. Use when asked to make, design, animate, script, storyboard or edit a motion graphic, explainer, kinetic-typography piece, promo/ad, product or UI demo, lyric/music edit, or a series of such videos for a channel, or to add motion graphics, captions, punch-ins and transitions to the user's own footage.

Crie vídeos de motion design por código, anúncios, explainers e reels 2D/3D com Three.js, referências take por take, tipografia cinética, UI real, áudio sincronizado e renderização determinística. Use com Claude Code ou Codex para vídeos desse tipo ou reconstrução visual.

Create and edit professional motion graphics videos with Remotion (React-based video). Use this skill EVERY time the user wants to create a video, edit a video, animate something, build an intro/outro/logo animation, make a Reel/Short/promo/launch video, add text animations or captions to footage, composite images and B-roll into a video, or mentions Remotion, motion graphics, video rendering, or "make this video look better/less generic". Also trigger when editing an existing Remotion project or when the user complains their video looks basic, generic, or amateur — this skill contains the exact fixes. Always read this skill BEFORE writing any Remotion code.

Create code-driven explainer videos, motion graphics, or B-roll from slides, scripts, SRT, or technical concepts. Coordinate story, visuals, sound, and export; study playable MotionFace references before new work or major visual redesigns. Use for Vibe Motion workflows or the creative methods associated with 浙大猫学长; not routine clip assembly or repository analysis.

Criar vídeos de motion design profissionais (promos de app/produto, anúncios verticais TikTok/Reels, tipografia cinética, vídeos sincronizados com narração) como animação HTML que é função pura do número do quadro, renderizada quadro a quadro em navegador sem tela para MP4 1080x1920 a 60fps. Usar sempre que o pedido envolver vídeo, motion, animação, edit, promo ou abertura — mesmo sem a palavra "motion". Inclui pipeline pronto (template, renderizador, preview, kit de SFX), 4 gramáticas de estilo destiladas de referências reais e o checklist anti-genérico.

Applies the Kinetic Continuity motion language when planning, building, or reviewing a GSAP demo or interface that needs natural, smooth editorial spatial motion. Use for image fields, galleries, carousels, contact-sheet transitions, anchored previews, path-based sequences, or restrained kinetic typography; do not use for unrelated animation tasks with no continuity or spatial-state problem.

Resize photos and videos to exact pixel dimensions or aspect ratios using Adobe tools. Use this skill whenever a user wants to resize, scale, or change the dimensions of an image or video file — including phrases like "resize this to 1920x1080", "make this 4K", "scale to 800x600", "change the aspect ratio to 16:9", "resize my video", "make the image smaller", "crop to square", "fit this to a specific size", "resize for print", "resize for web", "make it 300 DPI ready", "change canvas size", "resize a batch of photos", or any request specifying target dimensions (W×H, ratio, or named size like "4K", "HD", "A4"). Also triggers for: "make this fit a specific size", "resize to [any dimension]", "I need this at [WxH]", "scale my video down", "change resolution", "downscale", "upscale". NOT for social media platform sets (use adobe-create-social-variations for that). Uses image_crop_and_resize for photos, video_resize for videos.

Unified skill ecosystem for Remotion programmatic video production at scale. Orchestrates 91 skills across 10 categories: core video rendering, data ingestion, browser automation, AI intelligence, content design, monitoring, marketing strategy, devops deployment, document output, and agent systems. Use when building end-to-end video pipelines that combine data sourcing, AI generation, rendering, A/B testing, deployment, and monitoring into a cohesive production system.

Makes videos from HTML + CSS + JS with givemotion and renders MP4/WebM/GIF/ProRes. Use for any request to create, edit, check or render a video, animation, motion graphic, explainer, promo, logo sting, title card, lower third, animated chart or data story, captions, whiteboard/hand-drawn video, UI or product demo, or vertical social clip, or when a givemotion composition is open.

Provider-independent motion graphics direction for AI agents producing title sequences, lower thirds, explainer graphics, product UI overlays, social ads, kinetic typography, diagrams, data callouts, brand films, and video post. Use when planning, prompting, storyboarding, specifying, implementing, reviewing, or QAing motion graphics across live footage, generated video, UI capture, data visualization, brand systems, typography, accessibility, claim integrity, runtime handoff, and iteration.

Facilitates an interactive session that turns a product or subject into an original, internally consistent visual design language for any artifact — infographics, video storyboards, websites, or mobile app UI/UX. Use when the user wants an original design language, identity, or art direction, or when a design feels generic, derivative, 'AI-default,' or inconsistent and needs one unifying idea. Triggers on 'design language', 'art direction', 'make it original', 'visual identity', 'looks generic', 'design a world'. Produces a completed Design Language Brief (core metaphor, visual vocabulary, design DNA, signature constraint, Originality Test verdicts) saved to the project and handed off to the production skill for the chosen medium.

Find a motion (a reusable look for narrated and explanatory video) on motionhub.dev and make a film in it with any engine. Use when asked to make a video, animation or explainer "in the style of" a named motion or a motionhub link, to pick a look for one, to read a motion directory (motion.json, MOTION.md, tokens.json), or to share a look of their own as a motion on motionhub.

Create fully scored motion-graphics videos (MP4 with sound) in the calm, editorial style of AI model launch films such as Claude Opus 5 — kinetic serif typography, animated chat/UI demos, benchmark bars, counting stats and logo outros — with AI voice-over narration (edge-tts, incl. Indonesian), an original synthesized music bed that builds to the logo, synced UI sound effects, automatic music ducking and loudness mastering, rendered with Remotion in 16:9 and 9:16. Use this skill whenever the user wants a launch/announcement/promo/teaser/explainer video with audio, narration, voice-over, "pakai suara", "dengan musik", "ada narasinya", sound design, or a Reels/TikTok/Shorts/YouTube video made from text and data — even if they don't say Remotion. Prefer it over the silent motion-video skill whenever sound is wanted or the video is meant for social media.

Motion video made from code by astudio: product launch films, promos, feature announcements, explainers, tutorials-as-motion, kinetic typography, data/chart videos, social clips (9:16, 1:1, 4:5), logo stings and end cards, changelog videos, UI walkthroughs - written as HTML + CSS + GSAP on one paused master timeline and rendered deterministically to MP4/WebM/GIF with Playwright + ffmpeg (scripts/motion.cjs), or with HyperFrames / Remotion when the project uses them. Story first (three storylines, one spine), a SPEC with numbers, a seam ledger, film grammar (vector law, carriers, causes), sound on a beat grid, contact-sheet review. Use for "сделай промо-ролик", "видео запуска", "анимированное видео", "моушн-ролик", "explainer video", "launch video", "video ad", "reels".

Complete motion design, animation direction, and programmatic video production in code (Remotion, GSAP, HTML5). Designs, animates, scores, and QAs motion graphics with anchored scoring rubrics, beat-quantized storyboards, motion personalities, and an independent critic system.

Creates finished videos in code: promo reels, product and launch films, animated ads, kinetic-typography pieces, explainers, showreels, animated logo stings and end cards, and photoreal 3D product scenes (a product placed in a living room, on a house at dusk, in a studio). Delivers a ready-to-post mp4 for Instagram/Facebook Reels, TikTok, Shorts, Meta ads, LinkedIn or a website (9:16, 16:9, 1:1, 4:5) with original music and sound design. Use it whenever someone wants a new video, reel, clip, ad or motion graphics made for a brand, product, app, site or event, especially from a URL, product page, datasheet, PDF, deck or logo files, even if they never mention code, animation tools or rendering. Also event, party and artist promos cut to the music from footage the client supplies (DJ sets, past events) with motion graphics on top. Also for Romanian requests (reel, clip, videoclip de prezentare, animație, promo petrecere). Not for plain editing, captioning or re-encoding of existing footage in an editor (Premiere

Copy, clone or match how something moves: measure timing and easing, write a spec, build, film ours the same way and compare until the numbers pass; third-party references stay at motion level. Use orbyn-ui-design to design motion, technical-illustration for films, product-illustration for faux UI.

Make archival story videos (档案影像) — Chinese-language, vertical 9:16, about 3 minutes by default — from real public-domain material (photos, engravings, maps, stamps, documents, old film footage, 78 rpm records), with code-rendered motion (Three.js/WebGL/GLSL/GSAP, depth parallax, Python print looks), a marketing-designed script, deep-voiced AI narration that reads the on-screen captions, collage or modern effect modules (dot morph, darkroom, kinetic type, investigation board, ink fluid, point cloud…), beat-cut stock music, dense real sound effects, a −14 LUFS mix, plus a designed cover and Douyin/Xiaohongshu copy. Use this skill whenever the user wants a history/biography/art-history/city-history or any old-material story video (历史短视频、人物传记、艺术史、城市史、档案视频、纪录短片), a remake or revision of one, or changes to its script, look, music, narration, sound, rendering or delivery — even if they don't name the skill or the tools.

Create and revise beat-synced motion-graphics music videos from a supplied song and creative prompt, drawn entirely with the bundled native Swift renderer (vector line art, type, Metal shaders, neon glow), with music mapping, researched storyboards, procedural Swift SFX and Swift VFX. Use for full music videos or revisions to their scenes, animation, sound and effects.

Provider-independent production workflow for AI agents creating brand launch films, product reveal videos, manifesto films, campaign hero films, website hero videos, investor/customer launch assets, and social cutdowns. Use when planning, scripting, generating, editing, reviewing, or delivering launch films that must align strategy, claims, brand voice, visual direction, product proof, accessibility, compliance, and multi-platform delivery.

Voice-led motion-graphics film (30 s – 4 min) built in code: story and script first, then an AI voice or own recordings, scenes on springs along the voice grid, real interface, captions, a score, independent critic rounds, 16:9 + 9:16. Use when asked to "make a video / film / explainer", for a promo, a product or research film, a video summary, a vertical Reels/Shorts film, turning a report or deck into a video. Also graphics over a finished recording and a 4–14 s loop without a voice (GIF, MP4). Not for screen recordings or music clips.