AI Skill Report Card
Creating Hyperframe Documentaries
Markdown--- name: creating-hyperframe-documentaries description: Produces high-level animated documentary videos using hyperframes and code, avoiding AI-generic aesthetics (no blue/purple gradients, no default fonts, no slideshow-style transitions). Use when a user requests an animated explainer, documentary-style video, or data/topic visualization that needs to look custom-coded, clean, and professionally motion-designed rather than templated or AI-generated looking. --- # Creating Hyperframe Documentaries
Quick Start13 / 15
Given a topic and target duration, produce a research-backed scene plan, then build each scene in code (hyperframes) with custom typography, a deliberate (non-gradient, non-blue/purple) color system, and non-intersecting, choreographed animations.
Input: Topic = "The History of the Internet", Duration = 3 minutes
1. Research → outline 6-8 key beats (ARPANET, TCP/IP, WWW, Browsers, Mobile, Cloud/AI era)
2. Plan scenes → one scene per beat, define entry/exit animation per element, define timing budget (≈20-25s/scene)
3. Build scene 1 → custom palette, custom font pairing, animate elements on non-overlapping paths/layers
4. QA scene 1 → check for gradient defaults, default fonts, overlapping motion
5. Repeat for remaining scenes → cross-check transitions align in rhythm/pacing with prior scene
6. Final pass → full timeline smoothness check, consistent color/type system across all scenes
7. Render → confirm output location, report completion
Recommendation▾
Include an actual code snippet or hyperframe syntax example since this is a code-based tool — currently all examples are prose descriptions of outcomes, not concrete code/output pairs.
Workflow14 / 15
Progress:
- Step 1: Research the topic — gather facts, structure, and a narrative arc
- Step 2: Build a scene plan — list every scene, its purpose, duration, and key visual elements
- Step 3: Define the visual system — palette (no blue/purple gradients), typography (no default AI fonts), motion language
- Step 4: Build scenes in code one at a time, verifying against the visual system
- Step 5: Check animation choreography — no intersecting/overlapping element paths within a scene
- Step 6: Verify cross-scene continuity — pacing, transition style, and visual consistency line up
- Step 7: Full render pass — watch end-to-end for smoothness
- Step 8: Confirm render output and report completion with location
Step 1: Research & Plan
- Identify the core narrative arc (beginning → tension/complexity → resolution/insight).
- Break the topic into 5-10 discrete "beats," each becoming one scene.
- For each beat, write: the core idea, the data/visual metaphor to represent it, and estimated duration.
- Allocate total duration across scenes proportional to narrative weight, not evenly.
Step 2: Design the Visual System (lock before building scenes)
- Color: Choose a deliberate palette (2-4 core colors + 1 accent). Explicitly ban blue-to-purple gradients. Prefer flat colors, duotones, or complementary/analogous schemes tied to the topic's identity (e.g., muted earth tones for history, high-contrast monochrome + single accent for tech/data).
- Typography: Select a real typeface pairing (one display/header, one body) — never the default sans used by AI generation tools (e.g., avoid generic "Inter/Roboto-looking-AI" defaults without intention). Define weight, tracking, and hierarchy rules once, apply everywhere.
- Motion language: Define a small set of signature animation primitives (e.g., "elements build along a baseline," "data bars grow from left," "labels fade+slide from their anchor point") and reuse them — this creates coherence instead of a random-effects "AI" look.
Step 3: Build Scenes (one at a time)
For each scene:
- Lay out element positions on a grid first — plan spatial zones so animated elements never cross paths.
- Code the scene in hyperframes, animating one layer/group at a time.
- Stagger entrances/exits with intention (easing curves, not linear/default).
- Immediately QA against the checklist below before moving to the next scene.
Step 4: Continuity Pass
- Play scenes back-to-back; confirm transition timing feels continuous, not like slide-advance cuts.
- Normalize pacing: similar beat-types should have similar on-screen duration/rhythm.
- Confirm color/type system hasn't drifted between scenes.
Step 5: Render & Report
- Full render, watch once end-to-end for smoothness and timing drift.
- Confirm final video is published/available (e.g., on the hyperframes site).
- Report completion concisely with location/link — no need to narrate the whole process back to the user.
Recommendation▾
Define what 'hyperframes' actually is/means technically (API, library, file format?) — the skill assumes familiarity without ever grounding the term concretely.
Examples14 / 20
Example 1: Input: Topic = "How Vaccines Work", Duration = 2 minutes Output: A 6-scene breakdown (immune system intro → pathogen invasion → antibody response → vaccine mechanism → herd immunity → closing insight), using a clinical teal/off-white/charcoal palette (no blue-purple gradient), a geometric sans display font paired with a humanist body font, cells and antibodies animate along fixed invisible grid lines so they never visually collide, scenes rendered sequentially with matched pacing, final output delivered via hyperframes with confirmation message.
Example 2: Input: Topic = "The Rise and Fall of a Stock Market Bubble", Duration = 90 seconds Output: 5 scenes mapped to the bubble lifecycle (stability → hype → peak → crash → aftermath), warm amber-to-charcoal flat palette (explicitly not blue/purple, no gradient), custom condensed display font for big stat callouts, line charts and labels animate in separate vertical lanes so trend lines and annotations never overlap, each scene's build-up speed intentionally accelerates toward the "peak" scene to mirror the narrative, final smoothness pass confirms consistent easing across all transitions.
Recommendation▾
Add a bad-example contrast (e.g., show a gradient/default-font scene description labeled 'avoid this') to make the AI-generic pitfalls more vivid.
Best Practices
- Lock the visual system (color + type + motion primitives) before building any scene — prevents drift and re-work.
- Use a spatial grid/zoning plan per scene so you can guarantee non-intersecting animation paths at the planning stage, not fix it after the fact.
- Vary scene duration based on narrative importance, not uniform timing — uniform timing is what makes videos feel like slideshows.
- Choose colors and fonts tied to the topic's identity/mood rather than generic "modern tech" defaults.
- Use custom easing curves (ease-in-out, spring, overshoot) instead of linear motion — linear motion reads as robotic/AI-generated.
- Keep a running style reference (palette hex codes, font names/weights, motion primitive list) and check every new scene against it.
- Do a full end-to-end playback before declaring done — individual scenes can look fine but feel disjointed together.
Common Pitfalls
- Slideshow pacing: static full-screen elements that simply cut/fade to the next — replace with continuous builds and camera/element movement within scenes.
- Blue/purple gradients: the single most common "AI-generated" tell — never use as a background or accent treatment.
- Default fonts: using whatever font the tool defaults to without intentional selection — always explicitly set typography.
- Overlapping animations: multiple elements animating through the same screen space at the same time, causing visual collision — always zone/grid plan first.
- Inconsistent pacing across scenes: some scenes rushed, others sluggish — normalize using the continuity pass.
- Skipping research: building visuals before the narrative arc is clear leads to scenes that don't build toward an insight.
- Declaring done without a full-video watch-through: per-scene QA isn't enough; transitions and rhythm only reveal problems in full playback.