Video & Animation

Turn a YouTube video (public, unlisted, or a private/members-only one the user's own signed-in account can already view) or a local video/audio recording into a detailed, section-by-section summary document, delivered as a PDF, and can also extract the audio track as mp3/m4a/wav. Uses captions when they exist and otherwise downloads the audio and transcribes it locally with Whisper, so it works on caption-less live streams, lectures, webinars, meetings and multi-hour recordings. Use this whenever the user shares a youtube.com / youtu.be / youtube.com/live link (or a .mp4/.m4a/.mp3/.webm file) and wants a summary, notes, study guide, transcript, "every detail", key takeaways, a PDF/document of it, or the audio/mp3 from it, even if they don't say "transcribe".

用项目里真实的 Vue/Web 组件拍摄素材，再用 HyperFrames + GSAP 合成 30–60 秒产品宣传片（默认《一条线》风格：品牌母题贯穿、克制留白、三个由真实数据/交互触发的爆点；含原创合成配乐、响度归一化、主片/压缩版/封面导出）。当用户说"给这个系统做宣传视频""按珍珠玻璃宣传片那套流程做""录真实页面做宣传片""再做一版更高级/有爆点的宣传片""rui-ui-promo-video"时使用。排除：只录屏不剪辑、口播/字幕类视频（走 hyperframes 对应工作流）、纯海报设计。

制作"类口播"讲解视频——用真实片段（影视/打斗/文旅等素材）当画面，配讲解动画框和底部字幕，讲清一个观点或原因清单。当用户要做口播视频、解说视频、知识科普视频、干货视频，或说"把这段配音/文案做成视频""帮我做个讲 XX 的视频""像《难道 Codex 真的降智了？》那种视频"时使用；用户提到分镜图、讲解框、反面样片、把 PPT 风改掉、要真实片段而不是图表演示时，也一定用这个技能。适用于 D:\zgc个人 这类有大量自备视频素材、需要先出分镜确认再渲染的场景。

Use the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes, single or batch render, publish, cloud, cloudrun, feedback, lambda, doctor, browser, info, upgrade, skills, compositions, timeline, history, clean, docs, benchmark, telemetry, transcribe, auth, tts, and remove-background. Also use when diagnosing build or render failures. validate, inspect, and layout are deprecated aliases; use check. Covers local, HeyGen-hosted cloud, AWS Lambda, and Google Cloud Run rendering.

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.

Use when audio already placed in a HyperFrames composition needs to be mixed: fade-in/fade-out, crossfade, track gain or volume, volume automation, ducking, a music bed that fights a voiceover (voiceover carve), effects on a track (EQ, compressor, limiter, gate, saturation, delay, reverb, chorus, phaser, bitcrush), automation envelopes drawn on a track's volume or any effect parameter, or one submix bus carrying a chain, a fader and an automation clock for several tracks at once (`<hf-audio-group>`). Don't use for sourcing or generating audio — finding BGM, SFX, or making a voiceover is `/media-use`. Don't use for clip timing or track layout, which is `/hyperframes-core`.

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.

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.

Compare two videos with a draggable wipe slider in the browser - video A on the left, video B on the right, a handle on a vertical line starting at 50% - with play, pause, scrub and frame stepping kept in sync on both. Use this whenever the user wants to compare two videos, renders, encodes, grades, film looks, cuts or versions side by side, see what changed between two video files, A/B a before/after in motion, or judge two takes against each other, even if they don't say "slider" or "compare". Not for still images alone or for computed metrics (PSNR, SSIM, VMAF).

Make a 30-40 second vertical (TikTok / Reels shaped) pitch video about a client company to send to candidates before the first recruiter call. Researches the company's facts AND its vibe (own words, founders' public posts, brand colours and type), pitches three distinct creative concepts, builds the chosen one in Remotion with Higgsfield voice, music and a hero clip, then runs a multi-reviewer audit loop. Trigger on "pitch video", "candidate video", "company video", "explainer video for <company>", or a brief + phone script handed over with a request for a video.

Turn a set of raw screen recordings of a product walkthrough (macOS, Chrome, spoken Arabic) into one branded demo video — thumbnail as the first frame with a short animation, a purple branded frame with a section title and step chips, zooms on the key moments, silent-padded transitions that never cut a word, an animated outro, and a WhatsApp-tuned 720p copy. Use when the user sends several .mov screen recordings and says things like «ادمجهم فيديو واحد», «اعمل الصورة في الأول», «الجودة تبقى عالية والحجم يقل», «اعمل مونتاج», «فيديو شرح الميزة», «make one video from these recordings», or asks for a script before recording one («اكتبلي اسكربت أصوّر بيه»). Also use to rebuild a video after the user swaps one recording for another.

Edit raw talking-head / "yap" footage into punchy short-form video (9:16 Reels/TikTok/Shorts, or 16:9). Transcript-driven jump cuts, filler and stutter removal, face-aware punch-in zooms, word-by-word animated captions, sound design, loudness mastering, QA and publish copy. Use when the user gives talking-head footage, a yap, a rant, a podcast clip or a long ramble and wants it edited, cut down, captioned or turned into shorts. Also use for "make this fire", "edit this video", "caption this", "cut the dead air".

Produce narrated product tutorial videos automatically — script, OpenAI voice-over, a real recording driven by Playwright (web app, browser-extension popup) or the iOS simulator (mobile app), cursor/tap highlights, captions, ducked music, title and end cards, 1080p mp4. Use when the user wants a tutorial, demo, walkthrough, onboarding or sales video of an app, or wants to re-record one in another language.

