🎬 Composition & Render

The persistent window #appwin stays in the bg-layer with data-layout-ignore: border, radius, large shadow, title bar with 3 dots, and a mono URL pill (lock + window.urlLabel). The screenshots go inside it at (WIN_L, SHOT_T).

The frame keeps the premium look and disguises the fact that the content is a static screenshot—without it, it looks like a loose screenshot.

# persistent appwin; data-layout-ignore; bar + URL pill; shot inside the window.

A single element #cursor (SVG arrow) animated on the main timeline—not by scene—slides continuously. The hotspot stays at the tip at ~(6,3), so the tween uses x = alvoX - 6, y = alvoY - 3 so the tip lands in the center of the bbox. Movement duration:.7, ease:"power3.inOut".

Targeting the actual bounding box (not the eye) with curved easing is what makes the cursor look professional instead of robotic.

Global cursor; hotspot at the tip; real bbox; power3.inOut.

At the moment of the click (~start + 1.15s), the cursor scale:.82 in yoyo (pulse) and a #ripple (amber circle) expands and disappears, positioned at the center of the target.

The visual click feedback communicates the action to the viewer — without it, the cursor just seems to pass over the button.

pulse scale .82 yoyo; amber #ripple; timing ~start+1.15s.

The highlight .hlbox is just a rectangle with box-shadow (amber ring + glow) on the mapped bbox with ~6px of clearance, coming in with back.out. In step zoom:true, o <img> does scale 1 → 1.12 with transformOrigin in the center of the target.

Draws the eye to the active control without covering anything and gives it a cinematic push-in at the “ta-da” moment (the result).

.hlbox box-shadow; back.out; zoom:true; transformOrigin on the target.

The fixed palette: background #0D1321, panel #1D2D44, border #3E5C76, text #F0EBD8, amber accent #FFC300 and aqua-green code #2EC4B6. Amber is the ONLY dominant highlight — the ripple, glow, and frame use it.

Keeping a single accent and the same background in every scene gives the channel its consistent premium identity.

6 fixed colors; amber only; constant background; teal only for values.

Sora 700–800 for titles, Inter for body text/captions, JetBrains Mono for the URL pill and values. All three come as .woff2 local (Latin subset covers PT-BR) in assets/fonts/ — o build-demo.mjs injects the fonts.css.

Rendering is deterministic and offline — a font loaded via CDN would fall back and break the visuals.

Sora/Inter/JetBrains; local woff2; no CDN; Latin subset.

Recommended pacing: LEAD 0.5s (scene appears before the voice), TAIL 0.7s, FADE 0.4s between scenes. The cursor reaches the target ~0.7s before the main explanation; the click lands near start+1.15s.

This rhythm is what makes the animation seem to react to the narration — understanding the parameters lets you adjust the video without losing sync.

LEAD 0.5s; TAIL 0.7s; FADE 0.4s; cursor before the narration.

Kokoro is a TTS that runs 100% on your machine (pip install kokoro-onnx soundfile), voice pf_dora in PT-BR, with --speed 0.98. The first run downloads ~340MB of the model. No API key required.

Free, offline narration keeps the skill self-contained; the voice sounds good but lacks performance — so the user validates the voice-over afterward.

Local Kokoro; pf_dora; speed 0.98; no API.

O narration-template.sh read steps[].narration e ctaNarration of the steps.json, writes assets/txt/sN.txt (1 per step + CTA) and calls TTS to generate assets/audio/sN.wav.

steps.json is the source of the narration — generating the text from it prevents discrepancies between what’s written and what’s spoken.

steps[].narration; sN.txt → sN.wav; CTA as the last one.

O build-demo.mjs runs ffprobe in each sN.wav and builds the array AUDIO[] with real durations. There’s no manually typed array of times.

Timing is the single source of truth: measuring the actual audio eliminates the risk of the video and voice getting out of sync.

