Video & Animation

Mandatory entry point: read this first for any request to make, create, edit, animate, or render a video, animation, or motion graphic, including a promo, explainer, captioned clip, title card, overlay, slideshow or interactive deck, Remotion port, or any HyperFrames HTML composition. Also use it to inspect, diagnose, validate, preview, publish, or batch-render an existing HyperFrames project. Inputs may be a website URL, GitHub PR, Figma design or URL, text or brief, existing footage, or music. It resumes project state, captures intent when applicable, selects and installs the owning workflow, and routes domain capabilities. HyperFrames is the default output framework unless the user explicitly chooses another framework for the deliverable or asks only to record a browser session.

Use when building or editing a HyperFrames project that people open in Studio: how the timeline should be laid out so it reads well (one caption track, one element kind per track, every scene a sub-composition) and where captions and key content may sit (safe zones). Don't use for how to perform an individual edit (split, trim, retime, volume, copy, swap): that is `creator-editing-recipes.md` in `/hyperframes-core`.

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.

Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.

Use when a HyperFrames composition needs a punch-in, punch-out, zoom, reframe, Ken Burns treatment, camera move, visual match/whip handoff, or other seek-safe 2D/3D keyframes; also for GSAP, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw, text trails, 3D depth, or `hyperframes keyframes` diagnostics. Don't use for broad scene strategy, brand design, media sourcing, captions, or general video planning.

