The encoded contact sheet comes from the MP4 itself. The second sheet is retained separately from the editable composition, making it possible to compare preview-stage frames with delivered pixels rather than assuming the render preserved every state.
What Codex can reproduce
The method can reproduce the structure of a short signature-style sting: a dark stage, a colored energy head that travels in writing order, a clean high-contrast wordmark revealed behind it, a restrained completion bloom, and a stable final hold. It should not copy the reference wordmark, signature, or audio. Treat a supplied video as evidence for rhythm, color behavior, and staging; create original geometry and use only source material you are allowed to use.
The retained example uses the exact text Grow AI Skills. It is typeset with a locally frozen Allura font and revealed with hand-authored centerline guides. That makes it an original typeset wordmark example, not an authentic human signature and not proof of how a person would physically write the phrase.
Choose the reveal method from the source
| Input | Recommended strategy | Evidence boundary |
|---|---|---|
| Open, stroked SVG paths | Animate stroke dash offset directly, then reveal the clean final paths | The source can preserve real path order only when its path structure actually records that order |
| Filled or outlined SVG | Keep the filled mark as the final authority and draw authored centerline masks over it | Outline order does not prove pen order |
| Raster logo | Preserve the supplied pixels and reveal them through an authored SVG mask | The raster contains appearance, not writing geometry |
| Exact text | Freeze a redistributable font locally, typeset the final mark, and author reveal guides | Typeset text must not be presented as a real person's signature |
Reject unsafe or unstable dependencies early. An SVG with scripts, event handlers, remote references, or foreignObject needs sanitization. A tiny ambiguous raster cannot preserve an exact identity. A remote font can change or disappear at render time. In those cases, stop, obtain a better source, or narrow the promise.
Build the finished mark before the animation
The completed logo is the visual authority. Set its scale, spacing, position, and final color before drawing any glow. For the 1920 by 1080 example, the full phrase sits near the optical center with enough room for ascenders, descenders, and the traveling head. The background is black; the settled wordmark is warm white; the active head moves through magenta, violet, and cyan.
Freeze the font file and its license beside the composition. Record the source URL, local path, and SHA-256 in a media ledger. Do the same for every sound effect. The render should not depend on a font CDN, a remote image, a live clock, a browser hover state, or uncontrolled randomness.
Separate the effect into four layers
- Completed mark: the sharp, readable wordmark that remains at the end.
- Reveal mask: one or more centerline paths that expose the completed mark in natural writing order.
- Writing head: a narrow bright core at the current path position, with a small colored halo.
- Completion energy: a short bloom that resolves quickly and never hides the letterforms.
Use SVG path drawing for the masks and compute the head position from the same path progress. The colored head and the visible ink then share one source of truth. Keep blur on duplicated glow layers rather than on the final white wordmark. This preserves edge clarity during the hold.
Worked timing: Grow AI Skills
The example lasts 5.8 seconds at 30 frames per second. The timeline is intentionally asymmetric: short words finish faster, the longer word receives more drawing time, and the final result holds for exactly one second.
| Time | Visible event | Sound role |
|---|---|---|
| 0.000–0.200 s | Clean black pre-roll | Silence |
| 0.200–0.367 s | Magenta ignition at the first stroke | Short local whoosh begins |
| 0.367–1.567 s | Grow writes on | Whoosh decays |
| 1.567–1.700 s | Hidden pen lift | No new hit |
| 1.700–2.267 s | AI writes on | Visual rhythm only |
| 2.267–2.400 s | Second hidden pen lift | No new hit |
| 2.400–4.033 s | Skills completes | Energy rises toward completion |
| 4.033–4.600 s | Details settle and one bloom resolves | Soft local chime at completion |
| 4.600–4.800 s | Glow settles to the clean mark | Chime tail fades |
| 4.800–5.800 s | Exact final lockup holds without drift | Tail ends cleanly |
A pen lift should not look like a laser dragging across empty space. Fade or compress the head during the jump, move it deterministically to the next start point, and restore it at the new stroke. The completed mark should never flash backward or reveal future letters during that move.
Keep the timeline seek-safe
Use one paused GSAP timeline registered with the HyperFrames composition. Every visible state must be reconstructable by seeking to a timestamp. Avoid independent request-animation-frame loops, delayed DOM mutations, autoplay, and wall-clock calculations. If the user scrubs from 0.4 seconds to 4.5 seconds, the mark should immediately appear in the correct state without replaying hidden setup work.
Declare the whole animation as one full-duration clip. Add a motion sidecar that checks the wordmark appears by its intended time, remains in frame, and keeps changing during the draw phase. A final still is desirable here, so define the allowed static window to match the intentional one-second hold instead of adding meaningless drift.
Use sound as punctuation
This is an unnarrated sting, so two small sounds are enough: one ignition whoosh and one soft completion chime. Use locally frozen, licensed or original files. Place them at visible events, reduce their level before they become harsh, and let the final chime tail end inside the composition. Do not extract or copy audio from a reference video unless you have the necessary permission.
Check before you render
npx hyperframes lint .
npx hyperframes check . --strict --samples 15 --snapshots --at-transitions --frame-check
npx hyperframes preview --backgroundSample the black pre-roll, ignition, each word's midpoint, both pen lifts, the last stroke, the bloom, the settled lockup, and the exact final frame. Inspect the PNGs at full size for font fallback, cropped ascenders or descenders, future letters leaking through the mask, detached glow, double edges, black-frame mistakes, and a final frame that is not fully assembled.
The browser check is a composition gate, not an encoded-video claim. Open Studio and review the actual animation before rendering. Only after approval should the workflow produce a high-quality MP4. Then probe the encoded file, measure its real duration, dimensions, frame rate, codecs, audio, black intervals, frozen intervals, and final frame, and compute SHA-256.
What the handoff should say
At preview stage, report the source strategy, exact text, canvas, duration, local font and sound provenance, check result, snapshot result, Studio URL, and NOT_RENDERED. After approval, add the absolute MP4 path, encoded media facts, black and freeze scan results, representative frames, and hash. A local render is still not a production-site deployment or social-platform publication.
