mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-01 19:42:03 +00:00
docs: 30 Days shows all thirty films, the real ones
The user downloaded the actual daily posts and matched each to its day. Every card now plays the real Day-N film — install, PR-to-video, keyframes in Studio, background removal on a checkerboard, color grading, components, the lot — over its own X-post link, no borrowed docs clips. Day 7's five motion-graphics pieces are concatenated into one film. Day 26 had no dedicated post, so it uses the media-effects showcase. Day 30 is built here: a second from every one of the twenty-nine lessons, back to back — thirty for thirty. All thirty are web-encoded (1280 wide, CRF 28) and live on the CDN. 0 dead URLs.
This commit is contained in:
ukimsanov
+34
-30
@@ -17,55 +17,55 @@ Days 1 to 9 cover the inputs: a repo, a track, a topic, a speaker, a design file
|
||||
|
||||
<CardGroup cols={2}>
|
||||
<Card title="Day 1 — Install HyperFrames" href="https://x.com/HeyGen/status/2074176916819685648">
|
||||
{/* VIDEO SLOT: thirty-days-day-01.mp4 — the real Day 1 post */}
|
||||
<video className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-01.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-01.jpg" autoPlay muted loop playsInline preload="none" />
|
||||
|
||||
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">
|
||||
{/* VIDEO SLOT: thirty-days-day-02.mp4 — the real Day 2 post */}
|
||||
<video className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-02.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-02.jpg" autoPlay muted loop playsInline preload="none" />
|
||||
|
||||
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">
|
||||
{/* VIDEO SLOT: thirty-days-day-03.mp4 — the real Day 3 post */}
|
||||
<video className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-03.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-03.jpg" autoPlay muted loop playsInline preload="none" />
|
||||
|
||||
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">
|
||||
{/* VIDEO SLOT: thirty-days-day-04.mp4 — the real Day 4 post */}
|
||||
<video className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-04.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-04.jpg" autoPlay muted loop playsInline preload="none" />
|
||||
|
||||
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">
|
||||
{/* VIDEO SLOT: thirty-days-day-05.mp4 — the real Day 5 post */}
|
||||
<video className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-05.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-05.jpg" autoPlay muted loop playsInline preload="none" />
|
||||
|
||||
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">
|
||||
{/* VIDEO SLOT: thirty-days-day-06.mp4 — the real Day 6 post */}
|
||||
<video className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-06.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-06.jpg" autoPlay muted loop playsInline preload="none" />
|
||||
|
||||
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">
|
||||
{/* VIDEO SLOT: thirty-days-day-07.mp4 — the real Day 7 post */}
|
||||
<video className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-07.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-07.jpg" autoPlay muted loop playsInline preload="none" />
|
||||
|
||||
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">
|
||||
{/* VIDEO SLOT: thirty-days-day-08.mp4 — the real Day 8 post */}
|
||||
<video className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-08.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-08.jpg" autoPlay muted loop playsInline preload="none" />
|
||||
|
||||
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">
|
||||
{/* VIDEO SLOT: thirty-days-day-09.mp4 — the real Day 9 post */}
|
||||
<video className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-09.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-09.jpg" autoPlay muted loop playsInline preload="none" />
|
||||
|
||||
Turn an existing design into a video composition — as live HTML, not a flattened export.
|
||||
|
||||
@@ -78,61 +78,61 @@ Days 10 to 19 are about steering: how you ask, what you inspect, and what you fi
|
||||
|
||||
<CardGroup cols={2}>
|
||||
<Card title="Day 10 — Anatomy of a prompt" href="https://x.com/HeyGen/status/2077438104982667282">
|
||||
{/* VIDEO SLOT: thirty-days-day-10.mp4 — the real Day 10 post */}
|
||||
<video className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-10.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-10.jpg" autoPlay muted loop playsInline preload="none" />
|
||||
|
||||
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">
|
||||
{/* VIDEO SLOT: thirty-days-day-11.mp4 — the real Day 11 post */}
|
||||
<video className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-11.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-11.jpg" autoPlay muted loop playsInline preload="none" />
|
||||
|
||||
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">
|
||||
{/* VIDEO SLOT: thirty-days-day-12.mp4 — the real Day 12 post */}
|
||||
<video className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-12.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-12.jpg" autoPlay muted loop playsInline preload="none" />
|
||||
|
||||
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">
|
||||
{/* VIDEO SLOT: thirty-days-day-13.mp4 — the real Day 13 post */}
|
||||
<video className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-13.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-13.jpg" autoPlay muted loop playsInline preload="none" />
|
||||
|
||||
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">
|
||||
{/* VIDEO SLOT: thirty-days-day-14.mp4 — the real Day 14 post */}
|
||||
<video className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-14.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-14.jpg" autoPlay muted loop playsInline preload="none" />
|
||||
|
||||
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">
|
||||
{/* VIDEO SLOT: thirty-days-day-15.mp4 — the real Day 15 post */}
|
||||
<video className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-15.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-15.jpg" autoPlay muted loop playsInline preload="none" />
|
||||
|
||||
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">
|
||||
{/* VIDEO SLOT: thirty-days-day-16.mp4 — the real Day 16 post */}
|
||||
<video className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-16.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-16.jpg" autoPlay muted loop playsInline preload="none" />
|
||||
|
||||
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">
|
||||
{/* VIDEO SLOT: thirty-days-day-17.mp4 — the real Day 17 post */}
|
||||
<video className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-17.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-17.jpg" autoPlay muted loop playsInline preload="none" />
|
||||
|
||||
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">
|
||||
{/* VIDEO SLOT: thirty-days-day-18.mp4 — the real Day 18 post */}
|
||||
<video className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-18.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-18.jpg" autoPlay muted loop playsInline preload="none" />
|
||||
|
||||
Create with HyperFrames inside HeyGen Video Agent.
|
||||
|
||||
</Card>
|
||||
<Card title="Day 19 — Background removal" href="https://x.com/HeyGen/status/2080762012330807438">
|
||||
{/* VIDEO SLOT: thirty-days-day-19.mp4 — the real Day 19 post */}
|
||||
<video className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-19.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-19.jpg" autoPlay muted loop playsInline preload="none" />
|
||||
|
||||
Use alpha channels to layer subjects into a scene, with the matte holding while the subject moves.
|
||||
|
||||
@@ -145,65 +145,69 @@ Days 20 to 30 move from one composition to a repeatable pipeline: reusable block
|
||||
|
||||
<CardGroup cols={2}>
|
||||
<Card title="Day 20 — Claude Design" href="https://x.com/HyperFrames_/status/2081184676430160379">
|
||||
{/* VIDEO SLOT: thirty-days-day-20.mp4 — the real Day 20 post */}
|
||||
<video className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-20.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-20.jpg" autoPlay muted loop playsInline preload="none" />
|
||||
|
||||
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">
|
||||
{/* VIDEO SLOT: thirty-days-day-21.mp4 — the real Day 21 post */}
|
||||
<video className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-21.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-21.jpg" autoPlay muted loop playsInline preload="none" />
|
||||
|
||||
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">
|
||||
{/* VIDEO SLOT: thirty-days-day-22.mp4 — the real Day 22 post */}
|
||||
<video className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-22.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-22.jpg" autoPlay muted loop playsInline preload="none" />
|
||||
|
||||
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">
|
||||
{/* VIDEO SLOT: thirty-days-day-23.mp4 — the real Day 23 post */}
|
||||
<video className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-23.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-23.jpg" autoPlay muted loop playsInline preload="none" />
|
||||
|
||||
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">
|
||||
{/* VIDEO SLOT: thirty-days-day-24.mp4 — the real Day 24 post */}
|
||||
<video className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-24.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-24.jpg" autoPlay muted loop playsInline preload="none" />
|
||||
|
||||
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">
|
||||
<video className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-25.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-25.jpg" autoPlay muted loop playsInline preload="none" />
|
||||
|
||||
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">
|
||||
{/* VIDEO SLOT: thirty-days-day-26.mp4 — the real Day 26 post */}
|
||||
<video className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-26.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-26.jpg" autoPlay muted loop playsInline preload="none" />
|
||||
|
||||
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">
|
||||
{/* VIDEO SLOT: thirty-days-day-27.mp4 — the real Day 27 post */}
|
||||
<video className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-27.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-27.jpg" autoPlay muted loop playsInline preload="none" />
|
||||
|
||||
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">
|
||||
{/* VIDEO SLOT: thirty-days-day-28.mp4 — the real Day 28 post */}
|
||||
<video className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-28.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-28.jpg" autoPlay muted loop playsInline preload="none" />
|
||||
|
||||
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">
|
||||
{/* VIDEO SLOT: thirty-days-day-29.mp4 — the real Day 29 post */}
|
||||
<video className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-29.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-29.jpg" autoPlay muted loop playsInline preload="none" />
|
||||
|
||||
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 title="Day 30 — Thirty for thirty">
|
||||
<video className="w-full aspect-video rounded-lg object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-30.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/thirty-days-day-30.jpg" autoPlay muted loop playsInline preload="none" />
|
||||
|
||||
Thirty days in one cut — a second from every lesson, back to back. From install on Day 1 to the whole series here.
|
||||
|
||||
</Card>
|
||||
</CardGroup>
|
||||
|
||||
Reference in New Issue
Block a user