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 at the start of every new video in this repository (new Reel or YouTube video, new script, «смонтируй», «новый рилс», «ролик для ютуба», a recording path) — before any montage, research or rendering. Asks the format first (Reels 9:16 or YouTube 16:9) with the formats picture, then the montage style with the styles picture, then the owner interview one question at a time, writes the script with research and three skeptics when needed, and only then starts the Remotion montage.

Build every new video in this repository on the studio stack — Remotion for rendering, Storybook as the showcase where each block is accepted on its own, the ONai depth and liquid-glass kit in studio/src. Covers both formats (Reels 9:16 1440×2560 and YouTube 16:9 2560×1440), the four styles (КАНВАС, СТЕКЛО, ПОСТЕР, СЦЕНЫ), the montage map, container QA, review sheets every 2 seconds, render and loudness mastering. Use after the format and style are chosen (reel-workflow).

Agent Media OS for 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. When the host app provides its own music or sound-effect tools, use those for music and sound effects; `resolve --type bgm|sfx` needs the heygen CLI. When `HEYGEN_API_BASE` is set, HeyGen calls go through that host with no CLI sign-in.

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.

Use when working with a person on a HyperFrames project in Studio: first, whether their message asks for a change at all (questions, loose ideas and "don't change anything" get an answer and a plan, not an edit); for a new film, the plan, storyboard and build order that the HyperFrames launch films follow; and 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`.

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

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

Direct and render a 30–180 second motion-design film for anything — a product, app, startup, feature launch, service, idea, research result, school project, game or personal story: kinetic typography, animated mock UI, charts, maps, characters and transitions on a music grid, an original procedural score, an AI voiceover (OpenRouter TTS — ElevenLabs v4, Gemini TTS…) verified by speech-to-text, karaoke subtitles and a ducked mix, all rendered to MP4 by code (no video editor, no stock). Optional real footage: frame-perfect capture of a live website, web app or browser game. Use whenever someone asks for a motion design / анимационный / моушн ролик, promo, explainer, launch or pitch video, trailer, teaser, showreel, video presentation of an idea, «видео про продукт/идею», «сделай классный ролик», or wants their idea or app turned into a cinematic video with voice and music — even if they never say \"motion design\".

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.

Make explainers, feed ads, reels/stories, product demos and data-story videos from a JSON spec with the motionspec engine (script, narration, validate, preview, critique, render, captions, post pack). Use when the user wants any video made, remade for another format, narrated, or checked for brand and claim safety. Works for any product; brand lives in a theme file per project.

End-to-end edit of a talking-head YouTube video in this workspace, in the channel's OWN brand (marka/MARKA.md + src/theme/theme.ts) — stage layouts that reframe the presenter, word-synced boards, kinetic theses, on-screen graphics, bespoke code-written animation scenes, sound effects + the user's music, master render, QC and delivery docs. Use when the user gives a new video and says "bunu kurgula", "yeni videoyu kurgula", "kurgula", "videoyu düzenle", "yeni video geldi", "edit this video", or asks to continue/resume an edit ("devam"). Also use for revision requests on a delivered edit.

يمنتج فيديو كلام للكاميرا إلى ريل/إعلان 9:16: يشيل السكتات، كابشن عربي بتوقيت الكلمة، وموشن قرافيكس بألوانه. وفيه مونتاج مقاطع بلا كلام وبودكاست بكاميرتين. Use when user says "منتج هذا المقطع"، "سو من هذا الفيديو إعلان"، "شيّل السكتات"، "حوّل الفيديو لريل"، "ركّب كابشن عربي"، "اقص الصمت"، "مونتاج من هالمقاطع"، "بودكاست"، "كاميرتين"، or sends a talking video/clip folder. Also a no-person 3D motion-graphics explainer from text: "فيديو موشن"، "شرح بالموشن"، "سو فيديو من هالنص"، "موشن قرافيكس". Not for carousels or video covers.

Plan, direct, and produce code-drawn 2D/3D motion graphics and edited videos (reels, hooks, SaaS/product explainers, talking-head edits) on the user's local machine through any coding agent that has terminal + file access (Claude Code, Codex, Cursor, Claude Desktop, VS Code agents, etc.). Workflow: explain the process → user gives references + story → write a paste-ready ElevenLabs voiceover script → user generates and returns the MP3 → build, preview, render. Uses Canvas/SVG/p5.brush/Three.js/GSAP rendered in headless Chrome, Motion Canvas/Revideo, ffmpeg, small local AI models (cutout, transcription), plus LottieFiles, Freesound, Pexels/Pixabay, Firecrawl and ElevenLabs MCPs, and the Playwright MCP to browse any website visually (Pinterest, Behance, Dribbble, brand sites) and grab image/video assets by itself. Use when the user asks to make, edit, animate, caption, voice, or sound-design a video.

Rough-cut raw Vietnamese talking-head (selfie) videos full of false starts, retakes and stutters into one fluent take (keep the last clean take of each sentence, cut in silent gaps, loudnorm, 1080x1920), then hand each cut off to the post-production editor bot with transcript + notes. Use when asked to "cắt thô", "rough cut", "cắt video", "bỏ đoạn nói vấp/nói lại", or to process a batch of raw clips (local folder or public Google Drive folder) for the editor bot.

يصنع فيديو تلاوة قرآن كامل 16:9 بالرسم العثماني (مصحف حفص – مجمع الملك فهد) متزامن مع صوت القارئ، مع «المختصر في التفسير» يُكتب حرفًا حرفًا من Tafsir MCP، وخلفية متحركة، وصورة القارئ واسمه بالخط، وثلاث صور مصغّرة (ثمنيل). Use when the user says "سو فيديو تلاوة"، "ركّب الآيات على التلاوة"، "ترجمة قرآن للتايم لاين"، "الرسم العثماني على الصوت"، "فيديو سورة"، "ثمنيل سورة", or sends a recitation audio / YouTube link of a sura.

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

Turn the current project into a narrated instructional video (how to do one task) or a feature update video (what's new in a release) using Hyperframes, or a general video for any process, third-party app, physical task or topic without a codebase (`--mode general`, researching official docs, screenshots and topic images). Steps outside the code (a vendor portal before a connector) work in any mode. 11 styles (teaching and energy), frame-preset themes, Kokoro voices, and a business share post; `/showhow options` lists them. Use when someone says "/showhow", "make a how-to video", "make a tutorial for X", "make a what's new video", "feature update video", "release video for 2.4", "make a video about X", "explain how X works in a video", or wants to show users how something works. Reads the project code, docs and git history directly - no live URL or screen recording needed.

为老板、专家、讲师与创始人完成获客型短视频IP定位、100个故事选题、可直接拍摄的口播脚本和访谈式日更内容。用户要做人设定位、内容栏目、爆款选题、脚本、主页包装或私域承接时使用；不处理剪辑软件教学、投流执行或账号代运营。

Produces Douyin / WeChat Channels (视频号) / TikTok-style vertical ad videos (≤30s, 9:16) end to end — hook-first script, cost quotes confirmed by the user before any paid generation, product-zero storyboard (AI footage shows only people; every product shot is real pixels via motion_clip / product-reveal overlays, so labels never garble), Seedance 2.5 via 即梦画布 CLI (credits) or reAPI (USD), per-video visual styling (fonts, stickers, calc board, end card), aligned captions, Suno BGM, cover image, publish copy and automated QA. Use when the user asks for 抖音/视频号/短视频/带货视频/广告片/口播视频/系列视频, mentions Seedance, 即梦, 画布, reAPI, 字幕, 花字, 封面, 价格卡, 算账板, 产品揭幕, 超分, or wants to turn a product + script into a finished video. Not for long-form editing, live streaming, or pure image tasks.

Direct the look of AI video like a cinematographer: camera language, movement, lighting, color, and style lenses. Use when a prompt needs a real shot in it, not just a subject, or when results look flat and amateur.

Create short vertical videos (TikTok / Reels / Shorts / 抖音 / 快手 / 小红书) from a topic, a product link/image, or a script you already wrote. ClipForge runs the full pipeline — script → footage → voiceover → subtitles → BGM → compose — with a free, no-API-key path (free stock + Edge TTS + local FFmpeg). Use when the user wants to turn an idea, product, or written narration into a finished short video. Pipeline-correctness rules are hard; everything creative is your call.