> ## Documentation Index
> Fetch the complete documentation index at: https://hyperframes-canary-calibration-notes.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# 30 Days of HyperFrames
> The official 30 Days of HyperFrames lessons, collected in one place as the series is published.
export const HoverVideo = ({src, poster, className, hasAudio = true}) => {
const videoRef = useRef(null);
const wrapRef = useRef(null);
const [muted, setMuted] = useState(true);
const [playing, setPlaying] = useState(false);
const [inView, setInView] = useState(false);
const [reduced, setReduced] = useState(() => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches);
useEffect(() => {
const query = window.matchMedia("(prefers-reduced-motion: reduce)");
const onChange = () => setReduced(query.matches);
query.addEventListener("change", onChange);
return () => query.removeEventListener("change", onChange);
}, []);
useEffect(() => {
const el = wrapRef.current;
if (!el || typeof IntersectionObserver !== "function") {
setInView(true);
return;
}
const observer = new IntersectionObserver(entries => setInView(entries[0]?.isIntersecting ?? false), {
rootMargin: "200px"
});
observer.observe(el);
return () => observer.disconnect();
}, []);
useEffect(() => {
const video = videoRef.current;
if (!video) return;
if (!inView) {
video.pause();
video.removeAttribute("src");
video.load();
setMuted(true);
setPlaying(false);
return;
}
if (reduced && video.muted) video.pause();
}, [inView, reduced]);
const start = () => {
const video = videoRef.current;
if (video) video.play().catch(() => {});
};
const toggleSound = () => {
const video = videoRef.current;
if (!video) return;
const next = !muted;
setMuted(next);
video.muted = next;
if (!next) start();
};
const togglePlay = () => {
const video = videoRef.current;
if (!video) return;
if (video.paused) start(); else video.pause();
};
const autoplaying = inView && !reduced;
const icon = paths => ;
return
;
};
One lesson a day, each one built and rendered before it was posted. Every day below links to its original post for the prompt and the discussion; where the film or a frame from it is published, you can see the result here first.
The series began on [@HeyGen](https://x.com/HeyGen) and continues on [@HyperFrames\_](https://x.com/HyperFrames_).
## Start and create
Days 1 to 9 cover the inputs: a repo, a track, a topic, a speaker, a design file. Every card opens the original post.
Give your coding agent the HyperFrames skills. One router reads the request and picks the workflow.
Turn a visual identity into reusable motion direction, written down once as `FRAME.md` and read on every later build.
Explain an open pull request as a short video. Plays in full [above](#three-lessons-in-full).
Build a video around a track and its beat. Plays in full [above](#three-lessons-in-full).
Turn a topic into a designed explainer without footage. The visuals are invented per scene.
Add synchronized graphics to an existing speaker video. The source clip plays untouched underneath.
Make a short, design-led animation where the motion carries the message.
Find and use audio from the command line, then let the mix duck itself under the narration.
Turn an existing design into a video composition — as live HTML, not a flattened export.
## Direct and refine
Days 10 to 19 are about steering: how you ask, what you inspect, and what you fix before rendering.
Structure a request so the agent gets the important intent right the first time.
Extract useful patterns from a reference instead of describing them from memory.
Make captions part of the visual design rather than a track laid on top.
Inspect a composition before rendering — in Studio, through your agent, or from the terminal.
Adjust motion with visible keyframe controls, one lane per animated property.
Bring useful web motion into a composition by capturing the real page.
Work with the available asset libraries, and control how each one crops and fits.
Agree on the sequence before building every scene, so revisions land on the plan rather than the render.
Create with HyperFrames inside HeyGen Video Agent.
Use alpha channels to layer subjects into a scene, with the matte holding while the subject moves.
## Extend and ship
Days 20 to 30 move from one composition to a repeatable pipeline: reusable blocks, variables, grading, and rendering somewhere other than your laptop.
Take a design direction into a HyperFrames project without redrawing it by hand.
Render without making one local computer the bottleneck. Two commands hand the job to the cloud.
Add reusable scenes and effects instead of rebuilding them each time.
Turn one composition into repeatable versions. Plays in full [above](#three-lessons-in-full).
Correct or stylize images and footage in code, and bring your own LUT packs.
Find practical language and examples for directing an agent. The written guide lives in these docs, at [Prompting overview](/prompting/overview).
Add designed treatments to real media. Two to six authored colour ramps change the whole visual language.
Run rendering on your own cloud infrastructure. See [Deploy](/guides/deploy) for the four render routes.
Publish reusable building blocks for other creators. The [Catalog](/catalog) lists what has landed so far.
Combine the expanded component set in a single project.
Thirty days in one cut — a second from every lesson, back to back. From install on Day 1 to the whole series here.
## Related topics
* [Choose a creation workflow](/workflows)
* [Direct your agent with the Prompt Guide](/prompting/overview)
* [Browse reusable Catalog elements](/catalog)