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.

Agent Media OS, the single skill for every media need in a HyperFrames project. Resolve BGM, SFX, image, icon, brand logo, voice, color grade, or LUT into a frozen local file or paste-ready block + ledger record (one verb, `resolve`); generate via TTS / music / image models when the catalog misses; produce voiceover, transcription, captions, and background removal through one shared audio engine; operate on media (cut / reframe / transform); and reuse assets across projects. Also use for vague feedback that real footage looks dark, flat, boring, should feel retro/camcorder/print/ASCII, needs privacy, or needs a media reveal.

Turn a product or marketing URL, pasted script, or brief into a product launch / promo video — SaaS promos, feature reveals, product demos, app and company launches. Use when the user wants to market, launch, promote, or reveal a product; the default for any commercial URL. Site tours / showcases of a website route here too — the brief carries the show-it-as-is intent. Unclear → /hyperframes.

AI-assisted video editing workflows for cutting, structuring, and augmenting real footage. Covers the full pipeline from raw capture through FFmpeg, Remotion, ElevenLabs, fal.ai, and final polish in Descript or CapCut. Use when the user wants to edit video, cut footage, create vlogs, or build video content.

Generate and style word-synced captions (Telugu, Hindi, English, code-mixed) as the HyperFrames captions pass over each format's Remotion picture, fix caption text, black captions out under on-screen text, and check caption content at every cut join. Use when creating, restyling, correcting or repositioning captions in any edit.

Editorial rules for turning a raw talking video or voiceover into a clean cut — removing retakes, repetitions, false starts, stutters, fillers, mispronounced words, contradictions/inconsistencies, off-script chatter and dead air — by writing work/edl.json for tools/cut.mjs. Telugu, Hindi, English and code-mixed speech. Use for stage 2 of edit-video or whenever the user asks to tighten/re-cut a video.

Choose, fetch and place background music for an edit — Openverse search (commercial-use CC, or CC0-only), music_cues in work/audio-plan.json with fades, offsets and a deliberate silence gap; tools/mix.mjs conditions every bed, sets it to one measured house level under the voice and sidechain-ducks it. Use when adding, swapping or re-levelling music.

Divide a finished story/script into filmable scenes with per-scene image and animation prompts. Use when building a scene outline or shot list, deciding scene boundaries, durations, or what each visual must show.

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

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

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

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

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.

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.

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

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

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.

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.

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.

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.