A cartoon mascot in a vertical Short is not a drawing that moves. It is a skeleton, a draw order, a light rig and a camera, authored as data and rendered to MP4 by a headless browser. The newest Lumenreel · Prism Crash Short is the first film here built that way end to end: the crystal critter on screen has a pelvis, a two-segment spine, an ankle joint, and a blink that is a lid rather than a squash. This is what the two skills that produced it actually own, and which parts of it were measured rather than reasoned out.
Two skills, one boundary
/cartoon-figure owns the figure and the camera that looks at it: how a drawn 2D character is built, rigged, posed, moved, shaded, lit and staged, framework-agnostic and procedural. /hyperframes owns how a DOM timeline becomes an MP4 — the render budget, the compositing stack, the audio bed, the traps a check-gate cannot see. A third skill, /ad-creative-direction, runs upstream of both and owns beat intent; hyperframes owns beat seconds. Keeping those three boundaries sharp is the difference between a reusable rig and a pile of bespoke tweens.
The rule that keeps the split honest: a rule true of a drawn character in any pipeline belongs in the figure skill. A rule true only of the renderer does not.
A two-bone arm on a torso teardrop is a puppet head on a bag
The failure mode this rig exists to avoid: everything animatable sits above the collar, so the film gets blinks, a mouth and a head bob, and the director layer ends up moving the camera around a figure that cannot act. The skeleton comes first — pelvis, then a spine that curves rather than tips, then two three-bone arms (shoulder, elbow, wrist) and two three-bone legs (hip, knee, ankle), with the head rotating at the top of the torso rather than at the neck.
Bones are capsules drawn from their joint downward, so rotation zero means hanging. Each joint group owns exactly one property about its own origin. Poses then become data — a dictionary of joint angles — and body language becomes a library you can name: coil for anticipation, explode for the hit, cheer for the follow-through settle.
Draw order is load-bearing, and the shoulder needs a cap
Arms go in front of the torso. Get the order wrong and the character reads as a stack of cut-outs, which is also what flat fills plus a uniform black outline produce on their own. The join only reads once the shoulder carries a deltoid cap; without it the arm looks pinned on. Depth comes from a three-level line-weight hierarchy and tinted interior lines, not from adding a blur — and on this box a blur is the single most expensive thing you can put in a frame.
Expression is three channels, mixed
Mouth, brow and lid, mixed rather than picked from a list of finished faces, with a twelve-shape mouth library underneath. A blink is a lid closing over the eye — never the eye squashing — and the lid has to be an offset ellipse of the eye’s own shape. Lid rectangles were the defect that showed up when the whole critter matrix was rendered at once: they bled outside the eye and merged into a bright bar across the three-eyed species.
At the size a mascot actually occupies in a phone-sized frame, the body half of the expression is what survives. A mouth is three pixels. The tilt, the lean, the squash and the limb splay are the parts a viewer can still read.
The ankle is the joint you forgot
This is the measurement worth stealing. Weld the foot to the shin as a rigid graphic and the sole tilts by hip plus knee, so the toe digs through the floor while the ankle sits perfectly on target. The instrument said 0.03 px of error; the render showed 14 px of sole penetration. Wrapping the shoe in its own group and levelling it took the render to 3 px.
Then the sequel, because a level sole reads stiff: a foot that pitches about the ankle drives its toe through the floor, since the real pivot is the contact point — heel at strike, toe at push. The compensation constant was swept rather than derived, and the first sweep found a minimum that was wrong because it only moved one axis. Re-swept against the thigh as well, the "optimal" value was buying three pixels of sole accuracy at the cost of the entire stride. Re-run a tuned constant after you change the model it was tuned against, and sweep it against every axis it touches.
Vertical is not landscape with the sides cut off
A wide-shot scale that works in 16:9 leaves the subject a speck in 9:16. Measured: 0.58–0.60x reads as distant in a 1080×1920 frame, and the vertical wide shot has to come in to about 0.80–0.85x, because the tall frame already supplies headroom and floor. Author the wide-shot scale per aspect ratio; never carry it over.
The corollary decides shots before you frame them: a figure cannot share a 9:16 frame with a wide UI panel. At 1080 across, a readable character and a readable ~760px card do not both fit — pulling wide enough to hold both drops under the 0.80x floor. Give the shot to one of them and write down which. The tall frame’s real affordance is stacking, not side-by-side.
One element, one owner — especially for transform
Two defects, one root cause, neither visible to the build gate. A static CSS mirror on an element the timeline also scaled made it vanish mid-film. A head-bob and a lean tweening the same axis on the same element silently cancelled. The fix is structural, not numeric: nest one wrapper per animated property so nothing is ever shared between a stylesheet and the timeline.
The origin counts as shared state too, and it accumulates. Re-declaring a transform origin inside every tween re-bakes the shift into the position each time. On a nine-cut camera the matrix was exact at half a second and 3,400 px off-stage by the twenty-second mark — with the gate passing clean and every shot verified in bounds on paper. When framing maths looks wrong, dump the live matrix before re-deriving the maths.
What the render actually costs
There is no GPU here; every frame rasterises on CPU, and full-frame blur dominates the bill — not scene count, not resolution. Flat planes with no full-frame filters render at roughly 3–4x realtime. Add one blurred backdrop plane and the same film runs 10–23x realtime: a 64-second film went from three minutes to twenty-two. Same film, same length, six times apart. So anything over about twenty seconds of output goes to a background render, and if the schedule beats the depth, the blur is the first thing cut.
Nothing licensed, nothing fetched
Every critter in Lumenreel is drawn by one deterministic renderer from an authored species row, and the film inherits that posture: procedural art, a synthesised sound kit, and local narration. It removes a licence surface rather than managing one.
Two traps are worth naming. CC0 does not launder an extracted game asset — that ban is about the source, not the licence. And a marketing string is not a licence: a gallery headed "free for commercial use" can sit on terms requiring a visible credit on every render. Read the footer, not the badge.
Verify by looking
The single most useful rule in the render layer: an exit code attests that the container ran, not that the motion happened. Both transform-ownership defects above passed the gate. Both were found by extracting frames and looking at them. A film is not verified until someone has watched the pixels it actually produced.
Where to see it
The Short is above. The game it is advertising is Lumenreel · Prism Crash — a collectathon where the only thing you can stake is time, with a hundred procedural crystal critters to unlock — and it is live on the Chrome Web Store. If you would rather not install anything, the browser arcade at play.dhseadev.online runs seven games with no download and no account.
Leave a Reply