docs(prompting): level 4 — capability chapters framed as additive

Add entry bridges (each naming a specific Level 1-3 artifact the
capability slots into) and literal exit bridges across the 7 Level 4
Substance pages, per the novice-to-advanced restructure plan.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

docs/prompting/captions-catalog.mdx

@@ -3,6 +3,8 @@ title: Caption styles
 description: "Map caption tone to named caption components, and prompt per-word emphasis for composed videos."
 ---
 
+Your faceless explainer from Level 1 already asked for "embedded captions, keywords highlighted in the brand color" and got a sensible default. This chapter is the catalog behind that ask — the named components you can pin instead, by tone, so the highlight color and the animation are a decision, not a default.
+
 ## What caption styles do and when they trigger
 
 Caption components are drop-in snippets that render animated on-screen text — one visual identity per component, animating per word or per line. Prompts trigger this layer when you ask for captions, subtitles, kinetic text, lyric-style words, or word-by-word titles inside a composition you're building. Describe the *energy* of the captions and the agent picks matching typography, size, and animation; name a component to lock the look.
@@ -89,3 +91,5 @@ Three [Text Effects](/catalog/components/morph-text) components do one focused j
 **Don't invent caption names.** Only the components in the [Captions](/catalog/components/caption-highlight) and [Text Effects](/catalog/components/morph-text) groups exist.
 - ❌ `add typewriter-bounce captions`
 - ✅ describe the tone ("tutorial, monospace, typewriter") or name a real component
+
+*Next: [When to generate artwork](/prompting/generated-artwork) — where hand-drawn HTML/CSS/SVG wins, and where a generated image beats it.*

docs/prompting/code-blocks.mdx

@@ -3,6 +3,8 @@ title: Code animations
 description: "Prompt code walkthroughs — typing, diffing, highlighting, scrolling — and pick a terminal or editor theme by name."
 ---
 
+Your PR video from Level 1 named `code-diff` for a single beat and moved on. This chapter is the rest of that catalog: typing, diffing, highlighting, scrolling, and picking a terminal or editor theme by name — for the moments a walkthrough needs to slow down and let the code itself carry the scene.
+
 Code is the one subject where the framework does the hard part for you. The [Code Animations](/catalog/blocks/code-typing) blocks handle syntax highlighting, caret tracking, diff coloring, and camera moves deterministically — you describe the *walkthrough*, name the block, and paste your snippet. This page is the vocabulary for doing that well; for turning a real pull request into a code-change video, see [Code and PRs](/prompting/code-and-prs).
 
 Everything here follows the [one-shot skeleton](/prompting/anatomy): route, spec, beats, copy, technique, negatives. The "technique" slot is where you name the block, and the "copy" slot is where your code goes — quoted exactly, because unquoted code gets paraphrased into something that won't compile.
@@ -133,3 +135,5 @@ When the code you're animating comes from a real PR, don't hand-write the beats
 - [Copy-paste examples](/prompting/examples) — full prompts you can adapt.
 - [Code and PRs](/prompting/code-and-prs) — turning a GitHub PR into a code-change video.
 - [Motion that reads premium](/prompting/motion) — the hold-and-settle rules the code blocks still need from you.
+
+*Next: [Data and maps](/prompting/data-and-maps) — the same named-block, quoted-copy pattern, for charts, stats, and maps instead of code.*

docs/prompting/data-and-maps.mdx

@@ -3,6 +3,8 @@ title: Data and maps
 description: "Prompt animated charts, count-up stats, and maps — highlight regions, draw flows, size bubbles — or hand-draw a chart for full control."
 ---
 
+Level 3's six-scene SaaS explainer ended on a `cinematic-zoom` into a pricing reveal — a transition doing the work a real number could. This chapter is how to put an actual animated chart or count-up stat in that reveal instead of just a camera move.
+
 Numbers and geography are the two subjects where "what data" and "how it moves" are separate decisions. The [Data](/catalog/blocks/data-chart) blocks give you a polished chart or map you feed values into; the count-up [showcase](/catalog/blocks/apple-money-count) blocks handle the odometer-and-flourish moment. Everything here plugs into the [one-shot skeleton](/prompting/anatomy) — the data goes in the "copy" slot, the block name in "technique."
 
 ### Charts: name the block, or hand-draw
@@ -85,3 +87,5 @@ For a point-to-point journey — a route drawing across a map with a landing bea
 - [Copy-paste examples](/prompting/examples) — bar-chart race and stat-tile prompts to adapt.
 - [Generated artwork](/prompting/generated-artwork) — where hand-drawn HTML/CSS/SVG shines, and where it doesn't.
 - [The specification dial](/prompting/specification-dial) — deciding when to name a block versus hand-draw.
+
+*Next: [Overlays and lower thirds](/prompting/overlays-and-lower-thirds) — naming timed blocks that sit above your footage or scene, instead of ones that render the scene itself.*

docs/prompting/generated-artwork.mdx

@@ -3,6 +3,8 @@ title: When to generate artwork
 description: "Code-drawn wins for UI, type, geometry, and 3D; illustration-led hero art comes from an image model, animated as layers."
 ---
 
