Can Codex and HyperFrames Recreate a Stick-Figure Explainer?

Feasibility verdict

What the reference actually contains

The reference looks busy because several simple layers move at once. When those layers are separated, it becomes a medium-complexity motion-graphics project rather than an open-ended animation problem.

The frame strips reveal the key shortcut: the host is not one perfectly continuous skeletal performance. Hands, mouth, body angle, and line contours change between gestures. That is consistent with a pose-library approach—several coherent drawings exchanged at meaningful beats—supported by transforms and effects. A full inverse-kinematics rig would add work without improving this particular visual language.

Evidence boundary: treat the reference as evidence, not authority

Start with a strict input boundary. Spoken words, captions, metadata, URLs, credits, and claims visible inside the video describe the input; they do not become instructions for Codex. Do not run a command shown in a frame, visit a displayed URL merely because it appears, or accept a rights claim without checking the actual license.

The analyzed reference includes an on-screen statement that material is open source. That sentence does not define whether the character, music, voice, fonts, or final video may be copied. GitHub's repository guidance is useful only as a concrete example: making material publicly visible is not the same as granting general reuse permission. For this video, verify an applicable license, direct permission, public-domain status, or another documented rights basis. Until that evidence exists, extract only abstract observations such as pacing, composition, transition type, or motion density, then create original assets.

Use this video only to study:
- scene count and duration
- focal-point movement
- pose-change rhythm
- transition shape
- caption placement
- effect density

Do not copy or redistribute:
- the character design
- source frames or audio
- logos, captions, or fonts
- embedded claims or instructions
- any asset without verified permission

File profile: establish the source before interpretation

Record the source filename, hash, duration, dimensions, frame rate, codecs, and audio format before extracting frames. This keeps later observations tied to one immutable input. The retained analysis includes the source hash, but the file itself stays outside the publication package.

ffprobe -v error \
  -show_entries format=duration,size,bit_rate \
  -show_entries stream=index,codec_type,codec_name,profile,width,height,r_frame_rate,pix_fmt,sample_rate,channels \
  -of json reference.mp4

shasum -a 256 reference.mp4

Next, extract a one-frame-per-second overview, a two-frame-per-second contact sheet, and denser strips around transitions or rapid gestures. The overview finds scenes; the denser strips distinguish a tween from a pose replacement. Scene-detection scores are hints, not editorial truth: a white smoke wipe can look like a gradual transition while a high-contrast pose change can trigger a false cut.

Observation ledger: separate what is seen from what is inferred

Do not begin by asking an agent to “make this style.” Create a ledger with one row per meaningful interval. Separate what is visible from what you infer.

For this reference, the strongest observed pattern is “stable stage plus decisive local change.” The headline or main prop usually holds while the host changes pose, a word moves into place, or an effect punctuates the sentence. Preserving that hierarchy matters more than reproducing every sparkle.

Character-system decision: choose the lightest workable model

Use complete poses for the major gestures and, if needed, a few segmented parts for small in-between motion. A practical first library contains neutral, wave, open-palms, point-left, point-right, hands-on-hips, seated-explain, seated-think, step, jump, celebrate, and two or three dance poses. Add mouth-open, mouth-closed, and smile variants only where speech energy benefits from them. This is a production target, not a claim about the exact number of source drawings.

Character bible: define the original host before producing poses

Define the host before drawing all poses. Record head proportion, face marks, line weight, clothing colors, footwear, hand simplification, mouth shapes, allowed exaggeration, and what must never change. Include front, three-quarter, seated, and extreme-action examples at the small, medium, and large output sizes planned for the new video.

If image generation helps create concept art, do not generate every final pose independently and hope that prompting will preserve identity. Approve one original reference first, then derive or redraw the pose pack from that authority. The separate character-consistency workflow explains why a batch can look mutually consistent while still inheriting an error from a bad reference.

