Video & Animation

Build a video in the Midnight Kinetic Type look (style card midnight-kinetic-type) — clean motion type on a flat dark field, word-by-word mask rises, one accent word that lands alone, icon strokes that draw on, and hard cuts on the music's beat grid. Use when the director picked this card, or the owner says "make it in the kinetic type style", "midnight type", "like an earlier project", "تايبوجرافي متحركة", or the video is a direct offer, proof / results reel or AI news told with type, music and SFX (no face, no footage). Arabic (Cairo, per-word) and English (Inter) versions; 9:16 reels. Not for lecture clips or quick tutorials.

Build a video in the Warm Glass Face-cam look (style card warm-glass-facecam) — the presenter talks to camera while frosted-glass panels with one warm glow land exactly where he points; blur-punch text, a karaoke pill, small charts, and a shrink into a rounded picture-in-picture for the demo part. Use when the director picked this card, or the owner says "make it in the warm glass style", "glass panels over my face", "face-cam with glass cards", "PiP intro", "كروت زجاج وأنا بتكلم", or the video is a build show-off or quick tutorial with the owner on camera. Source is English 16:9; the 9:16 and Arabic versions still have to be built at the first job. Not for lecture clips or AI news.

Build a video in the <Style name> look (style card <slug>). Use when the director picked this style card, when the owner says "make it in the <Style name> style", "<slug>", "استايل <Style name>", or the video type is <video types from use_when>. Works for Arabic (Egyptian) and English, 9:16 reels<, and 16:9 if supported>. Not for <avoid_when>.

Build a video in the Midnight Screen Desk look (style card midnight-screen-desk) — a calm, organised news desk in three fixed zones: an Arabic info card on top, the real screen recording in a glowing band with punch-ins in the middle, and word-by-word captions (dim → bright) below. Use when the director picked this card, or the owner says "make it in the screen desk style", "three zones", "like the AI releases reel", "كارت فوق والشاشة في النص", or the video is AI news, a build show-off or a quick tutorial cut from his screen recording with an Egyptian Arabic voice-over. 9:16 reels. Not for lecture clips or direct offers.

Build a video in the Neon Node Explainer look (style card neon-node-explainer) — a plain stage, one headline per spoken sentence, and one small glowing diagram (tiles, lines, packets, checks, terminal, tool list) that builds itself part by part. Use when the director picked this card, or the owner says "make it in the neon node style", "node explainer", "API vs MCP style", "اعمله زي فيديو الـ MCP", or the video is an AI explainer, concept explainer, quick tutorial or AI news with a voice-over and no face. Arabic headlines + English mono labels; 9:16 and 16:9 both built. Not for talking heads, warm stories, real screen-recording demos or music-only hype reels.

Build a video in the Swiss Motion Reel look (style card swiss-motion-reel) — a Swiss-grid "instrument panel" with a constant thin HUD, flat 2-colour blocks, word slams, shape match-cuts and hard cuts on a 128 BPM beat. Use when the director picked this card, or the owner says "make it in the Swiss style", "motion reel", "like the motion designer reel", "HUD reel", "ستايل سويسري", or the video is a brand sizzle, product intro, "what we do" reel, launch teaser or any no-person, graphics-only, music-led video. Latin display type with Arabic in a clean geometric sans; built and tested in 16:9, 9:16 still to build. Not for talking heads, screen-recording tutorials or long voice-led explainers.

Build a video in the Horizon Prompt One-shot look (style card horizon-prompt-oneshot) — one continuous camera on a near-black stage lit by a soft planet-horizon glow; a glass app bar, a cursor and a prompt box morph into each other, a prompt is typed, the send button grows into a tile that blooms into a full-frame result, then a light wipe to a logo end card, every beat hit-synced to a UI sound. Use when the director picked this card, or the owner says "horizon prompt", "the prompt one-shot", "the ChatGPT-style promo", "زي فيديو البرومبت", "الكيرسر اللي بيكتب البرومبت", or the video is an AI tool show-off / prompt-to-result demo, a course or service promo opener, a launch teaser or a channel bumper. Not for talking heads, real screen-recording proof, data-heavy explainers or long tutorials. DRAFT — untested.