Cria um projeto Motion Canvas com animações overlay sérias (tipos de vídeo: lista/webdoc/lista de argumentos sem B-roll; lista com B-roll; webdoc com B-roll + projeto CapCut) (fundo transparente, 1920x1080 na view, render .mov 4K com alpha) sincronizadas com uma narração .wav — transcrição com timestamps, cobertura ~90% do áudio, ícones de linha/logos/fotos em grafos e árvores, títulos de impacto ≤5%, .meta já sincronizado. Use quando o usuário pedir animações/overlays explicativas para b-roll (CapCut) a partir de um áudio.

Make a polished short video from just a prompt. Product launches (physical or digital), app and code demos, explainers for an idea, announcements, ads, reels, trailers, data stories and kinetic type. Writes the story and storyboard, animates it in HTML/CSS/SVG/WebGL, composes an original soundtrack with sound effects, adds optional voiceover and captions in many languages (right-to-left too), and renders MP4s for YouTube, Reels, TikTok, LinkedIn or X. Runs locally with free tools (headless Chromium, FFmpeg, Python), so no paid APIs, stock subscriptions or watermarks. Use it whenever someone wants a video, promo, teaser, reel, short, motion graphic or animated explainer made, even if they only describe the thing to show.

The method, measured numbers, engines and checks for making studio-grade motion video in code with Claude Code, never AI slop. Use it for ANY motion or video work, from a beginner's first clip to a frame-locked remake: a launch film, product promo, teaser, ad, brand film, sting, demo video, a 1:1 remake of a reference video (with a side-by-side), a landing-page 3D fly-over, a screenshot or dashboard brought to life, a count-up or chart animation, kinetic type, a logo animation, or sound design and music for a video. Also use it when someone says "make a video", "animate this", "make this move", "remake this video", "make it look premium", or asks why their motion looks cheap, floaty, choppy or AI-made. Code-rendered (seek(F) HTML or WebGL -> Playwright -> ffmpeg), with measured easing, beat grids, motion blur, gates and critic agents. Sister of 46-design-skill.

Trim any raw spoken recording (YouTube talking head, vlog, tutorial, course, podcast or interview, product review, short-form, in any niche and any language) into a clean edit by cutting only retakes, false starts, stutters, filler sounds, on-camera instructions to the editor, and dead space, with every cut placed on exact word boundaries so no word is ever clipped, then verifying the whole cut by listening back to it. Delivers a single-track timeline (Final Cut Pro FCPXML with To-Do markers, plus an EDL for Premiere Pro and DaVinci Resolve) and a readable cut list. Use this whenever someone wants a raw recording trimmed, cleaned up, "rough cut", retakes or ums removed, dead air tightened, or asks why a cut sounds clipped or choppy, even if they don't say "trim". Also use it to learn a creator's cutting taste from their editor's finished versions or from review feedback.

Recreate or adapt reference-based hand-drawn music videos by breaking down shots, preserving beats and held frames, replacing characters and selectively redrawing, choosing vector, After Effects, or layered raster workflows, and checking contact motion and full-video replacement coverage. Use for reference-driven video production and revisions, not ordinary editing without a reference or standalone illustrations.

Convert scripts, scenes, treatments, or story beats into production-ready cinematic AI-video shotlists, or revise an existing shotlist while preserving shot IDs and continuity. Use for shot design, scene coverage, horror reveal pacing, reference-image fidelity, and generation-risk review; do not use for screenplay rewriting unless the user asks for it.

Делать короткие ролики (10–30 с) на HyperFrames в проекте Workshop Starter — от смысла и стиля до проверенного MP4, со звуком и без, в том числе с 3D. Вести новичка за руку — показывать меню возможностей и варианты на выбор. Использовать, когда пользователь просит сделать, поправить, озвучить или отрендерить ролик, видео, анимацию, motion graphics, 3D-сцену, собрать MOTION.md из референсов, сделать аудит «выглядит дёшево», а также когда он спрашивает «что ты умеешь с видео», «с чего начать», «что дальше». Явная команда не требуется.

Produzir e adaptar Reels de resultados eleitorais no padrão visual de Théo Bernini, com mapa fiel, motion fluido, voz expressiva, legenda e relatório. Usar com os projetos deste repositório e as contas do autor atual.

制作“大屏人物抛出产品、第一视角接稳、旋转展示、静帧背景与成分逐字卡点”的带货视频。适用于“大屏扔到我手里”“换背景人物产品、节奏照静帧版”等请求；附参考BGM、563帧时间线与逐行展开时钟，每次换背景、人物、产品图和产品文案。

Produce un video de motion graphics de ~1 minuto a partir de un GUION (sin video de cámara) — escenas animadas con la marca del usuario (colores, tipografías, logo), locución con voz IA argentina (mujer u hombre, edge-tts gratis o ElevenLabs), subtítulos dinámicos, música de fondo de Envato con volumen automático y SFX sutiles; entrega un MP4 final + SRT. Al empezar pregunta voz, marca, formato y música. Usar cuando el usuario escribe /motion con un guion (texto o archivo), o pide "hacé un video de motion graphics con este guion", "convertí este guion en video", "video animado con voz en off".

Use this for subtitle and caption translation. Optimizes for spoken naturalness, brevity, timing-friendly phrasing, and readability on screen rather than literal line-by-line transfer.