Video & Animation

Direct and build professional motion-graphics films (launch videos, product promos, feature reveals, brand stings, kinetic-type pieces, social ads, CTAs) that read as made by a senior motion designer, not AI slop. Finds an idea only this brand could own (from its logo, control, material, verb, voice), builds a world for it (ground, light, depth, texture, 3D or generated image surfaces for the hero moment), then builds with a seek-safe GSAP runtime driven by curves measured frame by frame from 53 professional recreations, and reviews its own render honestly with scripted gates (look.py, lint.mjs) instead of self-certifying. Given a website URL it captures the brand (colours, fonts, official logo, copy, screenshots); with an ElevenLabs key it writes and voices the script, scores it, and cuts picture and sound together. Use for any request to make, plan, storyboard, fix or critique a motion graphic or promo video, in HyperFrames or plain HTML.

>- Use when the user asks for explainer or a task matching the examples below. ~60-80s explainer video for any URL — GitHub repo, product page, docs site, blog post, or launch. Canonical workflow for URL walkthroughs. Use when the user asks to "explain this URL / repo / website / product", "make a walkthrough video for [url]", "demo this site", "Loom-style explainer of [url]", "explainer for github.com/...", or "explain this product link". Drives a real browser through the URL, generates an avatar lipsync, and composites in a 1280×800 macOS Sonoma frame with a 246-pixel bottom-left avatar circle. GitHub URLs activate a repo-aware mode (README scan + live-demo detection); other URLs use a generic page-walkthrough flow.

A companion skill that works alongside your other skills. While you use skills like frontend-design, remotion, or any domain skill, this meta-skill helps you capture and share craft knowledge with the SkillEvolve community.

Use when a social campaign needs a decision-ready brief before anyone writes posts, books creators, or spends budget. Trigger phrases include "brief this launch", "turn this into a campaign plan", "what should this campaign say?", "make a social brief", and "align the team on this promotion". Do not use this for a content calendar, a single caption, or an unapproved product claim; use content-calendar for scheduling, caption-and-hashtags for a post, and positioning-audit when the core message is still unclear.

Build a striking animated landing page where a looping video of one subject is re-drawn live as a mosaic of glyphs (ASCII characters, braille, halftone dots, pixel blocks, organic marks) by a WebGL shader — with a cursor that splits the original photo from the glyph render and resizes the grid, a title that inverts the backdrop behind it, dense animated line work (constellations, weather maps, blueprints, sonar), and a full set of sections and copy. Takes the user's image or generates one with fal (nano-banana-pro), animates it with Kling into a seamless loop, then designs a distinct look (palette, background effect, glyph style, fonts, line art, wording) for it. Use this whenever someone wants an ASCII-art / glyph / dithered / halftone / "text-mode" effect on an image or video, an image-to-animated-website, a shader-driven or generative landing page for a product, object, creature or scene, or more pages in the same series — even if they don't say "landing page".

High-converting landing pages — campaign pages, collection pages, seasonal promos, A/B testing

Use this plugin when the user wants a premium, GSAP-driven cinematic B2B landing page: a scroll-driven full-screen video slider hero with clip-path ellipse transitions, SplitText char-reveal headlines, a masonry product gallery, scroll-reveal about text, a partner marquee, Lottie-style feature cards, and a multi-office footer. Invoke for 'cinematic landing page', 'video hero landing', 'bakery / food-service landing', 'GSAP scroll site', or when the user references the Cinematic Landing Page template.

Use this plugin when the user wants a single-page immersive parallax landing page with a scroll-driven portal/curtain entrance and a curved arc card slider — a 'dreamcore' / 'reverie' hero that scales a portal image toward the viewer as the user scrolls into a second dream-world scene. Invoke for 'parallax landing', 'scroll cinematic hero', 'portal zoom landing', 'arc card slider', or when the user references the Dreamcore Landing template.

Use this plugin when the user wants a dark, pure-monochrome newsletter / content-platform landing page (Mindloop): fullscreen video hero, Instrument-Serif italic accent words, liquid-glass controls, scroll-driven word-by-word mission reveal, and an HLS-video CTA. Invoke for 'Mindloop landing', 'black monochrome newsletter landing page', 'video hero content platform', or when the user references the Mindloop template.

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

Generate HeyGen presenter videos via the v3 Video Agent pipeline — handles Frame Check (aspect ratio correction), prompt engineering, avatar resolution, and voice selection. Required for any HeyGen video generation. Replaces deprecated endpoints with v3. Use when: (1) generating any HeyGen video (via API or otherwise), (2) sending a personalized video message (outreach, update, announcement, pitch, knowledge), (3) creating a HeyGen presenter-led explainer, tutorial, or product demo with a human face, (4) "make a video of me saying...", "send a video to my leads", "record an update for my team", "create a video pitch", "make a loom-style message", "I want to appear in this video", "generate a HeyGen video", "make a talking head video". Accepts avatar_id from heygen-avatar for identity-first HeyGen videos, or uses a stock presenter. Returns video share URL + HeyGen session URL for iteration. Chain signal: when the user wants to create/design an avatar AND make a video in the same request, run heygen-avatar f...

The HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class="clip"`, tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Video and audio processing with FFmpeg. Use for format conversion, resizing, compression, audio extraction, and preparing assets for Remotion. Triggers include converting GIF to MP4, resizing video, extracting audio, compressing files, or any media transformation task.

Author or edit a custom HyperFrames composition when no specialized workflow fits, or when BRIEF.md sets flow: companion. Use for longer or multi-scene pieces, brand and sizzle reels, montages, static loops, static title cards, footage remixes, and freeform builds. Use motion-graphics instead for a short unnarrated motion-first unit, including an animated title. Route fresh creation through hyperframes before using this skill.

Create AI avatar videos with precise control over avatars, voices, scripts, scenes, and backgrounds using HeyGen's v2 API. Use when: (1) Choosing a specific avatar and voice for a video, (2) Writing exact scripts for an avatar to speak, (3) Building multi-scene videos with different backgrounds per scene, (4) Creating transparent WebM videos for compositing, (5) Using talking photos as video presenters, (6) Integrating HeyGen avatars with Remotion, (7) Batch video generation with exact specs, (8) Brand-consistent production videos with precise control.

Turn one topic into a knowledge explainer video that is easy to follow, good to look at and makes people want to watch to the end (on-screen text over music, the kind that took off under Douyin's #Vibe知识大赏), rendered with HyperFrames. Gives a path that works (research → copy → images → look and storyboard → render) and small tools for music editing, beat timing, sound effects and self-checks; the design is yours to make for each topic. Use it whenever someone wants a knowledge, science, history or how-it-works video — 'make a video explaining X', 'turn the history of X into a short video', 'explainer video', '做一条知识视频', '科普视频', 'Vibe知识大赏' — even if they don't name this skill. For a single short animation or just a new look, use code-video instead.

YouTube Data API v3 complete wrapper - search videos, get video/channel/playlist details, get comments, download subtitles, etc. Supports filtering and sorting by time/views/rating and more.

Edit existing videos using AI — remix style, upscale, remove background, and add audio via fal.ai's hosted video models.

Edit videos in DaVinci Resolve Studio 21.1 with the analyses of Video Frame Expedition for DaVinci Resolve, a local application. Use when the user asks to look at a Resolve timeline and find what its clips contain, to build a new edit or modify an existing one from their rushes, to reframe clips (e.g. 16:9 to 9:16) using subject positions, to add markers or metadata from the analyses, or to pick shots for a montage. Needs the application running (its MCP server comes with this plugin) and, for what the application's own Resolve tools do not cover, the MCP server of DaVinci Resolve Studio.

Generate Mandarin and multilingual narration with Volcengine Doubao Speech 2.0. Use when creating Chinese voiceovers, when the user prefers Doubao/Volcengine/火山引擎/豆包 TTS, or when narration needs character-level timestamp metadata for subtitles.

Yatay YouTube konuşma videosunu (kamera kaydı, isteğe bağlı ayrı ekran kaydı) kaba kurgular. Harfiyen döküm çıkarır, duraklamaları ve art arda tekrarları sesten keser; Claude dökümü okuyup gerekçeli bir atma listesi yazar, mp4 üretilir, kesilmiş ses yeniden çözülüp her birleşim denetlenir. Şu durumlarda kullan - "videoyu kurgula", "kaba kurgu", "ham kaydı kes", "beklemeleri/duraklamaları kes", "tekrarları at", "takılmaları temizle", "jump cut", "keseceğim dediğim yerleri at", "kamera ile ekran kaydını senkronla", "ekran kaydının köşesine kamera koy", "sessiz yerleri hızlandır".

Turn a still image into a seamlessly looping ambient video for a web header or background, using MiniMax H3 in the local ComfyUI. Use when asked for a looping background/hero video, "make this image move", ambient motion from artwork, or when a generated loop visibly jumps, has no wind/atmosphere, or barely moves. Covers the settings that actually produce motion, how to close the loop, and how to measure whether it worked.

Make a 24-second square (1440², 60fps) looping product launch video where the whole story happens *inside the period of the wordmark* — iris opens onto a night photo, glass UI morphs ask → find → write → night → results → phone lock screen → proof → CTA, then closes back into the period beside the app icon. One canvas, pure seek(t), Playwright render with motion blur, beat-synced SFX, -14 LUFS. Arabic RTL template (Geist + Thmanyah when present, else IBM Plex Sans Arabic), config-driven. Use this whenever the user asks for "the night-shift video", "نفس فيديو النقطة", "فيديو إطلاق مربع", "إعلان يحدث داخل النقطة", a launch/promo video like the مستخرج one, or pastes a brief with "inside the period of the wordmark" / iOS glass panels / goo-split pills — even if they don't name this skill. Also covers getting the matched night/day photos (Higgsfield, local Codex image_gen, or ready prompts for Gemini/ChatGPT).

Sayı ve yazıyla hikâye anlatan editoryal hareketli grafik videosu üretir (Remotion) — X/Twitter gönderisi, Reels/Shorts, YouTube video arası. Hikâye JSON sahne listesi olarak yazılır (başlık, yazılan istem, sayaç, ölçer, sütunlar, karşılaştırma, liste, soru), 16:9 ve 9:16 render edilir, yumuşak whoosh + klavye + sakin müzik yatağı numpy ile sentezlenip eklenir, sonuç ölçülerek denetlenir. Şu durumlarda kullan: "X için animasyon/video", "hareketli grafik", "motion graphics", "sayılarla anlat", "sonuçları grafikle göster", "karşılaştırma videosu", "test sonucunu animasyonla anlat", "reels grafiği", "araya grafik", "Remotion".