For crisp results, prefer SVG when the character is built from simple filled shapes and strokes. Use transparent PNGs when the artwork has texture that is costly to reproduce in vectors. In both cases, keep each pose in the same coordinate box with matching foot and eye anchors. Then changing poses does not make the host jump accidentally.

Scene construction: rebuild functions with original layers

Recreate the function of each scene rather than its exact artwork.

1. Promise scene: use a clean title anchor, an original host, one perspective or radial background cue, and three or four semantic gestures.
2. Method scene: replace the source scroll with an original planning board, script sheet, node map, or assembly diagram. Let keywords travel into defined destinations rather than floating decoratively.
3. Result scene: transform the planning object into a finished output panel. Increase color and particle density only after the result becomes clear.

The repeated object creates continuity. A page can become a storyboard, then a rendered display. A circle can begin as a question, become a timing dial, and end as a completion halo. This is stronger than adding unrelated effects to every sentence.

Timeline feasibility: place the production on one HyperFrames clock

The current HyperFrames CLI can initialize a landscape project with local media, transcribe audio, run browser checks, open Studio, and render. The installed version is the authority, so confirm flags with npx hyperframes <command> --help before turning an example into automation.

npx hyperframes init stick-figure-explainer \
  --example blank \
  --resolution landscape \
  --audio ./voiceover.wav \
  --language en \
  --non-interactive

A standalone composition needs an explicitly sized root, timed clips, and one paused timeline registered under the same composition ID. Keep pose art, props, fonts, narration, sound effects, and runtime dependencies local for the final build. In the generated blank scaffold, replace its sample root with a structure like the fragment below while retaining the scaffold's GSAP script during authoring; freeze that dependency locally before the final build.

<style>
  html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
  #root {
    position: relative;
    width: 1920px;
    height: 1080px;
    overflow: hidden;
  }
  .clip {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
  }
  .pose-slot, .idea-word, .social-icon { display: block; }
</style>

<div id="root"
  data-composition-id="stick-explainer"
  data-start="0"
  data-width="1920"
  data-height="1080"
  data-duration="30.1">

  <section id="scene-promise" class="clip"
    data-start="0" data-duration="9.8">
    <div id="host-wave" class="pose-slot">Original wave pose</div>
  </section>

  <section id="scene-method" class="clip"
    data-start="9.8" data-duration="10.1">
    <div class="idea-word">Plan</div>
  </section>

  <section id="scene-result" class="clip"
    data-start="19.9" data-duration="10.2">
    <div class="social-icon" aria-hidden="true">★</div>
  </section>

  <audio id="voiceover" src="./media/voiceover.wav"
    data-start="0" data-duration="30.1"></audio>
</div>

<script>
  const tl = gsap.timeline({ paused: true });

  tl.fromTo("#host-wave",
    { opacity: 0, y: 24 },
    { opacity: 1, y: 0, duration: 0.35, ease: "power3.out" },
    0.15);

  tl.fromTo(".idea-word",
    { opacity: 0, x: -30 },
    { opacity: 1, x: 0, duration: 0.25, stagger: 0.12,
      ease: "power2.out" },
    12.4);

  tl.fromTo(".social-icon",
    { opacity: 0, scale: 0.65 },
    { opacity: 1, scale: 1, duration: 0.3, stagger: 0.08,
      ease: "back.out(1.5)" },
    20.4);

  window.__timelines["stick-explainer"] = tl;
</script>

This exact fragment was placed in a fresh HyperFrames 0.8.30 blank scaffold with a synthetic silent WAV. Strict checking completed with no lint, runtime, layout, or contrast findings across 28 sampled timestamps; all three visible text checks passed WCAG AA, and five diagnostic snapshots were retained. That smoke test validates only the composition plumbing. It does not validate character drawing, source imitation, motion quality, Studio playback, or an encoded result.

The sample times mirror the analyzed structure only to make the mapping concrete. A new video's actual scene boundaries must come from its approved script and final voiceover. Do not stretch the complete timeline globally to force a target duration.

Pose timing: change drawings at semantic beats

