Skip to content

Commit 06d2d6f

Browse files
ukimsanovukimsanov
committed
docs: 30 Days keeps its structure but borrows no videos
The user is supplying the real thirty daily films. Until then this page must not substitute launch or docs-demo clips for them — that is exactly the reuse the whole video pass was meant to end. Removed every borrowed clip: the four hero Frames that pulled the launch film and the Day 3/4/23 demo cuts, and the docs thumbnails standing in for day posters. What stays is honest and complete-looking: the thirty day cards, each linking its real X post, each with a named slot — thirty-days-day-NN.mp4 — so the real files drop straight in.
1 parent 08fadce commit 06d2d6f

1 file changed

Lines changed: 28 additions & 63 deletions

File tree

‎docs/thirty-days.mdx‎

Lines changed: 28 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -4,103 +4,68 @@ sidebarTitle: 30 Days of HyperFrames
44
description: "The official 30 Days of HyperFrames lessons, collected in one place as the series is published."
55
---
66

7-
import { DocsVideo } from "/snippets/docs-video.jsx";
87

98
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.
109

11-
<Frame caption="The launch film the series was built around — one person, one prompt, one finished launch video.">
12-
<DocsVideo
13-
title="HyperFrames launch film"
14-
src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/hyperframes-launch-preview.mp4"
15-
poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/hyperframes-launch-poster.jpg"
16-
/>
17-
</Frame>
1810