Build a video in the Cream Caret Type look (style card cream-caret-type) — Arabic words typed with a coloured caret on a flat two-colour page (night and paper that swap on hard cuts), select-highlight → delete → retype, a flat profile silhouette, one coloured dot that match-cuts into a flat vector eye, a zoom-through the iris, a fixed noun with a bold verb swapping every 16 frames, a pixel-art icon on the sign-off and a monogram end card — one sound per event, silence between. Use when the director picked this card, or the owner says "the typing intro", "caret type", "cream caret", "زي فيديو الكتابة", "الكلام اللي بيتكتب", "intro بالكتابة", or the video is a channel / "who am I" intro, a course or service intro hook, a short opener before a talking head, a word-play promise line or a bumper. 9:16 only, Arabic-first. Not for talking heads the whole time, screen-recording proof, data-heavy explainers or full spoken subtitles. DRAFT — untested.

Build a video in the Floating Desk Zoom look (style card floating-desk-zoom) — real app windows float as cards on warm paper, a virtual camera hard-cuts in on the action, follows the typing and glides back out. Use when the director picked this card, or the owner says "make it in the floating desk style", "paper desk", "zoom on the screen like the launch video", "اعمله على الورق", or the video is a build show-off, quick tutorial or AI news made from his OBS screen recording with a voice-over. Arabic or English; 9:16 reels. Not for lecture clips or talking heads.

Build a video in the Amber Grid Newsroom look (style card amber-grid-newsroom) — a hot "breaking news" desk: near-black grid field, the real screen recording in a framed window with instant reframes, an English title over an Arabic title line, and karaoke captions where the spoken word turns hot. Use when the director picked this card, or the owner says "make it in the amber newsroom style", "news desk", "breaking news look", "زي ريل opus 5.5", "ستايل الأخبار", or the video is AI news or a build show-off cut from his OBS screen recording with an Egyptian Arabic voice-over. 9:16 reels. Not for lecture clips or direct offers.

First-time setup for the HyperFrames student studio. Checks the computer (Git, Node.js, FFmpeg, the render browser), explains in plain words what is missing, recommends what to install, asks before installing anything, then makes a 3-second test video to prove it all works. Use when the student says "setup", "install", "اعمل setup", "نزّل البرامج", "it doesn't work", "command not found", when node_modules is missing, or when `npx hyperframes doctor` shows a red item. Safe to run again any time — it skips what is already done.

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.

Remix 2+ existing style cards of the Hyperframes video workspace into one NEW draft style card, layer by layer (palette roles, type, texture, grade, camera, light, edit rhythm, transitions, motion, sound, prompt parts), then let the owner pick the skills for the video and start the director. Use when the owner says "hybrid style", "remix styles", "mix two styles", "combine styles", "اعمل هايبرد", "ادمج الستايلين", or ticks cards and presses "Remix these" on the Styles board.

Build a video in the Hatch Cosmos look (style card hatch-cosmos) — a hand-drawn pencil-hatched world on one canvas, a block mascot (or a pair) that walks, looks, blinks and does ^ ^ eyes, a dive through its eye into a hatched galaxy of nebula blobs, tilted rings and needle stars. Use when the director picked this card, or the owner says "hatched", "hatch cosmos", "pencil cosmos", "the galaxy video style", "the mascot dive", "زي فيديو المجرة", "الستايل المرسوم بالقلم", "الكائن اللي بيدخل في عينه", or the video is a music-led show-off/teaser, a concept intro with a mascot, a "journey inside" beat or a channel bumper. 9:16 and 16:9 both built. Not for talking heads, real screen-recording proof, data-heavy explainers or photographic looks.

A short, design-led motion graphic where motion is the message — kinetic typography, stat count-up, chart/data-viz hit, logo sting / brand lockup, lower-third / callout / social overlay, animated map (highlight regions, connect places, zoom to a location), animated tweet / news-article / headline, webpage / UI animation (scroll, cursor, callouts), or fusing a real image's geometry into a chart. Usually under 10s (up to ~30s), no narration or live-action subject; renders to MP4 or transparent overlay. Longer / narrated / multi-scene → /general-video. Unclear → /hyperframes.

Make a new video with a beginner, start to finish — a few easy questions, pick a look from this repo's styles, build it with HyperFrames, check the frames, render and show it. Use when the student says "new video", "make a video", "اعمل فيديو", "عايز فيديو", "reel", "animation", or asks how to start a video. Hands the technical HyperFrames rules to the official hyperframes skills.

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

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

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

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

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