ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-11-14 13:27:13 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
00a4f454ee75d4c434ee034f6dc62e5e924783fb
hyperframes/docs/thirty-days.mdx
T
ukimsanov f742084fa8 docs: put the ten workflows in one place, and connect the two tracks 
There are ten creation workflows. The Workflows nav group held eight of them plus
`guides/export-and-share`, which is not a workflow at all — there is no such
skill, it is a finishing task. The tenth, the Remotion port, sat under
Developers > Composition, design & animation, a different tab entirely.

So: export-and-share moved to Build the project where the other task pages live,
the Remotion page moved into Workflows, and the chooser gained a tenth route. The
chooser rendered `<video>` unconditionally, which would have drawn a black
rectangle for a route with no clip — it now renders a neutral tile instead, and
custom.css styles it to the same box.

**The Prompt Guide and the workflow guides did not know about each other.** Level 1
is organised one page per workflow, and five of its six pages linked to no guide
at all. A reader learning to prompt for motion graphics never discovered
/guides/motion-graphics, and the traffic went nowhere in both directions. Each
Level 1 page now names its workflow and says what that page adds.

Four links pointed at redirects rather than the real page — /guides/claude-design,
/guides/common-mistakes, /guides/website-to-video, /guides/media-overlays. Seven
files now link to the destination directly.

Checked after: 0 broken links, 0 links via redirect.
2026-08-04 15:32:14 -07:00

251 lines
18 KiB
Plaintext
Raw Blame History

