docs: link the free lessons from the docs (#6588)

* docs: link the free lessons from the docs navbar * docs: practice cards linking the related free lessons * docs: practice cards as text cards
2026-10-30 09:16:55 +00:00 · 2026-10-27 20:08:25 +00:00
parent 6ae7c7688c
commit 0163ee11a7
12 changed files with 60 additions and 0 deletions
@@ -1043,6 +1043,10 @@
  },
  "navbar": {
    "links": [
+      {
+        "label": "Lessons",
+        "href": "https://hyperframes.heygen.com/lessons"
+      },
      {
        "type": "github",
        "href": "https://github.com/heygen-com/hyperframes"
@@ -49,6 +49,10 @@ To reorder the story or pick the best moments from a long recording, describe th
 Tell the agent any names or terms the transcript may miss, and where the speaker's face and any on-screen text are,
 so graphics stay clear of them.

+<Card title="Practice it: Edit your own footage" icon="graduation-cap" href="https://hyperframes.heygen.com/lessons/edit-your-footage">
+  Free 20-minute lesson with a short video, a quiz and a brief to try. A footage brief is the goal, where it plays, two or three edits and the exact title words.
+</Card>
+
 ## Prompts that work

 Two words help: the **rail** is the line of captions that carries the spoken words; an **embed** is one big word set
@@ -45,6 +45,10 @@ The same request shape can animate kinetic type, a statistic, chart, logo, lower

 If the result needs narration, several scenes, or a longer story, make a [custom video](/guides/general-video).

+<Card title="Practice it: A quick win: animate your logo" icon="graduation-cap" href="https://hyperframes.heygen.com/lessons/logo-quick-win">
+  Free 18-minute lesson with a short video, a quiz and a brief to try. A short brief is enough: how long, what shape, your logo file and any words in quotes.
+</Card>
+
 ## Choose the output

 - **MP4** for a finished standalone graphic.
@@ -107,6 +107,10 @@ Set the ones you care about and leave the rest to the agent.
 - **Avoid:** `use our brand colors`
 - **Instead:** `brand colors #5E6AD2 on off-black; logo at assets/logo.svg`

+<Card title="Practice it: Name the scene, say what it becomes" icon="graduation-cap" href="https://hyperframes.heygen.com/lessons/name-the-scene">
+  Free 20-minute lesson with a short video, a quiz and a brief to try. Swap taste words for things you can see: colors, speeds, moves, seconds.
+</Card>
+
 ## Keep the product and its details connected

 A full interface shows where the task happens. A close-up makes the important action readable. Ask for both when isolated feature shots lose the sense of a complete product:
@@ -91,6 +91,10 @@ To dip the music only where the voice sits instead of turning it all down, use a
 Music can start after narration begins: the dip then starts at the right level for that moment, and speech that has
 already ended doesn't make a new dip.

+<Card title="Practice it: Sound" icon="graduation-cap" href="https://hyperframes.heygen.com/lessons/sound">
+  Free 20-minute lesson with a short video, a quiz and a brief to try. Say the sound in your brief: the music's mood, the voice, and where the music starts and stops.
+</Card>
+
 ## Related topics

 - [Add captions to a video with AI](/guides/captions-and-recuts)
@@ -18,6 +18,10 @@ Everything in the film is true. Real catalog counts. Real cloud regions. Real pr

 And the film has no scenes. There is one wide world and one camera moving through it. That is the biggest lesson on this page.

+<Card title="Practice it: Layer a shot" icon="graduation-cap" href="https://hyperframes.heygen.com/lessons/layer-a-shot">
+  Free 10-minute lesson with a short video, a quiz and a brief to try. Send a shot in four layers, in order: storyboard, timing, camera and transitions, then motion and finish.
+</Card>
+
 ## Why the first two builds failed

 Two earlier builds of this capstone passed every check and still failed review.
@@ -218,6 +218,10 @@ automatic H.264 proxy.*
 See the [Rendering guide](/guides/rendering#input-video-codecs) for the
 mechanics — proxy generation, caching, and which codecs it covers.

+<Card title="Practice it: Edit your own footage" icon="graduation-cap" href="https://hyperframes.heygen.com/lessons/edit-your-footage">
+  Free 20-minute lesson with a short video, a quiz and a brief to try. A footage brief is the goal, where it plays, two or three edits and the exact title words.
+</Card>
+
 ## The supplied-assets rule

 For any asset you already have, an explicit path removes the most ambiguity. The
@@ -417,6 +421,10 @@ Audio problems are easier to notice when the picture is not competing for
 attention. Listening once without watching catches things twenty prompt rounds
 will not.

+<Card title="Practice it: Sound" icon="graduation-cap" href="https://hyperframes.heygen.com/lessons/sound">
+  Free 20-minute lesson with a short video, a quiz and a brief to try. Say the sound in your brief: the music's mood, the voice, and where the music starts and stops.
+</Card>
+
 ## In a real film

 This clause from a [longer HyperFrames film](/prompting/capstone#the-prompt-word-for-word)
@@ -26,6 +26,10 @@ Watch the video once, then tell your agent what you see in plain words. These ph

 Give a timestamp when you can ("at 4.2 s"). Ask for one change at a time and watch again.

+<Card title="Practice it: Timing" icon="graduation-cap" href="https://hyperframes.heygen.com/lessons/timing">
+  Free 16-minute lesson with a short video, a quiz and a brief to try. A beat is a change on screen with a time: a word appears, a card leaves, a cut lands.
+</Card>
+
 ## Ideas worth asking for

 Each idea below has a side-by-side film: the same scene built twice, where the only difference is one line of the prompt.
@@ -132,6 +136,10 @@ All of them are in the [catalog](/catalog/blocks/cross-warp-morph); a name that

 **Don't ask to fade one scene out and then fade the next one in.** It renders as a jump cut with a dip in the middle. The transition is the exit: ask for "`cross-warp-morph` from scene 1 to scene 2".

+<Card title="Practice it: Camera and transitions" icon="graduation-cap" href="https://hyperframes.heygen.com/lessons/camera-and-transitions">
+  Free 16-minute lesson with a short video, a quiz and a brief to try. Name the cut: a hard cut is an instant switch, a match cut carries a move across it, a zoom cut pushes in and pulls back.
+</Card>
+
 ## Related

 - [Plan scenes with a storyboard](/prompting/design-systems#storyboards)
@@ -106,6 +106,10 @@ The skeleton above structures the *ask*. Inside each beat, describe the *content

 One sentence per element, slots in any order: *"a giant number **(element)** counts up to $4.2M with an odometer roll **(motion)**, easing out as it lands **(timing)**, centered **(layout)** in green on dark navy **(style)**."* Elements you don't describe, the agent designs — which is fine when you trust its taste and a drift risk when you don't (see [the specification dial](#how-much-to-specify)).

+<Card title="Practice it: The brief" icon="graduation-cap" href="https://hyperframes.heygen.com/lessons/the-brief">
+  Free 20-minute lesson with a short video, a quiz and a brief to try. A brief is the goal, who it is for, two to four specifics and the exact words in quotes.
+</Card>
+
 ## How much to specify

 How much you specify sets how far the result can drift from what you imagined, not whether it works. Mood words get a
@@ -158,6 +162,10 @@ When you're dialing in a look, relative corrections oscillate — "make the dots

 And freeze what already works: "the framing and motion are right — don't touch them; only change the dot size." Without the freeze clause, a rebuild can drift on axes you'd already settled.

+<Card title="Practice it: Review and correct" icon="graduation-cap" href="https://hyperframes.heygen.com/lessons/review-and-correct">
+  Free 20-minute lesson with a short video, a quiz and a brief to try. Watch the first video all the way through, with sound, before you reply.
+</Card>
+
 ## Rules and common mistakes

 **Ask for a hold, but say what stays alive.** A landed title should hold still; keep moving only what is actually
@@ -43,6 +43,10 @@ drawing. For Mac (Apple Silicon or Intel), Windows (64-bit Intel and AMD; not Wi
  </Step>
 </Steps>

+<Card title="Practice it: The brief" icon="graduation-cap" href="https://hyperframes.heygen.com/lessons/the-brief">
+  Free 20-minute lesson with a short video, a quiz and a brief to try. A brief is the goal, who it is for, two to four specifics and the exact words in quotes.
+</Card>
+
 ## With your agent

 For Claude Code, Codex, Cursor, Copilot, Gemini CLI or any agent that works in a folder on your computer, on any
@@ -31,6 +31,10 @@ While the agent is working, Enter steers the run: it stops and starts again with
 other thing and queues your message to run next. To swap them, change **While Framey works, Send** in **Settings** >
 **Agent**. Picks and files always queue.

+<Card title="Practice it: Review and correct" icon="graduation-cap" href="https://hyperframes.heygen.com/lessons/review-and-correct">
+  Free 20-minute lesson with a short video, a quiz and a brief to try. Watch the first video all the way through, with sound, before you reply.
+</Card>
+
 ## Point, draw, or comment on the picture

 <HoverVideo className="hf-aside hf-spot" src="https://static.heygen.ai/hyperframes-oss/docs/studio-demos/comment-tool-v2.mp4" poster="/public/images/studio-app/spots/comment-tool-v2.jpg" hasAudio={false} label="Where Comment is, under the preview" />
@@ -49,6 +49,10 @@ build 10.*

 If you aren't signed in or have no agent yet, the app walks you through that first and then sends your request.

+<Card title="Practice it: The brief" icon="graduation-cap" href="https://hyperframes.heygen.com/lessons/the-brief">
+  Free 20-minute lesson with a short video, a quiz and a brief to try. A brief is the goal, who it is for, two to four specifics and the exact words in quotes.
+</Card>
+
 ## Or take the step by step

 **Take the step by step**, next to **Remix from inspiration** on Home, builds a launch video from four parts taken