motion-graphics-promo
After Effects-quality motion, authored as HTML/GSAP compositions and rendered deterministically with HyperFrames. You get editable source, exact native-screen fidelity and a reproducible render, which a hand-keyed After Effects project does not give an agent.
Source study: Higgsfield AI, "AI Created Every Motion Graphic in This Video" (YouTube W3-RIZ-Ps64, 11:33, Sep 2026), inspected at 720p with contact sheets, plus the pacing of a 4-minute official SaaS product overview. Use them for grammar and pacing only. Never reuse their pixels, music, voice, logos or UI.
1. Brief before motion (lock the story first)
The tutorial spends its first minutes turning a brief into asset choices and a storyboard before anything moves. Do the same, in five lines:
- Audience and moment: who is watching, on which platform, sound on or off.
- One product, two jobs, one next step: the viewer should remember exactly that.
- Proof inventory: real screenshots and screen recordings you actually have, with source build/date. Anything not in this list cannot appear on screen.
- Palette and type: the brand's own identity. Borrow the reference's contrast level (bold condensed type over saturated fields), not its exact colors.
- Aspect: design vertical (1080x1920) as its own composition; don't crop landscape.
2. Motion grammar
| Beat | Rule | Why |
|---|---|---|
| Entry (0-3 s) | Energetic: a label falls, rotates, bounces and settles once; or a device drops in with weight. | Hooks the scroll-stop without hiding the product. |
| Transition | One main transition per task. A phone slides or tilts between color fields, or navigation hands off to the next real screen. | Motion should explain grouping or movement between actual product states. |
| Settle | Short spring (GSAP back.out(1.4) or elastic.out(1, 0.6), 0.4-0.7 s). The device settles before the screen needs reading. | Physical weight reads as premium; wobble during reading reads as noise. |
| Proof hold | At least 2-3 s of stable, readable screen after each transition. | Screens need more reading time than decorative labels. |
| Accents | Masked/clip-reveal typography, rectangular color accents, collage or color-field handoffs. Use sparingly. | This is the "After Effects look"; overuse turns into a template. |
Timing defaults: 60 fps; entries 0.5-0.9 s; label staggers 60-90 ms; never animate text the viewer must read while they read it.
3. The 32-second promo timeline
| Time | Purpose | Evidence rule |
|---|---|---|
| 0-4.4 s | Recognizable user problem, one concise line over licensed B-roll or a bold color field. | No invented testimonial or customer identity. |
| 4.4-13.3 s | Real screen sequence for the first job, with navigation continuity. | Actual supported path; no fake clicks or synthetic UI. |
| 13.3-22.2 s | A second complementary job with a visible outcome the recording proves. | Select from verified footage; don't import a competitor's claims. |
| 22.2-26.7 s | Return to the payoff and product identity. | Phrase as purpose or invitation, not unmeasured time or revenue savings. |
| 26.7-32 s | Single CTA with URL and truthful availability; musical release. | Match the live destination and exact release status. Keep the music credit. |
For longer consideration-stage videos, follow the official-overview structure instead: human context first, then one workflow per chapter, return to the people between tools, brand close.
4. Build it (HyperFrames + GSAP)
- Scaffold a HyperFrames composition (see the
hyperframes-best-practicesskill for CLI, lint and render gotchas). Pin the HyperFrames version and a local GSAP 3 build in the project; don't load animation runtimes from a CDN at render time. - Device frame: a dimensional graphite shell (soft top light, 1-2 px bevel highlight, contact shadow) holding a real screenshot or a muted
<video>of a screen recording. Animate the shell withtranslate3d/rotate, keep the screen content upright and unscaled once settled. - Kinetic type: split headline into words;
gsap.from(words, {yPercent: 110, rotate: 4, stagger: 0.07, ease: "back.out(1.6)"})inside anoverflow: hiddenmask. One headline per beat. - Color-field handoff: full-bleed rectangles wipe (
clip-path: inset()tween) between beats; the incoming field carries the next device position. - Timeline: one master
gsap.timeline({paused: true})with labels per beat ("problem","job1","job2","payoff","cta"), so HyperFrames can seek any frame deterministically. - Music: licensed track only (e.g. CC BY with credit). Record source URL, license, credit line and file hash in
audio-provenance.json; edit to a composed ending on the CTA beat. - Render at the target resolution/fps; H.264 + stereo AAC for social.
5. Explainer and ad design kit (proven in production)
This kit shipped a series of product explainers and 15-second vertical ads. The first version used dark backgrounds and was rejected as "too black". What worked:
- Real footage behind every scene: licensed stock footage of the product's real-world context (e.g. match footage for a sports app), graded with a brand-color gradient (
linear-gradient(180deg, brand 74% → transparent → ink 50%)), plussaturate(1.3) brightness(1.12)on the bed. - Palette: one saturated brand color plus one high-energy accent (e.g. violet
#6c4cff+ lime#d7ff3c), with sky/coral as stickers only and ink#16132efor text on the accent. - Type: condensed display caps (Archivo,
font-stretch75-80%, weight 900, 74-96 px on 1080-wide). The key word of each headline sits in an accent marker box rotated -2°. Check glyph coverage per language: Archivo has no Cyrillic, so switch to Inter for ru/uk/bg. - Device frames: white/silver phone and browser frames with a 3D perspective stage (
perspective: 1800px) showing real screenshots or real screen recordings. Every screen must show real content (people, logos and data), not empty states. - Falling stickers: 2-3 short uppercase labels drop in, rotate and settle next to the device (one per beat).
- Transitions: an angled accent-color wipe or a 2-frame white flash between beats.
- Voice-over (TTS or recorded) with music ducked under it, then the final mix normalized to -14 LUFS (
ffmpeg -af loudnorm=I=-14:TP=-1.5:LRA=11). - Real device capture (macOS): iPhone Mirroring plus
screencapture -v -V <secs> -R<x,y,w,h>records a real app. Activate the mirroring window before sending taps. The phone must be locked for Mirroring to connect. - Localized variants: keep one template with
{{placeholders}}and generate a copy per language with a small script (seereferences/vertical-ad-15s.template.html). - UTM on every link in captions and bios:
?utm_source=<platform>&utm_medium=organic&utm_campaign=<video-slug>.
Render traps (each one nearly shipped a broken video)
- HyperFrames can silently drop every overlay partway through the render when a composition has many
<video>clips (6+ beds, or beds plus phone clips). Preview snapshots still look fine. Pre-concatenate footage beds into one video, keep clip count low, and always inspect a contact sheet of the rendered MP4 before scheduling. - GSAP
fromTowithautoAlpha: 1in the from vars shows elements at authoring time. Usetl.set(el, {autoAlpha: 1})and thenfromTowithout it. - Uploads to social schedulers sometimes return an empty body. Retry, and confirm the hosted file's byte size matches before scheduling.
- Real people's faces and names on screen (players, customers) need their consent before paid or public use. Flag it if it's missing.
6. Verify the encoded file, not the preview
- Extract frames from the delivered MP4 (e.g.
ffmpeg -i out.mp4 -vf fps=2 frames/%03d.png) and read them: is every screen readable during its hold, does any caption overlap the platform UI safe zones, does text ever appear mid-animation when it must be read? - Check decode completes, duration, fps, frame count, loudness and peak; record the SHA-256 of the final file.
- Run HyperFrames lint/layout checks and a contrast sample on caption frames.
- Keep a manifest binding every source asset (screens with build/date, B-roll license, music license) to the final hash.
7. Boundaries
- Real UI only. If a flow cannot be recorded (sign-in stalls, feature not shipped), cut it; never mock it.
- Downloaded reference videos, contact sheets and transcripts are private analysis material; never upload them with the creative.
- No popularity, ROI or time-saved claims unless measured and sourced.
- Creative approval is not publication: scheduling and posting are separate, confirmed steps.