Video & Animation

Render a 5-6 second motion graphic in which an oversized condensed headline (2-4 words) punches in behind a presenter, using a background-removed cutout of the presenter layered on top of the lettering. A hard cut then removes the presenter while the same headline holds the exact same size and position, and a short supporting line appears for a reading hold. Use it for talking-head intros, chapter openers, launch announcements and social hooks when you have one presenter clip, a headline, a supporting line and a palette. Built on HyperFrames; delivers a 1920x1080 H.264 MP4 plus the editable project.

Make a 30-45 second launch film for a product by staging it inside one persistent, neutral chat window. A user types a request, the assistant answers and calls the product as a connected tool, a progress card runs, a follow-up triggers a second tool action, and the result lands as a count-up headline number before closing on the logo, tagline and call to action. Use when you need a launch, feature or integration announcement video for something that plugs into AI assistants (a skill, MCP server, plugin, connector, CLI). Delivers a rendered 1920x1080 MP4 plus an editable single-file HyperFrames project.

Intervista di regia prima di HyperFrames — idea, pubblico, look, motion, suono e scene decisi blocco per blocco, ogni domanda con opzioni e consiglio, poi consegnati a HyperFrames come brief già chiuso.

Produz vídeo determinístico com HyperFrames — composição HTML/CSS capturada em Chrome/FFmpeg, com formato, fps, duração e resolução declarados e render autorizado. Use quando a entrega É um arquivo de mídia renderizado (MP4, WebM, MOV, PNG), quando o usuário pedir peça de vídeo, animação exportada ou composição reproduzível. Não usar para vídeo já existente embutido num site (isso é asset web comum) nem para UI animada interativa.

Build a motion graphic where a screen recording plays in a large frame beside a checklist, and each checklist item ticks off at the exact moment that step happens in the recording, ending with every item checked and a short hold. Use when someone has a screen recording (product walkthrough, tutorial, onboarding, install demo) plus a list of steps with timestamps and wants a "watch the steps get done" film. Input is a recording, step labels with timestamps, a title and an optional palette; output is a 1920x1080 H.264 MP4 and the editable HyperFrames project.

Build a 15-20 second product launch film that shows the product's real screen on a laptop built from plain CSS (no 3D model, no generation model) in a dark studio, scrolls the page, zooms into the interface for one key action such as typing a search, and resolves to the logo lockup. Use when someone has a full-page screenshot or screen recording of their product, one action worth showing, and a logo, and wants a short silent-friendly launch teaser rendered as a 1920x1080 MP4 with an editable HyperFrames project.

Author a HyperFrames slideshow — a presentation, pitch deck, or interactive deck with discrete slides, fragment reveals, branching, hotspot navigation, and built-in presenter mode with speaker notes; also converts an existing page into a deck. Output is a navigable deck, not a rendered MP4. If the user didn't explicitly ask for a slideshow, confirm before authoring. Unclear → /hyperframes.

Port an existing Remotion (React) composition''s source to HyperFrames HTML. Use ONLY on an explicit ask to port/convert/migrate/translate a Remotion source — one-way, Remotion-only. A passing Remotion mention, reference-only code, or "make something like my Remotion video" is a fresh build (/general-video). Unclear → /hyperframes.

Package an existing talking-head / interview / podcast video with timed, designed GRAPHIC OVERLAY cards — kinetic titles, lower-thirds, data callouts, quotes, side panels, picture-in-picture — synced to the transcript, on a 16:9 / 9:16 / 4:5 canvas of your choice; the clip plays untouched underneath. Trigger on "graphic overlays", "on-screen graphics", "package / dress up my video". Not plain subtitles (/embedded-captions). Unclear → /hyperframes.

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 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 Mint Lecture Room look (style card mint-lecture-room) — a calm classroom cut of a real lesson: one long take with slow zooms that follow the point, a topic lower third, a quiz card that asks, counts down think-time and then answers, and karaoke captions that light the current word. Use when the director picked this card, or the owner says "make it in the lecture room style", "lecture clip", "course cut", "quiz card", "قص من المحاضرة", "سؤال وجواب", or the video is a lecture clip or quick tutorial cut from his AI course recordings (Egyptian Arabic). 9:16 reels. Not for AI news or direct offers.

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

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

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.

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.

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.

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.

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.