03 · Programmed video
No generated pixels in the picture. The picture is code: one paused GSAP timeline inside HyperFrames, every element placed and timed from a measured file, rendered frame by frame, then read back from the delivered MP4.
Example A · Apple · Intention · bilingual ZH–EN edition
Apple's 91-second film is typography in motion. Coco's edition keeps the English picture and audio untouched and adds Simplified Chinese as a quiet companion line that behaves as part of the original choreography, not as subtitles laid on top. The brief: faithful bilingual localization; the test: a Chinese reader should feel the line was authored with the source.
The English master (1920×1080, picture and audio untouched) rules motion, effects, direction and timing. Apple's own official Chinese version (848×480, a timing and wording guide, never a delivery asset) rules the exact wording and the phrase boundaries. An earlier pass let the Chinese file rule both and flattened four functional effects; the rule was corrected and recorded so it could not drift back.
BRIEF.md · OFFICIAL-CHINESE-REVIEW.md "Authority correction" · source: Apple - Intention 1080p.mp4 · reference: Designed by Apple in California - Original Chinese.MP4
The English master was decoded at 24000/1001 frames per second and each staged word measured from first visible contrast to full brightness. The result is a cue map of 29 lines with the approximate source window and the bilingual treatment for each, from "如果 follows If from first visibility through full brightness" to "the Apple tagline stays English, as in the official Chinese master".
LOCALIZATION.md (cue map) · index.motion.json · snapshots/ (78 sampled frames)
Chinese is grouped into meaningful units, and each unit starts and reaches full opacity with its English counterpart even when Chinese grammar reorders the sentence. In the "perfect" question, 做到好？ follows "perfect" before 哪一件事 follows "anything". In the busy line, three phrase units exactly span "is busy", "making" and "everything".
MOTION-MAP.md "Semantic Pairing Revision" · motion references: discrete-text-sequence, scale-swap-transition (flat-opacity variation)
Where the English line does something, the Chinese does the same thing: the hinge that bends 丰富｜等于选择。 at its middle joint before the clockwise arc; the low-amplitude water float on 设计东西需要; the alternating blur in which 焦点 is sharp while "focus" is blurred and both resolve sharp; the baseline measurement guides that draw around a fixed 主旨; the inward dot-collapse on the convenience line; the six middle dots of 这需要时间······ building one at a time; the two closing lines revealed by the English master's own baked circles. Nothing is added without an English analogue: no boxes, no shadows, no glow, no gradients.
MOTION-MAP.md "Removed-effect audit" · frame.md "Do Not"
PingFang SC Regular at 28 px (24 px where a moving circle or compact shape makes it crowded), 1.2 line height, letter spacing 0, natural Simplified Chinese punctuation, placed 24 px directly beneath the related English phrase. Colours are sampled from the film itself, ink and paper, so nothing invented enters the frame.
frame.md · ink #1C181B · paper #D0CCCF · english_to_chinese 24 px (12 px compact)
All render-critical motion lives in one paused GSAP timeline with deterministic values only, so every frame renders the same way twice. The particle breakup of 感觉？ uses the same glyphs on a deterministic canvas. The only thing added to Apple's film is the edition credit; the closing "Designed by Apple in California" lockup stays English, matching Apple's own Chinese master.
index.html (33 KB composition) · HyperFrames 0.7.102 · window.__timelines, paused
Cue entrances, full-opacity states, exits and high-motion midpoints were checked live at 64 exact cue-boundary frames plus 17 focused micro-fix frames, then 61 frames were re-extracted from the rendered MP4 across every revised ramp, disappearance, circle beat and closing transition. The frame audit caught two regressions nobody asked about: the time line exiting in the wrong direction, and a collapse that clipped the 1920 px line box instead of the text width. Both were fixed and re-sampled before delivery.
PAIRED-MOTION-QA.md · renders/Apple-Intention-Bilingual-ZH-EN-Official-Frame-Synced-Final.mp4 (8 August 2026)
Example B · Toastmasters · Table Topic 「五」 · recruiting clip
Tony's concept: show what a world-class Table Topic can be. The card deals Abby one character, 「五」, and in about ninety seconds, between the green light and the red, she turns it into the club's recruiting message: 15 founding members in, 5 short, charter by 30 September. Viewers watch the skill the club trains while they are being invited to it. Vertical, for phones, with a QR code that leads to the sign-up.
Twenty-three lines of Chinese narration. Above them, the eight moves a strong impromptu answer makes: the pause before the first word, restating the prompt, making the abstract visible (a hand, five fingers, a fist), the bridge from prompt to message, one fact stated plainly, a rule of three for the invitation, naming the skill once, a callback close. Each fact has a source line: the member count from Tony, the venue and bilingual note from the club site, the timing lights from Toastmasters' standard. Pauses are written into the script as (停 N).
SCRIPT.zh.md · Abby speaks for the club ("我们"); no personal biography is put in her mouth · "Apex Learn 演讲俱乐部", never a translated brand
The narration tool voices each line separately in Abby's approved voice, caches every clip by a hash of the request so a retake only re-records what changed, then joins the clips with the pauses the script wrote: 0.45 s between lines, 0.9 s at a paragraph, and the explicit (停 N) holds. The timeline it writes carries every line's start and end. The tool re-checks that the free model still costs nothing before sending a single request.
narrate.py · voice 大曼007 · s2.1-pro-free · clips/NN.wav + NN.json · variants/x1-cut.wav · voice.wav 90.9 s · timeline.json
The first cut pasted a lectern photo in front of a mid-torso avatar clip, and Tony saw at once that her hands should be on it. A pasted lectern cannot carry hands, so a new look was generated inside HeyGen from two references: Abby's identity avatar and the Toastmasters lectern photo. The result is a 1536×2752 portrait with both palms on the lectern top and the logo facing the camera. Three variants were generated; v1 drifted younger with the wrong earrings, v3 grew extra fingertips under the ledge, v2 held the face, the blazer, the clover earrings and necklace, and was chosen. The prompt that fixed identity spelled out every feature instead of trusting the reference alone.
heygen avatar create · type prompt · avatar_id = Abby + reference_images = lectern asset · heygen/look/request-v2.json · abby-looks-compare.jpg · 1 credit per look
HeyGen Avatar V at 1080p, driven by the joined voice file plus a 0.8 s pad, finished in about four minutes. The returned clip's audio was cross-correlated with the upload: 13 ms early on the first look, 23 ms late on the lectern look. The offset is written to a file the build reads, so the voice the viewer hears and the audio the lips follow agree within 0 to 5 ms in the final file.
heygen/request.json · engine avatar_v · audio_asset_id · 91.7 s = 108 credits (582 → 474) · film/assets/abby.offset.json
A build script writes the 1080×1920 composition from the voice timeline. The opening card, then Abby and the voice from 4.2 s. In the lower zone, each graphic starts on the line it illustrates and ends on the next: five fingers closing into a fist, the venue, the club name, a grid of twenty seats filling to fifteen, three chips for the rule of three, the 30 September date, the fist again, the QR code with the sign-up address. One caption clip per line, held until the next line begins. Because every start time is read from the timeline, a re-voiced script re-times the whole film with no hand edits. Fonts are subset to exactly the characters used.
film/build.py → index.html · assets/voice-timeline.json · build.py --fonts · build-square-v1.py kept as the earlier layout · npx hyperframes check
The laptop had 403 MB free, so the render ran on the studio's render machine. The master is 83.6 MB; the share copy for WeChat is 12.5 MB. Checks were run on the delivered share file, not the master: the voice starts where the timeline says, the QR code decodes to the sign-up address from the file's own frames, and still decodes at half size. Final v2 was sent on 29 September, the day before the club's charter deadline.
film/renders/apexlearn-table-topic-wu-lectern-share.mp4 · master on the render machine · QR → toastmasters.apexlearn.org/#join
What the two examples share
Rights and gates