---
title: 30 Days of HyperFrames
sidebarTitle: 30 Days of HyperFrames
description: "The official 30 Days of HyperFrames lessons, collected in one place as the series is published."
---
import { DocsVideo } from "/snippets/docs-video.jsx";
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.
<Frame caption="The launch film the series was built around — one person, one prompt, one finished launch video.">
<DocsVideo
title="HyperFrames launch film"
src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/hyperframes-launch-preview.mp4"
poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/hyperframes-launch-poster.jpg"
/>
</Frame>
The series began on [@HeyGen](https://x.com/HeyGen) and continues on [@HyperFrames_](https://x.com/HyperFrames_).
## Three lessons, in full
Three days that between them cover the range: a code change, an audio track, and one project rendered many ways. No account needed — they play here.
<Frame caption="Day 3 — a pull request becomes a 32-second review anyone on the team can watch.">
<DocsVideo
title="Day 3 — PR-to-Video"
src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/full-prvideo.mp4"
poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/tile-prvideo.jpg"
/>
</Frame>
<Frame caption="Day 4 — a track analysed for beats and sections, then every cut snapped to that grid.">
<DocsVideo
title="Day 4 — Music-to-Video"
src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/full-music-v2.mp4"
poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/tile-music.jpg"
/>
</Frame>
<Frame caption="Day 23 — one composition, two variable sets, two finished vertical cuts.">
<DocsVideo
title="Day 23 — Templates and variables"
src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/full-variables.mp4"
poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/tile-variables.jpg"
/>
</Frame>
## 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.
<CardGroup cols={2}>
<Card title="Day 1 — Install HyperFrames" href="https://x.com/HeyGen/status/2074176916819685648">
<img alt="Nineteen skills in three groups: the /hyperframes router, ten creation workflows, and the supporting set" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/skills-install-demo-v1.jpg" loading="lazy" decoding="async" style={{width: "100%", aspectRatio: "16 / 9", objectFit: "cover", borderRadius: "8px", marginBottom: "12px", display: "block"}} />
Give your coding agent the HyperFrames skills. One router reads the request and picks the workflow.
</Card>
<Card title="Day 2 — Give your brand a motion language" href="https://x.com/HeyGen/status/2074574265714905167">
{/* VISUAL: needs the FRAME.md launch film published — a brand's type, colour and motion direction written to FRAME.md, then applied. Local source: /tmp/rend/out/frame-md-launch-storyboard.mp4 (60.3s, 1920x1080, audio). */}
Turn a visual identity into reusable motion direction, written down once as `FRAME.md` and read on every later build.
</Card>
<Card title="Day 3 — PR-to-Video" href="https://x.com/HeyGen/status/2074954182583554051">
<img alt="A pull request turned into a storyboard of scenes, then a finished video file" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/tile-prvideo.jpg" loading="lazy" decoding="async" style={{width: "100%", aspectRatio: "16 / 9", objectFit: "cover", borderRadius: "8px", marginBottom: "12px", display: "block"}} />
Explain an open pull request as a short video. Plays in full [above](#three-lessons-in-full).
</Card>
<Card title="Day 4 — Music-to-Video" href="https://x.com/HeyGen/status/2075262117964615956">
<img alt="A waveform analysed into sections and beat markers, with every cut snapped to the grid" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/tile-music.jpg" loading="lazy" decoding="async" style={{width: "100%", aspectRatio: "16 / 9", objectFit: "cover", borderRadius: "8px", marginBottom: "12px", display: "block"}} />
Build a video around a track and its beat. Plays in full [above](#three-lessons-in-full).
</Card>
<Card title="Day 5 — Faceless explainer" href="https://x.com/HeyGen/status/2075682104302882908">
<img alt="A heat-pump refrigerant cycle drawn as an animated diagram with a caption reading Outside, the refrigerant is colder than the air" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/faceless-explainer-demo-v1.jpg" loading="lazy" decoding="async" style={{width: "100%", aspectRatio: "16 / 9", objectFit: "cover", borderRadius: "8px", marginBottom: "12px", display: "block"}} />
Turn a topic into a designed explainer without footage. The visuals are invented per scene.
</Card>
<Card title="Day 6 — Talking-head recut" href="https://x.com/HeyGen/status/2075998619325604238">
<img alt="A presenter clip marked UNMODIFIED with a designed lower third and a four-step pipeline panel layered over it" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/captions-recut-demo-v1.jpg" loading="lazy" decoding="async" style={{width: "100%", aspectRatio: "16 / 9", objectFit: "cover", borderRadius: "8px", marginBottom: "12px", display: "block"}} />
Add synchronized graphics to an existing speaker video. The source clip plays untouched underneath.
</Card>
<Card title="Day 7 — Motion graphics" href="https://x.com/HeyGen/status/2076381187640324427">
<img alt="A bar chart building on screen, measuring the seconds per beat of the film it appears in" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/motion-graphics-demo-v1.jpg" loading="lazy" decoding="async" style={{width: "100%", aspectRatio: "16 / 9", objectFit: "cover", borderRadius: "8px", marginBottom: "12px", display: "block"}} />
Make a short, design-led animation where the motion carries the message.
</Card>
<Card title="Day 8 — Music and SFX with the HeyGen CLI" href="https://x.com/HeyGen/status/2076719036742922504">
<img alt="Voiceover and music tracks on a mixer, with the music fader ducked to minus 16.5 dB under the speech" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/voice-audio-demo-v1.jpg" loading="lazy" decoding="async" style={{width: "100%", aspectRatio: "16 / 9", objectFit: "cover", borderRadius: "8px", marginBottom: "12px", display: "block"}} />
Find and use audio from the command line, then let the mix duck itself under the narration.
</Card>
<Card title="Day 9 — Figma to HyperFrames" href="https://x.com/HeyGen/status/2077072141309382770">
<img alt="A Figma login form as a flat PNG export beside the same form imported as live HTML, both taking the same cursor" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/figma-to-html-demo-v1.jpg" loading="lazy" decoding="async" style={{width: "100%", aspectRatio: "16 / 9", objectFit: "cover", borderRadius: "8px", marginBottom: "12px", display: "block"}} />
Turn an existing design into a video composition — as live HTML, not a flattened export.
</Card>
</CardGroup>
## Direct and refine
Days 10 to 19 are about steering: how you ask, what you inspect, and what you fix before rendering.
<CardGroup cols={2}>
<Card title="Day 10 — Anatomy of a prompt" href="https://x.com/HeyGen/status/2077438104982667282">
{/* VISUAL: a still of a prompt broken into its parts — intent, input, format, constraints — with the resulting composition beside it. No published asset matches this lesson. */}
Structure a request so the agent gets the important intent right the first time.
</Card>
<Card title="Day 11 — Repurpose an existing video" href="https://x.com/HeyGen/status/2077798995762823593">
{/* VISUAL: a reference film beside the rebuilt composition, showing which patterns were extracted. No published asset matches this lesson. */}
Extract useful patterns from a reference instead of describing them from memory.
</Card>
<Card title="Day 12 — Dynamic captions" href="https://x.com/HeyGen/status/2078190361932103716">
<img alt="A presenter with a caption rail across the lower frame, the current word highlighted in the brand accent colour" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/avatar-presenter-caption-rail-v1.jpg" loading="lazy" decoding="async" style={{width: "100%", aspectRatio: "16 / 9", objectFit: "cover", borderRadius: "8px", marginBottom: "12px", display: "block"}} />
Make captions part of the visual design rather than a track laid on top.
</Card>
<Card title="Day 13 — Studio preview, part 1" href="https://x.com/HeyGen/status/2078589328562016559">
<img alt="The same composition open three ways — in Studio, through an agent, and from the terminal" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/studio-front-door-v2.jpg" loading="lazy" decoding="async" style={{width: "100%", aspectRatio: "16 / 9", objectFit: "cover", borderRadius: "8px", marginBottom: "12px", display: "block"}} />
Inspect a composition before rendering — in Studio, through your agent, or from the terminal.
</Card>
<Card title="Day 14 — Studio preview, part 2: keyframes" href="https://x.com/HeyGen/status/2078945075787452660">
<img alt="A Studio timeline expanded into per-property keyframe lanes for opacity, position and scale" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/studio-animation-keyframe-loop-v1.jpg" loading="lazy" decoding="async" style={{width: "100%", aspectRatio: "16 / 9", objectFit: "cover", borderRadius: "8px", marginBottom: "12px", display: "block"}} />
Adjust motion with visible keyframe controls, one lane per animated property.
</Card>
<Card title="Day 15 — Sample the web" href="https://x.com/HeyGen/status/2079251321484722675">
<img alt="Four agent sessions each pointed at a different site, under the words Now any site becomes video" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/website-to-hyperframes-poster.jpg" loading="lazy" decoding="async" style={{width: "100%", aspectRatio: "16 / 9", objectFit: "cover", borderRadius: "8px", marginBottom: "12px", display: "block"}} />
Bring useful web motion into a composition by capturing the real page.
</Card>
<Card title="Day 16 — Media use" href="https://x.com/HeyGen/status/2079609229737111978">
<img alt="A video tag with object-fit cover highlighted, next to the desert footage it crops into a 1:1 slot" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/media-basics-demo-v1.jpg" loading="lazy" decoding="async" style={{width: "100%", aspectRatio: "16 / 9", objectFit: "cover", borderRadius: "8px", marginBottom: "12px", display: "block"}} />
Work with the available asset libraries, and control how each one crops and fits.
</Card>
<Card title="Day 17 — Storyboard" href="https://x.com/HeyGen/status/2080012076454719554">
{/* VISUAL: needs the STORYBOARD.md launch film published — a website captured, then FRAME.md and STORYBOARD.md written before any scene is built. Local source: /tmp/rend/out/frame-md-launch-storyboard.mp4 (60.3s, 1920x1080, audio). */}
Agree on the sequence before building every scene, so revisions land on the plan rather than the render.
</Card>
<Card title="Day 18 — HyperFrames in Video Agent" href="https://x.com/HeyGen/status/2080407266755510452">
{/* VISUAL: a Video Agent session creating a HyperFrames composition. The published mcp-flow-demo-v1 asset shows the MCP surface, not Video Agent, so it is deliberately not reused here. */}
Create with HyperFrames inside HeyGen Video Agent.
</Card>
<Card title="Day 19 — Background removal" href="https://x.com/HeyGen/status/2080762012330807438">
<img alt="A frame-for-frame comparison: the original presenter shot beside the same shot matted onto transparency" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/remove-background-demo-v1.jpg" loading="lazy" decoding="async" style={{width: "100%", aspectRatio: "16 / 9", objectFit: "cover", borderRadius: "8px", marginBottom: "12px", display: "block"}} />
Use alpha channels to layer subjects into a scene, with the matte holding while the subject moves.
</Card>
</CardGroup>
## 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.
<CardGroup cols={2}>
<Card title="Day 20 — Claude Design" href="https://x.com/HyperFrames_/status/2081184676430160379">
{/* VISUAL: needs the Claude Design film published — a moodboard of swatches, specimens and reference shots resolving into one connected direction. Local source: /tmp/rend/out/claude-design-hyperframes-video.mp4 (40.0s, 1920x1080, audio). */}
Take a design direction into a HyperFrames project without redrawing it by hand.
</Card>
<Card title="Day 21 — Cloud rendering" href="https://x.com/HyperFrames_/status/2081491370485952790">
<img alt="Two commands, hyperframes auth login and hyperframes cloud render, zipping and uploading a project to HeyGen Cloud" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/render-targets-demo-v1.jpg" loading="lazy" decoding="async" style={{width: "100%", aspectRatio: "16 / 9", objectFit: "cover", borderRadius: "8px", marginBottom: "12px", display: "block"}} />
Render without making one local computer the bottleneck. Two commands hand the job to the cloud.
</Card>
<Card title="Day 22 — Components Catalog" href="https://x.com/HyperFrames_/status/2081798071353278651">
<img alt="The Studio Catalog tab, searching for a macOS Notification block and dropping it onto the timeline" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/studio-assets-catalog-loop-v1.jpg" loading="lazy" decoding="async" style={{width: "100%", aspectRatio: "16 / 9", objectFit: "cover", borderRadius: "8px", marginBottom: "12px", display: "block"}} />
Add reusable scenes and effects instead of rebuilding them each time.
</Card>
<Card title="Day 23 — Templates and variables" href="https://x.com/HyperFrames_/status/2082197435246600341">
<img alt="Variant A and Variant B variable sets — different hook text, accent colour and creator clip — around one shared vertical composition" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/tile-variables.jpg" loading="lazy" decoding="async" style={{width: "100%", aspectRatio: "16 / 9", objectFit: "cover", borderRadius: "8px", marginBottom: "12px", display: "block"}} />
Turn one composition into repeatable versions. Plays in full [above](#three-lessons-in-full).
</Card>
<Card title="Day 24 — Color grading" href="https://x.com/HyperFrames_/status/2082536413829235004">
<img alt="Rain-soaked street footage in Studio with a custom LUT applied and exposure, contrast and shadow controls beside it" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/tile-grading-v2.jpg" loading="lazy" decoding="async" style={{width: "100%", aspectRatio: "16 / 9", objectFit: "cover", borderRadius: "8px", marginBottom: "12px", display: "block"}} />
Correct or stylize images and footage in code, and bring your own LUT packs.
</Card>
<Card title="Day 25 — Prompt Guide" href="https://x.com/HyperFrames_/status/2082892893027749917">
Find practical language and examples for directing an agent. The written guide lives in these docs, at [Prompting overview](/prompting/overview).
</Card>
<Card title="Day 26 — Media effects and overlays" href="https://x.com/HyperFrames_/status/2083324288632045910">
<img alt="One halftone illustration rendered through four authored colour ramps — game green, synthwave, amber terminal and arctic" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/media-effects-showcase-v2.jpg" loading="lazy" decoding="async" style={{width: "100%", aspectRatio: "16 / 9", objectFit: "cover", borderRadius: "8px", marginBottom: "12px", display: "block"}} />
Add designed treatments to real media. Two to six authored colour ramps change the whole visual language.
</Card>
<Card title="Day 27 — Deploy" href="https://x.com/HyperFrames_/status/2083633492894900456">
{/* VISUAL: routes 3 and 4 of the render-target film — AWS Lambda and self-hosted Cloud Run. The published render-targets-demo-v1 still shows route 2, so it is used on Day 21 instead of here. */}
Run rendering on your own cloud infrastructure. See [Deploy](/guides/deploy) for the four render routes.
</Card>
<Card title="Day 28 — Contribute to the Catalog" href="https://x.com/HyperFrames_/status/2084070152975634743">
{/* VISUAL: a contributed block going from local scaffold to merged catalog entry. No published asset matches this lesson. */}
Publish reusable building blocks for other creators. The [Catalog](/catalog) lists what has landed so far.
</Card>
<Card title="Day 29 — Components update" href="https://x.com/HyperFrames_/status/2084338269194732003">
{/* VISUAL: the three themed registry families — mk, yt and hw — combined in one composition. No published asset matches this lesson. */}
Combine the expanded component set in a single project.
</Card>
<Card title="Day 30 — Coming next" href="https://x.com/HyperFrames_">
The official Day 30 lesson has not been published yet. Follow [@HyperFrames_](https://x.com/HyperFrames_) for the final entry.
</Card>
</CardGroup>
## Related topics
- [Choose a creation workflow](/workflows)
- [Direct your agent with the Prompt Guide](/prompting/overview)
- [Browse reusable Catalog elements](/catalog)
Reference in New Issue View Git Blame Copy Permalink