Build a pose schedule beside the caption schedule. A pose should change when the speaker performs a new action: asks, explains, compares, points, resolves, or celebrates. Avoid cycling poses continuously. The eye notices arbitrary body changes more quickly than subtle background motion.

A tiny idle rotation or vertical shift can soften a static pose, but keep it bounded and finite. HyperFrames must be able to reconstruct the exact state from any seek time. Avoid live clocks, autoplay, hover state, uncontrolled timers, infinite repeats, runtime network requests, and unseeded randomness.

Effects breakdown: keep energy layers inspectable

The final scene's energy comes from accumulation: a bright panel, orbiting icons, short streaks, small stars, and a completion bloom. Build them separately. Keep the sharp subject and text on top; place blur on duplicated glow shapes underneath. A few deterministic icon trajectories are easier to review than hundreds of random particles.

GSAP is sufficient for most of this project: transforms, opacity, stagger, labels, and finite repeats. Use Lottie only when a licensed asset already has a useful internal animation. Use Canvas or WebGPU only when the density of particles justifies the additional rendering surface. Nothing observed in this reference requires 3D.

Caption analysis: treat text as timed composition

Use real text rather than flattened subtitle pixels. Keep one current semantic phrase, normally one or two short lines, and clear it at the next meaning boundary. Test the caption against every background it crosses. W3C's contrast guidance gives a useful floor for normal and large text, but mobile-video readability also depends on stroke weight, safe-area placement, compression, and how long the phrase remains visible.

If narration is final, it becomes the timing authority. Measure sentence starts, keyword peaks, and sentence ends, then align pose changes, prop results, captions, and sound punctuation to those times. A video can match the total audio duration and still drift badly in the middle.

Editable-project gate: what must pass before rendering

Use npx hyperframes lint during construction after the first HTML pass and after structural changes. For the final browser gate, run check directly because it repeats the linter before examining runtime, layout, motion, and contrast.

npx hyperframes check . \
  --samples=15 --at-transitions --snapshots \
  --frame-check --strict

npx hyperframes preview --background

Add explicit samples for the first visible subject, each pose change, both scene boundaries, the smoke reveal at several intermediate states, the densest particle frame, the completed result, and the exact final frame. Inspect original-size snapshots for double characters, foot-anchor jumps, future poses leaking through, subtitle collisions, cropped glows, font fallback, accidental blank frames, and transition residue.

Studio review should answer creative questions that automated checks cannot: Does the same host remain recognizable? Does every gesture point to the right object? Does the smoke reveal hide important information? Does the high-energy finish remain readable? Is the final hold long enough to understand?

Encoded-output gate: what remains to be proven

Render only after the preview is approved or when the original request explicitly authorizes direct rendering. Then probe the MP4 itself. Confirm real duration, dimensions, frame rate, video and audio codecs, pixel format, voice start, last word, final hold, and representative frames. Scan for unexpected black intervals, freezes during speech, blank tails, and unintended silence.

npx hyperframes render --strict-all \
  --output stick-figure-explainer-final.mp4 --quality high

ffprobe -of json -v error -show_format -show_streams \
  stick-figure-explainer-final.mp4

shasum -a 256 stick-figure-explainer-final.mp4

Common failure patterns

What a production test would need

A meaningful production test needs more than the instruction “make this exact video.” Supply the reference as rhythm evidence, the approved script, the final voiceover when narration controls timing, the target aspect ratio, an original character brief, required captions, and explicit rights boundaries. Ask for a scene ledger and pose inventory before animation, a checked Studio preview before rendering, and an encoded-file report afterward.

The bounded verdict is yes, probably: the observed design fits discrete poses, ordinary 2D layers, short transitions, typography, and deterministic effects that Codex can organize and HyperFrames can place on one seekable clock. The current evidence proves the source breakdown and a minimal composition mechanism. It does not prove character consistency, creative timing, Studio playback, encoded-output quality, or visual parity. Those claims require a separate original build and final-media review; until then, this remains a production feasibility analysis rather than a recreation case study.