Search, install, and wire registry blocks and components into HyperFrames compositions. Use BEFORE hand-building any named visual — whenever a brief, a user, or a storyboard names a look, effect, treatment, or transition such as CRT scanlines, glitch, chromatic aberration, film grain, a shimmer sweep, a chart, a code or terminal window, a map, or a confetti burst — because roughly 400 hosted items already cover many of them and the search ranks all of them with nothing installed, no project, and no account. Also use when running hyperframes add or hyperframes catalog, installing one item or every block matching a tag, wiring an installed item into index.html, or working with hyperframes.json. Covers discovery, install locations, block sub-composition wiring, component snippet merging, and authoring a new block or component to contribute upstream (idea → scaffold → validate → PR).

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, 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.

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`.

製作發表型／回顧型／統整型的短影片（1 分鐘以內、1–3 分鐘、3–10 分鐘）。用 HTML 排版轉圖 ＋ ffmpeg 合成，可自動配樂、旁白與字幕。當使用者說「做一支影片」「做開場影片」「把這些做成影片」「季度回顧影片」「把說明做成影片」時使用。

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.

Reverse-engineer the audiovisual production of a reference video (motion design, product launch, changelog, app promo, trailer) into measured numbers and a recreation brief. Use this when the user shares a video and says "make ours like this", "copy this style/camera/pacing", "what camera moves does this use", "how fast is the camera", "recreate this launch video", or before generating a video with Hyperframes, /brag, Remotion or After Effects from a reference. Measures cuts and shot durations, camera language (truck/pedestal/pan/push-in/pull-out/orbit, speed in px/s and %W/s, scale %/s, easing, whether the camera ever stops), framing, depth of field and rack focus, grain/vignette/bloom/chromatic aberration, UI micro-animation vs camera pacing, and audio (music vs SFX, tempo, cuts on beat). Ignores theme, palette and branding. Outputs analysis.json, brief.md with do/don't rules, and QC gates to compare a render against the reference.

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.

>- Taste and judgment for directing HyperFrames videos: ads, launches, explainers, typography, stings, data stories, documentaries, trailers, beat edits, demos, character animation, reels, 3D, lyrics, news, tutorials and comedy shorts. Guides creative decisions and visual review without templates, component code, palettes or layout presets.

Convert a HyperFrames project (HTML/GSAP video compositions) into an editable Adobe After Effects project (.aep) with real layers and keyframes, not a rendered video. Text stays live text, cards become shape layers, images and video become footage, sub-compositions become precomps, animation becomes keyframes, and the result is checked against the HyperFrames render frame by frame. Use this whenever someone wants to move, port, export or "hand off" a HyperFrames / HTML video to After Effects or AE, wants an .aep from their HyperFrames composition, wants to keep editing a HyperFrames film in After Effects, or asks why an AE import of their HTML animation is slow or broken, even if they do not say "skill" or name the tool. Windows and macOS.

Crea VIDEOS ANIMADOS LARGOS (varios minutos) de texto + animaciones + voz hablada en espanol, renderizados en la PC del usuario con HyperFrames (HTML + GSAP -> MP4) y voz de ElevenLabs o MiniMax. Usala SIEMPRE que el usuario pida un video animado, explicativo, motion graphics, una leccion o tema de un curso en video, convertir una guia/articulo/documento en video, un tutorial animado, o diga "hazme un video explicando X", "anima esta guia", "video para el curso", aunque no diga "skill". NO es para video generado con IA (modelos de video): esto es animacion por codigo.

Làm video với Claude Opus 5.5 từ brief, chủ đề hoặc kịch bản tiếng Việt: viết kịch bản bằng viet-pro, giọng đọc/SFX/nhạc nền ElevenLabs, dựng bằng HyperFrames (hoặc Remotion/Canvas tuỳ dự án), render 16:9 và 9:16, kiểm tra khung hình. Dùng khi người dùng muốn làm video, explainer, quảng cáo, motion graphics, music video hay video TikTok/Reels/YouTube.

Makes a short 1080x1920 video with a character and a motion-graphics edit written as code. Entry A generates a character, keyframes, a song or voice and animated clips through a CLI or MCP server the user logs into, with the price stated and an OK before every paid call. Entry B starts from existing footage and a song or track. Both continue with timings (words, beats, marks or story events), an HTML + GSAP edit, a reviewer pass and a HyperFrames render. Use for an AI character or mascot that sings or talks, a lyric or karaoke video, a count-the-moves video, a checklist over a film scene, or a clip and a song to turn into a short. Stops after the brief, before every paid call, after the timings and before each render.

Create HyperFrames HTML video compositions. Use when asked to create a video, build an animation, make a composition, add a title card, or generate any HTML-based video content for HyperFrames.

Build tone-adaptive captions from whisper transcripts. Detects script energy (hype, corporate, tutorial, storytelling, social) and applies matching typography, color, and animation. Supports per-word styling for brand names, ALL CAPS, numbers, and CTAs. Use when adding captions, subtitles, or lyrics to a HyperFrames composition. Lyric videos ARE captions — any text synced to audio uses this skill.

Efficiency layer for motion-graphics/video tasks (HyperFrames, Remotion). Dense table storyboards, verbatim media ledgers, batched frame work, honest render costs. Target 70%+ token reduction on video workflows.

Turn a maths / physics problem into an animated explainer video where the figure and the narration stay in lockstep. Use when asked to make a 讲解视频, 解题视频, explainer video, animated solution, or animated walkthrough for a problem — 立体几何, 解析几何, 函数与导数, 数列, 概率, 物理受力, or any problem with a diagram. Silent by default; when the user wants a voice, generate edge-tts narration with frame-accurate sync, and ship an interactive HTML stepper (with/without audio) alongside. The framework lives in assets/framework. Read this before writing a single line of content.

テーマを渡されたら、それを説明するアニメーション動画を Claude Motion で作り、ナレーション（Gemini TTS）とテーマに合う BGM（Lyria）を付けて MP4 にする。「〇〇を説明する動画を作って」「〇〇の紹介動画」「/motion-render 〇〇」、既存の Motion の動画を MP4 にしたいときに使う。

用代码做快切拼贴风动效短片（撕纸、半调网点、照片拼贴、emoji 贴纸、立体大字、节拍音轨），可选左侧"实时代码面板 + 右侧成片"的展示布局，输出 MP4。Use when the user wants a collage / zine-style motion piece, a product or brand promo animation, a "Claude Motion"-style video where the film is written in code, or to remake/iterate such a video shot by shot.

Produces short films and cinematic shots end to end - Blender scenes, characters rigged from scratch or supplied rigs, face rigs and lip sync, authored body and camera motion with automated QA, then image/video finishing via OpenRouter (Seedance, Veo, Kling, GPT Image, Nano Banana) or other providers, music and editing. Use for films, shots, animatics, character animation or rigging for video. Not for standalone images or playable games.