ffprobe; AUDIO[] derived; single source of truth for timing.

O composition-template.mjs (copied as build-demo.mjs) reads the steps.json (screens + bboxes + captions + narration), measures the WAVs, and generates the index.html with frame, cursor, highlight, zoom, and CTA — everything ready to go.

It's the heart of the render: a single node build-demo.mjs produces renderable HTML from the captured data.

build-demo.mjs; reads steps.json; generates index.html; do not edit by hand.

Starting from AUDIO[], the generator calculates S[] with start, dur, audioStart e end per scene (adding LEAD/TAIL). The GSAP timeline and the <audio> tracks read this same S[] — audio and animation synchronized by design.

Sharing the time source between voice and movement is what ensures synchronization without manual adjustment.

S[] derived from AUDIO[]; start/dur/audioStart; alternating tracks.

Each step has a caption no steps.json that becomes a translucent footer caption (Inter 600), appearing and disappearing with the scene, on a track alternating with the scenes.

Captions make the video readable without sound (muted feeds) and reinforce the speech—written once in steps.json.

caption per step; translucent footer; synchronized with the scene.

The final scene is the CTA: “CONTINUE AT” + INEMA.CLUB (INEMA cream, .CLUB amber with glow) + 🌐 inema.club. The default narration is "This is content from INEMA dot CLUB. Visit: inema dot club." and is already included in the template.

It's the channel's conversion point—included by default, it ensures no video goes out without the brand callout.

Automatic CTA; INEMA.CLUB; ctaNarration; cursor disappears at the CTA.

npx hyperframes init <nome> --example blank --non-interactive creates the video project folder with the base HyperFrames structure.

It's the starting point for every render—the project stays isolated, and you copy the skill's scripts into it.

init; --example blank; --non-interactive.

Copy to the project: capture.mjs, composition-template.mjs (such as build-demo.mjs), narration-template.sh e assets/fonts/ — or run node fetch-fonts.mjs to download them.

The skill is self-contained: it includes its own fonts and house style, without depending on another project.

capture/build-demo/narration; assets/fonts; fetch-fonts.mjs.

node capture.mjs actions.json opens the app in a fixed viewport, performs each action, takes 1 screenshot per state, and gets the target's real bounding box — output: assets/shots/*.png + steps.json.

It's the link between Track 2 (capture) and this one—without steps.json, build-demo has nothing to assemble.

actions.json; fixed viewport; real bbox; shots + steps.json.

node build-demo.mjs generates the index.html. Afterward npx hyperframes lint (0 errors) and npx hyperframes inspect --samples 14 (0 issues) validate layout and rules before spending time on rendering.

Lint and inspect catch CDN fonts, incorrect clips, and off-canvas elements without data-layout-ignore — cheap compared to re-rendering.

build-demo.mjs; lint 0 errors; inspect --samples 14.

Render --quality draft to check (extract 1 frame per step and show it to the user), then --quality high --fps 30 --output renders/<nome>-16x9.mp4.

You don’t listen to the audio in the render — always review the frames with the user and ask them to validate the voiceover before the final version.

draft → high; --fps 30; check frames; user validates voice.

The golden rules: capture first, animate later (deterministic render, no live site); fixed viewport = coordinate space; animate .scene-inner never .clip; decorative elements and frame with data-layout-ignore; local fonts.

These are the mistakes that most often break the render—knowing them beforehand saves hours of debugging in inspect.

capture first; fixed viewport; .scene-inner; data-layout-ignore.

Not implemented yet: 9:16/Shorts (app screens are landscape, so they’d need reframing); v3 real screen recording (agent-browser record) for apps with lots of movement; polish the curved cursor and "typing" (typewriter) in the fields.

Knowing what’s on the roadmap avoids promising what the skill doesn’t do yet—currently, the natural format is 16:9 with animated static screenshots.

9:16 future; v3 record; curved cursor; typewriter — all on the roadmap.