1911
The series began on [@HeyGen](https://x.com/HeyGen) and continues on [@HyperFrames_](https://x.com/HyperFrames_).
2012

21-
## Three lessons, in full
22-
23-
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.
24-
25-
<Frame caption="Day 3 — a pull request becomes a 32-second review anyone on the team can watch.">
26-
<DocsVideo
27-
title="Day 3 — PR-to-Video"
28-
src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/full-prvideo.mp4"
29-
poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/tile-prvideo.jpg"
30-
/>
31-
</Frame>
32-
33-
<Frame caption="Day 4 — a track analysed for beats and sections, then every cut snapped to that grid.">
34-
<DocsVideo
35-
title="Day 4 — Music-to-Video"
36-
src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/full-music-v2.mp4"
37-
poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/tile-music.jpg"
38-
/>
39-
</Frame>
40-
41-
<Frame caption="Day 23 — one composition, two variable sets, two finished vertical cuts.">
42-
<DocsVideo
43-
title="Day 23 — Templates and variables"
44-
src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/full-variables.mp4"
45-
poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/tile-variables.jpg"
46-
/>
47-
</Frame>
4813

4914
## Start and create
5015

5116
Days 1 to 9 cover the inputs: a repo, a track, a topic, a speaker, a design file. Every card opens the original post.
5217

5318
<CardGroup cols={2}>
5419
<Card title="Day 1 — Install HyperFrames" href="https://x.com/HeyGen/status/2074176916819685648">
55-
<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"}} />
20+
{/* VIDEO SLOT: thirty-days-day-01.mp4 — the real Day 1 post */}
5621

5722
Give your coding agent the HyperFrames skills. One router reads the request and picks the workflow.
5823

5924
</Card>
6025
<Card title="Day 2 — Give your brand a motion language" href="https://x.com/HeyGen/status/2074574265714905167">
61-
{/* 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). */}
26+
{/* VIDEO SLOT: thirty-days-day-02.mp4 — the real Day 2 post */}
6227

6328
Turn a visual identity into reusable motion direction, written down once as `FRAME.md` and read on every later build.
6429

6530
</Card>
6631
<Card title="Day 3 — PR-to-Video" href="https://x.com/HeyGen/status/2074954182583554051">
67-
<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"}} />
32+
{/* VIDEO SLOT: thirty-days-day-03.mp4 — the real Day 3 post */}
6833

6934
Explain an open pull request as a short video. Plays in full [above](#three-lessons-in-full).
7035

7136
</Card>
7237
<Card title="Day 4 — Music-to-Video" href="https://x.com/HeyGen/status/2075262117964615956">
73-
<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"}} />
38+
{/* VIDEO SLOT: thirty-days-day-04.mp4 — the real Day 4 post */}
7439

7540
Build a video around a track and its beat. Plays in full [above](#three-lessons-in-full).
7641

7742
</Card>
7843
<Card title="Day 5 — Faceless explainer" href="https://x.com/HeyGen/status/2075682104302882908">
79-
<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"}} />
44+
{/* VIDEO SLOT: thirty-days-day-05.mp4 — the real Day 5 post */}
8045

8146
Turn a topic into a designed explainer without footage. The visuals are invented per scene.
8247

8348
</Card>
8449
<Card title="Day 6 — Talking-head recut" href="https://x.com/HeyGen/status/2075998619325604238">
85-
<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"}} />
50+
{/* VIDEO SLOT: thirty-days-day-06.mp4 — the real Day 6 post */}
8651

8752
Add synchronized graphics to an existing speaker video. The source clip plays untouched underneath.
8853

8954
</Card>
9055
<Card title="Day 7 — Motion graphics" href="https://x.com/HeyGen/status/2076381187640324427">
91-
<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"}} />
56+
{/* VIDEO SLOT: thirty-days-day-07.mp4 — the real Day 7 post */}
9257

9358
Make a short, design-led animation where the motion carries the message.
9459

9560
</Card>
9661
<Card title="Day 8 — Music and SFX with the HeyGen CLI" href="https://x.com/HeyGen/status/2076719036742922504">
97-
<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"}} />
62+
{/* VIDEO SLOT: thirty-days-day-08.mp4 — the real Day 8 post */}
9863

9964
Find and use audio from the command line, then let the mix duck itself under the narration.
10065

10166
</Card>
10267
<Card title="Day 9 — Figma to HyperFrames" href="https://x.com/HeyGen/status/2077072141309382770">
103-
<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"}} />
68+
{/* VIDEO SLOT: thirty-days-day-09.mp4 — the real Day 9 post */}
10469

10570
Turn an existing design into a video composition — as live HTML, not a flattened export.
10671

@@ -113,61 +78,61 @@ Days 10 to 19 are about steering: how you ask, what you inspect, and what you fi
11378

11479
<CardGroup cols={2}>
11580
<Card title="Day 10 — Anatomy of a prompt" href="https://x.com/HeyGen/status/2077438104982667282">
116-
{/* 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. */}
81+
{/* VIDEO SLOT: thirty-days-day-10.mp4 — the real Day 10 post */}
11782

11883
Structure a request so the agent gets the important intent right the first time.
11984

12085
</Card>
12186
<Card title="Day 11 — Repurpose an existing video" href="https://x.com/HeyGen/status/2077798995762823593">
122-
{/* VISUAL: a reference film beside the rebuilt composition, showing which patterns were extracted. No published asset matches this lesson. */}
87+
{/* VIDEO SLOT: thirty-days-day-11.mp4 — the real Day 11 post */}
12388

12489
Extract useful patterns from a reference instead of describing them from memory.
12590

12691
</Card>
12792
<Card title="Day 12 — Dynamic captions" href="https://x.com/HeyGen/status/2078190361932103716">
128-
<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"}} />
93+
{/* VIDEO SLOT: thirty-days-day-12.mp4 — the real Day 12 post */}
12994

13095
Make captions part of the visual design rather than a track laid on top.
13196

13297
</Card>
13398
<Card title="Day 13 — Studio preview, part 1" href="https://x.com/HeyGen/status/2078589328562016559">
134-
<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"}} />
99+
{/* VIDEO SLOT: thirty-days-day-13.mp4 — the real Day 13 post */}
135100

136101
Inspect a composition before rendering — in Studio, through your agent, or from the terminal.
137102

138103
</Card>
139104
<Card title="Day 14 — Studio preview, part 2: keyframes" href="https://x.com/HeyGen/status/2078945075787452660">
140-
<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"}} />
105+
{/* VIDEO SLOT: thirty-days-day-14.mp4 — the real Day 14 post */}
141106

142107
Adjust motion with visible keyframe controls, one lane per animated property.
143108

144109
</Card>
145110
<Card title="Day 15 — Sample the web" href="https://x.com/HeyGen/status/2079251321484722675">
146-
<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"}} />
111+
{/* VIDEO SLOT: thirty-days-day-15.mp4 — the real Day 15 post */}
147112

148113
Bring useful web motion into a composition by capturing the real page.
149114

150115
</Card>
151116
<Card title="Day 16 — Media use" href="https://x.com/HeyGen/status/2079609229737111978">
152-
<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"}} />
117+
{/* VIDEO SLOT: thirty-days-day-16.mp4 — the real Day 16 post */}
153118

154119
Work with the available asset libraries, and control how each one crops and fits.
155120

156121
</Card>
157122
<Card title="Day 17 — Storyboard" href="https://x.com/HeyGen/status/2080012076454719554">
158-
{/* 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). */}
123+
{/* VIDEO SLOT: thirty-days-day-17.mp4 — the real Day 17 post */}
159124

160125
Agree on the sequence before building every scene, so revisions land on the plan rather than the render.
161126

162127
</Card>
163128
<Card title="Day 18 — HyperFrames in Video Agent" href="https://x.com/HeyGen/status/2080407266755510452">
164-
{/* 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. */}
129+
{/* VIDEO SLOT: thirty-days-day-18.mp4 — the real Day 18 post */}
165130

166131
Create with HyperFrames inside HeyGen Video Agent.
167132

168133
</Card>
169134
<Card title="Day 19 — Background removal" href="https://x.com/HeyGen/status/2080762012330807438">
170-
<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"}} />
135+
{/* VIDEO SLOT: thirty-days-day-19.mp4 — the real Day 19 post */}
171136

172137
Use alpha channels to layer subjects into a scene, with the matte holding while the subject moves.
173138

@@ -180,31 +145,31 @@ Days 20 to 30 move from one composition to a repeatable pipeline: reusable block
180145

181146
<CardGroup cols={2}>
182147
<Card title="Day 20 — Claude Design" href="https://x.com/HyperFrames_/status/2081184676430160379">
183-
{/* 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). */}
148+
{/* VIDEO SLOT: thirty-days-day-20.mp4 — the real Day 20 post */}
184149

185150
Take a design direction into a HyperFrames project without redrawing it by hand.
186151

187152
</Card>
188153
<Card title="Day 21 — Cloud rendering" href="https://x.com/HyperFrames_/status/2081491370485952790">
189-
<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"}} />
154+
{/* VIDEO SLOT: thirty-days-day-21.mp4 — the real Day 21 post */}
190155

191156
Render without making one local computer the bottleneck. Two commands hand the job to the cloud.
192157

193158
</Card>
194159
<Card title="Day 22 — Components Catalog" href="https://x.com/HyperFrames_/status/2081798071353278651">
195-
<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"}} />
160+
{/* VIDEO SLOT: thirty-days-day-22.mp4 — the real Day 22 post */}
196161

197162
Add reusable scenes and effects instead of rebuilding them each time.
198163

199164
</Card>
200165
<Card title="Day 23 — Templates and variables" href="https://x.com/HyperFrames_/status/2082197435246600341">
201-
<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"}} />
166+
{/* VIDEO SLOT: thirty-days-day-23.mp4 — the real Day 23 post */}
202167

203168
Turn one composition into repeatable versions. Plays in full [above](#three-lessons-in-full).
204169

205170
</Card>
206171
<Card title="Day 24 — Color grading" href="https://x.com/HyperFrames_/status/2082536413829235004">
207-
<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"}} />
172+
{/* VIDEO SLOT: thirty-days-day-24.mp4 — the real Day 24 post */}
208173

209174
Correct or stylize images and footage in code, and bring your own LUT packs.
210175

@@ -214,25 +179,25 @@ Days 20 to 30 move from one composition to a repeatable pipeline: reusable block
214179

215180
</Card>
216181
<Card title="Day 26 — Media effects and overlays" href="https://x.com/HyperFrames_/status/2083324288632045910">
217-
<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"}} />
182+
{/* VIDEO SLOT: thirty-days-day-26.mp4 — the real Day 26 post */}
218183

219184
Add designed treatments to real media. Two to six authored colour ramps change the whole visual language.
220185

221186
</Card>
222187
<Card title="Day 27 — Deploy" href="https://x.com/HyperFrames_/status/2083633492894900456">
223-
{/* 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. */}
188+
{/* VIDEO SLOT: thirty-days-day-27.mp4 — the real Day 27 post */}
224189

225190
Run rendering on your own cloud infrastructure. See [Deploy](/guides/deploy) for the four render routes.
226191

227192
</Card>
228193
<Card title="Day 28 — Contribute to the Catalog" href="https://x.com/HyperFrames_/status/2084070152975634743">
229-
{/* VISUAL: a contributed block going from local scaffold to merged catalog entry. No published asset matches this lesson. */}
194+
{/* VIDEO SLOT: thirty-days-day-28.mp4 — the real Day 28 post */}
230195

231196
Publish reusable building blocks for other creators. The [Catalog](/catalog) lists what has landed so far.
232197

233198
</Card>
234199
<Card title="Day 29 — Components update" href="https://x.com/HyperFrames_/status/2084338269194732003">
235-
{/* VISUAL: the three themed registry families — mk, yt and hw — combined in one composition. No published asset matches this lesson. */}
200+
{/* VIDEO SLOT: thirty-days-day-29.mp4 — the real Day 29 post */}
236201

237202
Combine the expanded component set in a single project.
238203

0 commit comments

Comments
 (0)