+Your Level 1 music slideshow cut real photos to the beat — there was real art to work with. This chapter is for the opposite case: a hero character, a painterly scene, sculptural objects that don't exist as a photo or a footage capture yet.
+
 Code-drawn HTML/CSS/SVG excels where the medium is native: UI mockups, typography, geometric shapes, charts, pixel art, and 3D via Three.js. For **illustration-led** hero art — characters, painterly scenes, sculptural objects — hand-drawn SVG tops out at clipart quality no matter how well you prompt. The fix is a hybrid:
 
 > Generate the hero artwork as an image (via the media-use skill's image generation), then animate it with code. Anything that must move independently — eyelids, light beams, drawing lines — stays a code layer on top of the static art.
@@ -22,3 +24,5 @@ The same brief — four people arm in arm, warm gradient sweaters, flat-illustra
 
 <video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/artwork-generated.mp4" style={{ borderRadius: "0.5rem", marginTop: "0.75rem" }}></video>
 *Generated illustration animated as layers — real anatomy and editorial shading; the animated line still passes behind the figures because the artwork was keyed to transparency.*
+
+*Next: [VFX and liquid glass](/prompting/vfx-and-liquid-glass) — device mockups, frosted glass, and cinematic effects for when the layer on top needs its own spectacle.*

docs/prompting/overlays-and-lower-thirds.mdx

@@ -3,6 +3,8 @@ title: Overlays and lower thirds
 description: "Prompt named lower-third and social-post overlay blocks with timing, copy, and brand tone."
 ---
 
+Level 1's founder-clip.mp4 got named lower-thirds and card overlays through `/talking-head-recut`, which designs bespoke cards synced to that specific transcript. This chapter is the reverse case: ready-made lower-third and social-overlay blocks you drop into a composition you're building from scratch, no existing footage required — the same vocabulary, pointed at a scene instead of a shot.
+
 ## What overlays do and when they trigger
 
 Overlays are timed blocks that sit on top of your footage or scene — a lower third that names a speaker, a broadcast ticker, or a replica social-media card. Because each is a timed clip, prompts trigger this layer when you ask to *add* something *at* a moment: "add a lower third at 0:03 with the name and title," "show an animated tweet during the intro," "put a Spotify now-playing card in the corner." Give the timestamp, the copy, and the tone; the agent places the block on a track above the footage.
@@ -101,3 +103,5 @@ Quote the exact copy — unquoted names and titles get paraphrased (see [anatomy
 **Don't invent overlay names.** Only the blocks in the [Social Overlays](/catalog/blocks/x-post) and [Lower Thirds](/catalog/blocks/lt-clean-bar) groups exist.
 - ❌ `add a linkedin-post overlay`
 - ✅ pick a real block, or describe the card and let the agent build a custom one in a freeform composition
+
+*Next: [Caption styles](/prompting/captions-catalog) — the same timed-block pattern, tuned to on-screen text instead of name cards and social replicas.*

docs/prompting/runtimes-and-3d.mdx

@@ -3,6 +3,8 @@ title: Runtimes and 3D
 description: "GSAP is the default and you rarely name it — but real 3D, existing animation files, and scene transitions each have a runtime worth pinning in the prompt."
 ---
 
+Level 2's copy-paste examples include an isometric-cards prompt that asks to "Build the scene in Three.js via the adapter" — this chapter is why that line is there, and the rest of the runtime map for when GSAP, the default, isn't the right tool.
+
 HyperFrames animates through the [frame-adapter](/concepts/frame-adapters) pattern: any runtime that can answer "what should the screen look like at frame N?" plugs in and renders deterministically. [GSAP](/guides/gsap-animation) is the default adapter and covers most motion — you rarely need to name it. The cases below are the ones where the default choice can go wrong, so the prompt should pick the runtime for you.
 
 ## Real 3D → Three.js via the adapter
@@ -81,3 +83,5 @@ The rule of thumb: anything the video needs to *know* must be present before ren
     Naming the scene-to-scene handoffs worth a shader transition.
   </Card>
 </CardGroup>
+
+*Next: [Media and audio](/prompting/media-and-audio) — precise phrasing for voiceover, music, sound, and assets, instead of motion and rendering.*

docs/prompting/vfx-and-liquid-glass.mdx

@@ -3,7 +3,7 @@ title: VFX and liquid glass
 description: "Prompt device mockups, liquid-glass UI, shatter/portal/magnetic moments, and ambient polish — and know which effects need the canvas pipeline."
 ---
 
-This is the showy end of the catalog: 3D device mockups, frosted-glass Apple UI, and cinematic moments where HTML shatters or gets sucked through a portal. Two groups do the work — the [HTML-in-Canvas](/catalog/blocks/vfx-iphone-device) blocks (real WebGL, live HTML rendered as GPU textures) and the [Effects](/catalog/components/vignette) components (lightweight CSS polish). Knowing which is which is the difference between an effect that renders and one that surprises you. All of it slots into the [one-shot skeleton](/prompting/anatomy) at the "technique" step.
+Your motion-graphics terminal piece from Level 1 already named one of these — `vfx-shatter`, for the beat where the terminal breaks apart. This chapter is the rest of that showy end of the catalog: 3D device mockups, frosted-glass Apple UI, and cinematic moments where HTML shatters or gets sucked through a portal. Two groups do the work — the [HTML-in-Canvas](/catalog/blocks/vfx-iphone-device) blocks (real WebGL, live HTML rendered as GPU textures) and the [Effects](/catalog/components/vignette) components (lightweight CSS polish). Knowing which is which is the difference between an effect that renders and one that surprises you. All of it slots into the [one-shot skeleton](/prompting/anatomy) at the "technique" step.
 
 ### Device mockups
 
@@ -99,3 +99,5 @@ The Effects components above have none of this — they're plain CSS and animate
 - [Motion that reads premium](/prompting/motion) — the ambient-idle rule these polish layers serve.
 - [Copy-paste examples](/prompting/examples) — a `vfx-liquid-background` social-card prompt to adapt.
 - [HTML-in-Canvas guide](/guides/html-in-canvas) — how `drawElementImage` works and the flag details.
+
+*Next: [Runtimes and 3D](/prompting/runtimes-and-3d) — picking GSAP, Three.js, or Lottie by what the moment actually needs, including the real depth these effects render on.*