mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-04 16:42:27 +00:00
docs(prompting): thread capstone regions through the guide as each chapter's worked example
This commit is contained in:
Vance Ingalls
@@ -76,4 +76,8 @@ The fixes that come up most, as before/after pairs — each exists because of ho
|
||||
- ❌ `counts from $0 to $4.2M`
|
||||
- ✅ `counts up to $4.2M`
|
||||
|
||||
<Note>
|
||||
**Capstone thread** — the [Level 7 capstone](/prompting/capstone) prompt is this skeleton at maximum scale — route, spec, beats (its nine regions), copy quoted exactly, technique pinned per region, and a hard negative list. The chapters between here and there each teach one clause of it; the capstone is where they compose.
|
||||
</Note>
|
||||
|
||||
*Next: [The specification dial](/prompting/specification-dial) — how much of the skeleton to fill in, and when density stops being optional.*
|
||||
|
||||
+22
-12
@@ -6,7 +6,7 @@ description: "One prompt, one continuous camera move, every technique in this gu
|
||||
<video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/capstone-timeline-default.mp4" style={{ borderRadius: "0.5rem", marginTop: "0.75rem" }}></video>
|
||||
*"The Timeline" — 1920x1080, ~62 seconds, one prompt, one unbroken camera move, unedited.*
|
||||
|
||||
Every technique in this film has a chapter in this guide.
|
||||
If you read the guide in order, you have already seen every piece of this film. Each region was cut out and embedded in the chapter that teaches its technique — the typed opening in [Code animations](/prompting/code-blocks), the chart and map in [Data and maps](/prompting/data-and-maps), the footage pipeline in [Media and audio](/prompting/media-and-audio), the glass and mural in [VFX](/prompting/vfx-and-liquid-glass) and [Generated artwork](/prompting/generated-artwork), the beat grid in [Music](/prompting/music-and-slideshows), the 3D coil in [Runtimes and 3D](/prompting/runtimes-and-3d), the seeded finale in [Motion](/prompting/motion). This page is where the pieces become one composition, and the prompt below is the glue: every paragraph of it is a chapter of this guide restated as a binding clause.
|
||||
|
||||
The concept is the product: the viewer travels along one literal timeline — the thing HyperFrames is built on — from the first typed character to the finished MP4. Everything in it is true: real catalog counts, real cloud regions, real product surfaces, footage staged as the material the tool processes. And the film has no scenes in the slideshow sense — it is one continuous camera journey through one wide world, which is the chapter's biggest lesson.
|
||||
|
||||
@@ -84,15 +84,15 @@ Every region pins a different technique, and every technique has a chapter:
|
||||
|
||||
| Region | What it demonstrates | Chapter that teaches it |
|
||||
| --- | --- | --- |
|
||||
| Type | Per-character code typing; the underline that becomes the wire | [Code animations](/prompting/code-blocks), [Prompt anatomy](/prompting/anatomy) |
|
||||
| Mount | The timeline's own vocabulary — tracks, clips, `data-*` labels | [Prompt anatomy](/prompting/anatomy) |
|
||||
| Measure | `data-chart` block; the wire as chart baseline (matched motion) | [Data and maps](/prompting/data-and-maps), [Transitions](/prompting/transitions) |
|
||||
| Everywhere | `world-map` block; real Lambda / Cloud Run regions | [Data and maps](/prompting/data-and-maps), [Rendering and output](/prompting/rendering-and-output) |
|
||||
| Material | Generated clip → HEVC proxy → background removed *before* the speech → the line's keywords slam in word-synced as display text BEHIND the cutout (silhouette occlusion) → lower-third behind the subject | [Media and audio](/prompting/media-and-audio), [Caption styles](/prompting/captions-catalog), [Overlays and lower thirds](/prompting/overlays-and-lower-thirds) |
|
||||
| Surface | `sdf-iris` shader lens, frosted glass, palette-neutral generated mural | [Transitions](/prompting/transitions), [VFX and liquid glass](/prompting/vfx-and-liquid-glass), [When to generate artwork](/prompting/generated-artwork) |
|
||||
| Rhythm | Cuts on a real analyzed beat grid (`hyperframes beats`) | [Music videos and slideshows](/prompting/music-and-slideshows) |
|
||||
| Depth | Real Three.js via the frame adapter, wire as 3D coil; the chip joins the scene to thread the loops and pass behind the form (true depth occlusion) | [Runtimes and 3D](/prompting/runtimes-and-3d) |
|
||||
| Render | Seeded (42) two-frame-hold confetti — determinism as the punchline | [Motion that reads premium](/prompting/motion) (rule 7) |
|
||||
| Type (0:00–0:07) | Per-character code typing; the underline that becomes the wire | [Code animations](/prompting/code-blocks), [Prompt anatomy](/prompting/anatomy) |
|
||||
| Mount (0:07–0:14) | The timeline's own vocabulary — tracks, clips, `data-*` labels | [Prompt anatomy](/prompting/anatomy) |
|
||||
| Measure (0:14–0:21) | `data-chart` block; the wire as chart baseline (matched motion) | [Data and maps](/prompting/data-and-maps), [Transitions](/prompting/transitions) |
|
||||
| Everywhere (0:21–0:28) | `world-map` block; real Lambda / Cloud Run regions | [Data and maps](/prompting/data-and-maps), [Rendering and output](/prompting/rendering-and-output) |
|
||||
| Material (0:28–0:39) | Generated clip → HEVC proxy → background removed *before* the speech → the line's keywords slam in word-synced as display text BEHIND the cutout (silhouette occlusion) → lower-third behind the subject | [Media and audio](/prompting/media-and-audio), [Caption styles](/prompting/captions-catalog), [Overlays and lower thirds](/prompting/overlays-and-lower-thirds) |
|
||||
| Surface (0:39–0:45) | `sdf-iris` shader lens, frosted glass, palette-neutral generated mural | [Transitions](/prompting/transitions), [VFX and liquid glass](/prompting/vfx-and-liquid-glass), [When to generate artwork](/prompting/generated-artwork) |
|
||||
| Rhythm (0:45–0:52) | Cuts on a real analyzed beat grid (`hyperframes beats`) | [Music videos and slideshows](/prompting/music-and-slideshows) |
|
||||
| Depth (0:52–0:56) | Real Three.js via the frame adapter, wire as 3D coil; the chip joins the scene to thread the loops and pass behind the form (true depth occlusion) | [Runtimes and 3D](/prompting/runtimes-and-3d) |
|
||||
| Render (0:56–1:02) | Seeded (42) two-frame-hold confetti — determinism as the punchline | [Motion that reads premium](/prompting/motion) (rule 7) |
|
||||
|
||||
The camera itself is [Motion that reads premium](/prompting/motion)'s "camera as actor" rule taken to its logical end — the camera isn't *in* the film, it *is* the film. The persistent wire/ruler/protagonist are [Storyboards](/prompting/storyboards)' callback device stretched across the whole runtime instead of two frames. And the whole thing is written in [High-fidelity looks](/prompting/visual-specs)' density: exact hexes, exact timings, named eases, quoted copy.
|
||||
|
||||
@@ -113,8 +113,18 @@ hyperframes render --variables '{"ground":"#0d1420","ink":"#c8ff3d"}' --strict-v
|
||||
|
||||
The mural trick from the previous capstone carries over: the artwork is generated **palette-neutral** (grayscale) and duotoned live by CSS layers driven by the `ground`/`ink` variables, so even the raster re-skins. Keep color in CSS and shapes in the raster whenever a template frame needs to survive a re-skin.
|
||||
|
||||
## What this page proved
|
||||
## How everything ties together
|
||||
|
||||
A chart, a map, a diff of typed markup, real processed footage, 3D, glass, a shader seam, a beat grid, seeded confetti — every technique is traceable to a chapter you've already read. But the thing that makes it a film instead of a slideshow isn't any of them: it's the cinematography contract — one camera, persistent elements, arrivals instead of cuts — and that, like everything else here, is just words in the prompt.
|
||||
Read the prompt again with the guide behind you and it stops looking like one enormous ask. Region by region it is material you already have: the typed opening is [Code animations](/prompting/code-blocks), the chart and map paragraphs are [Data and maps](/prompting/data-and-maps), the Material paragraph is [Media and audio](/prompting/media-and-audio) + [Caption styles](/prompting/captions-catalog) + [Overlays](/prompting/overlays-and-lower-thirds) run in sequence, Surface is [Transitions](/prompting/transitions) + [VFX](/prompting/vfx-and-liquid-glass) + [Generated artwork](/prompting/generated-artwork), Rhythm is [Music](/prompting/music-and-slideshows), Depth is [Runtimes and 3D](/prompting/runtimes-and-3d), and the finale is [Motion](/prompting/motion)'s rule 7. None of those clauses is new — they are the chapters, restated as requirements.
|
||||
|
||||
What IS new — the part you could not have written after any single chapter — is the connective tissue, and that is exactly what the rest of the prompt spends its words on:
|
||||
|
||||
- **The cinematography contract** fuses nine demos into one space: one camera, arrivals instead of cuts, dwell-and-sweep pacing. Remove it and you get a playlist of chapter examples; with it, the same nine pieces are a film.
|
||||
- **The persistent elements do the handoffs.** The wire is the trick that makes each region *become* the next — the same line is the typed underline, the chart baseline, the map arc, the waveform, the 3D coil. The chip is a callback threaded through all nine techniques; the ruler makes the film's own medium visible.
|
||||
- **One brand file governs every region** ([Design systems](/prompting/design-systems)) — so nine techniques from nine chapters land looking like one designer made them.
|
||||
- **One variable scope re-skins all of it** ([Variables and templating](/prompting/variables-and-templating)) — the single-file constraint exists so the chart, the map, the glass, the mural, and the confetti all answer to the same two variables in one `--variables` flag.
|
||||
- **One soundtrack paces all of it** ([Media and audio](/prompting/media-and-audio)) — the VO cues every region's reveals, and the same BGM that beds the narration feeds the Rhythm region's beat analysis.
|
||||
|
||||
That's the method this guide has been building toward: learn each technique in isolation, then write the prompt whose job is not to invent the pieces but to bind them — shared space, shared spine, shared brand, shared variables, shared clock. A chart, a map, typed markup, processed footage, 3D, glass, a shader seam, a beat grid, seeded confetti: every one traceable to a chapter you've already read. The film is what the glue makes of them — and the glue, like everything else here, is just words in the prompt.
|
||||
|
||||
*Next: [Rules and anti-patterns](/prompting/rules-and-anti-patterns) — keep this cheat sheet open while you build.*
|
||||
|
||||
@@ -92,4 +92,10 @@ Three [Text Effects](/catalog/components/morph-text) components do one focused j
|
||||
- ❌ `add typewriter-bounce captions`
|
||||
- ✅ describe the tone ("tutorial, monospace, typewriter") or name a real component
|
||||
|
||||
<Note>
|
||||
**Capstone thread** — in the [Level 7 film](/prompting/capstone)'s Material region, word-synced keywords from the clip's own transcription slam in as display type behind the matted-out speaker — captions as scenography, on real word timings (0:28–0:36 below, cut from the film).
|
||||
</Note>
|
||||
|
||||
<video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/capstone-region-material.mp4" style={{ borderRadius: "0.5rem", marginTop: "0.75rem" }}></video>
|
||||
|
||||
*Next: [When to generate artwork](/prompting/generated-artwork) — where hand-drawn HTML/CSS/SVG wins, and where a generated image beats it.*
|
||||
|
||||
@@ -136,4 +136,10 @@ When the code you're animating comes from a real PR, don't hand-write the beats
|
||||
- [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.
|
||||
|
||||
<Note>
|
||||
**Capstone thread** — the [Level 7 film](/prompting/capstone) opens with this chapter's technique: real HyperFrames markup typed character by character, and the typed line's baseline literally grows into the timeline wire the rest of the film travels (0:00–0:07 below, cut from the film).
|
||||
</Note>
|
||||
|
||||
<video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/capstone-region-type.mp4" style={{ borderRadius: "0.5rem", marginTop: "0.75rem" }}></video>
|
||||
|
||||
*Next: [Data and maps](/prompting/data-and-maps) — the same named-block, quoted-copy pattern, for charts, stats, and maps instead of code.*
|
||||
|
||||
@@ -88,4 +88,10 @@ For a point-to-point journey — a route drawing across a map with a landing bea
|
||||
- [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.
|
||||
|
||||
<Note>
|
||||
**Capstone thread** — the [Level 7 film](/prompting/capstone)'s Measure and Everywhere regions are this chapter end to end: `data-chart` bars rise from the timeline wire while the hero count lands, then the same wire becomes a great-circle arc over the `world-map` block's real cloud render regions (0:14–0:28 below, cut from the film).
|
||||
</Note>
|
||||
|
||||
<video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/capstone-region-data-map.mp4" style={{ borderRadius: "0.5rem", marginTop: "0.75rem" }}></video>
|
||||
|
||||
*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.*
|
||||
|
||||
@@ -89,4 +89,10 @@ The engine rationale: a workflow's preset is a coherent, tested system — color
|
||||
</Card>
|
||||
</CardGroup>
|
||||
|
||||
<Note>
|
||||
**Capstone thread** — the entire [Level 7 film](/prompting/capstone) obeys a supplied `frame.md` — the real HyperFrames brand. The closing lockup is where the system shows most: ABC Solar Display for the display type and the mint→cyan CTA gradient in its single sanctioned appearance (0:56–1:02 below, cut from the film).
|
||||
</Note>
|
||||
|
||||
<video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/capstone-region-render.mp4" style={{ borderRadius: "0.5rem", marginTop: "0.75rem" }}></video>
|
||||
|
||||
*Next: [Variables and templating](/prompting/variables-and-templating) — turn the brand tokens that repeat across a series into named slots you fill per render.*
|
||||
|
||||
@@ -25,4 +25,10 @@ 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.*
|
||||
|
||||
<Note>
|
||||
**Capstone thread** — the [Level 7 film](/prompting/capstone)'s Surface region rides on generated artwork: a palette-neutral mural duotoned live by CSS from the composition's two variables, so even the raster re-skins on a `--variables` render (0:38–0:45 below, cut from the film).
|
||||
</Note>
|
||||
|
||||
<video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/capstone-region-surface.mp4" style={{ borderRadius: "0.5rem", marginTop: "0.75rem" }}></video>
|
||||
|
||||
*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.*
|
||||
|
||||
@@ -37,4 +37,8 @@ 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.
|
||||
|
||||
<Note>
|
||||
**Capstone thread** — several clauses in the [Level 7 film](/prompting/capstone)'s prompt exist only because frame review caught the builder drifting — the chip's hard bind to the wire, the pinned mural, the Depth region's occlusion contract. Each catch was folded back into the prompt so the next run can't regress: this chapter's loop, applied to the prompt itself.
|
||||
</Note>
|
||||
|
||||
*Next: [Recreating something you saw](/prompting/recreating-references) — the same absolute-target discipline, applied to matching a specific reference frame by frame.*
|
||||
|
||||
@@ -116,4 +116,10 @@ This mirrors the negatives discipline in [Anatomy](/prompting/anatomy): close th
|
||||
<Card title="Video components" href="/guides/video-components">Installable overlays, captions, and effects</Card>
|
||||
</CardGroup>
|
||||
|
||||
<Note>
|
||||
**Capstone thread** — the [Level 7 film](/prompting/capstone)'s Material region runs this chapter's entire pipeline on one clip: generated footage → HEVC auto-proxy → background removal mid-scene → word-synced captions from the clip's own transcription, with the clip's audio ducking the BGM (0:28–0:36 below, cut from the film).
|
||||
</Note>
|
||||
|
||||
<video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/capstone-region-material.mp4" style={{ borderRadius: "0.5rem", marginTop: "0.75rem" }}></video>
|
||||
|
||||
*Next: [Design systems and brand](/prompting/design-systems) — pointing the agent at a source of brand truth instead of describing a vibe.*
|
||||
|
||||
@@ -13,6 +13,13 @@ By now you can specify a frame precisely — exact copy, exact colors, exact lay
|
||||
6. **Match pacing to genre.** Showreel-style cuts run 1.5-4 seconds per idea; a stretched 8-second version of a 2-second idea feels slow no matter how it's animated.
|
||||
7. **Handmade imperfection stays reproducible.** A stop-motion or hand-animated feel wants irregular timing, not machine-smooth eases — but true unseeded randomness breaks the render: HyperFrames must produce the identical frame every time it seeks to the same point, and `Math.random()` can't promise that. Seed a PRNG once at composition start instead, and step discrete elements between held positions (a "two-frame hold": land, hold two frames, jump to the next offset) rather than tweening continuously between them. The irregularity is real — it just comes from a seed, not from chance.
|
||||
|
||||
<Note>
|
||||
**Capstone thread** — rule 2 taken to its logical end is the spine of the [Level 7 film](/prompting/capstone): one continuous camera journey with full dwells at the hero moments. This is that camera mid-flight — accelerating out of one region, arriving and stopping in the next (0:11–0:21 of the film, cut in isolation). Rule 7 shows up there too: the film's closing confetti is seeded with a two-frame hold.
|
||||
</Note>
|
||||
|
||||
<video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/capstone-region-camera.mp4" style={{ borderRadius: "0.5rem", marginTop: "0.75rem" }}></video>
|
||||
*The capstone's camera: never cutting, easing through arrivals, stopping only to let a beat land.*
|
||||
|
||||
## The grammar, measured
|
||||
|
||||
The same composition built twice — identical content, identical layout; the only variable is the motion treatment. The first build commits the anti-patterns above: simultaneous identical entrances, no camera, a frozen final 2.4 seconds. The second applies the seven rules.
|
||||
|
||||
@@ -80,4 +80,10 @@ What you can already steer from the prompt, before you've learned any technique.
|
||||
Both prompts here are unnarrated. `/music-to-video` has no TTS by design; if you want a spoken voice-over instead of a music bed, that's a different workflow (see the router in `/hyperframes`). For the six-part skeleton these prompts share, see [Prompt anatomy](/prompting/anatomy); for adjectives that map to eases and transitions, [Vocabulary](/prompting/vocabulary).
|
||||
</Tip>
|
||||
|
||||
<Note>
|
||||
**Capstone thread** — the [Level 7 film](/prompting/capstone)'s Rhythm region cuts media cards onto a real analyzed beat grid from `hyperframes beats` — the film's only sanctioned hard cuts, every one on a detected beat while the camera keeps traveling (0:45–0:52 below, cut from the film).
|
||||
</Note>
|
||||
|
||||
<video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/capstone-region-rhythm.mp4" style={{ borderRadius: "0.5rem", marginTop: "0.75rem" }}></video>
|
||||
|
||||
*Next: [Motion graphics](/prompting/motion-graphics) — the shortest one yet, a single motion graphic where motion alone is the message.*
|
||||
|
||||
@@ -104,4 +104,10 @@ Quote the exact copy — unquoted names and titles get paraphrased (see [anatomy
|
||||
- ❌ `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
|
||||
|
||||
<Note>
|
||||
**Capstone thread** — the [Level 7 film](/prompting/capstone)'s Material region docks a designed lower-third chip that renders *behind* the matted-out subject (0:28–0:36 below, cut from the film).
|
||||
</Note>
|
||||
|
||||
<video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/capstone-region-material.mp4" style={{ borderRadius: "0.5rem", marginTop: "0.75rem" }}></video>
|
||||
|
||||
*Next: [Caption styles](/prompting/captions-catalog) — the same timed-block pattern, tuned to on-screen text instead of name cards and social replicas.*
|
||||
|
||||
@@ -24,7 +24,7 @@ The guide is one arc, novice to advanced. Each level is what you can do once you
|
||||
| **4 — [Substance](/prompting/code-blocks)** | Add real capabilities: code animation, data-viz, overlays, captions, generated artwork, VFX, 3D. |
|
||||
| **5 — [Voice & sound](/prompting/media-and-audio)** | Narration, music, and any footage you supply, scored and mixed correctly. |
|
||||
| **6 — [Scale](/prompting/design-systems)** | Design systems, variables, storyboards, editing, iterating, matching references, and export — a video as a system, not a one-off. |
|
||||
| **7 — [Capstone](/prompting/capstone)** | Everything above, composed into one real prompt — one continuous camera journey along the timeline itself, rendered twice from one template, dissected region by region. |
|
||||
| **7 — [Capstone](/prompting/capstone)** | Everything above, composed into one real prompt. Each chapter on the way up shows its own region of this film cut out in isolation; the capstone prompt is the glue that binds them into one continuous camera journey, rendered twice from one template. |
|
||||
|
||||
## One-time setup
|
||||
|
||||
|
||||
@@ -114,4 +114,10 @@ The cheapest way to avoid a wasted `high`/4K/HDR render is to judge the frame fi
|
||||
<Card title="AWS Lambda" href="/deploy/aws-lambda">Cloud rendering setup and cost</Card>
|
||||
</CardGroup>
|
||||
|
||||
<Note>
|
||||
**Capstone thread** — the [Level 7 film](/prompting/capstone) ends on this chapter's core promise: the protagonist chip snaps into a render slot and seeded confetti holds every piece for exactly two frames — deterministic, identical on every render (0:56–1:02 below, cut from the film). Its Everywhere region names the real cloud render targets: Lambda and Cloud Run.
|
||||
</Note>
|
||||
|
||||
<video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/capstone-region-render.mp4" style={{ borderRadius: "0.5rem", marginTop: "0.75rem" }}></video>
|
||||
|
||||
*Next: [Porting from Remotion](/prompting/remotion-migration) — bringing an existing Remotion project into everything you now know.*
|
||||
|
||||
@@ -86,4 +86,10 @@ The rule of thumb: anything the video needs to *know* must be present before ren
|
||||
</Card>
|
||||
</CardGroup>
|
||||
|
||||
<Note>
|
||||
**Capstone thread** — the [Level 7 film](/prompting/capstone)'s Depth region is real Three.js through the frame adapter: the timeline wire coils around a rim-lit faceted form, and the protagonist chip threads the coil's loops and passes behind the form with true depth occlusion (0:51–0:58 below, cut from the film).
|
||||
</Note>
|
||||
|
||||
<video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/capstone-region-depth.mp4" style={{ borderRadius: "0.5rem", marginTop: "0.75rem" }}></video>
|
||||
|
||||
*Next: [Media and audio](/prompting/media-and-audio) — precise phrasing for voiceover, music, sound, and assets, instead of motion and rendering.*
|
||||
|
||||
@@ -99,4 +99,10 @@ Without stating the return explicitly, a rebuild is free to treat the early moti
|
||||
</Card>
|
||||
</CardGroup>
|
||||
|
||||
<Note>
|
||||
**Capstone thread** — the [Level 7 film](/prompting/capstone) stretches this chapter's callback device across its whole runtime: the `<div class="clip">` chip typed in the opening rides the wire through every region and finally snaps into the render slot as the payoff (0:56–1:02 below, cut from the film).
|
||||
</Note>
|
||||
|
||||
<video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/capstone-region-render.mp4" style={{ borderRadius: "0.5rem", marginTop: "0.75rem" }}></video>
|
||||
|
||||
*Next: [Editing existing videos](/prompting/editing-existing-videos) — the editor verbs that turn a first render, storyboard or not, into the twenty edits after it.*
|
||||
|
||||
@@ -90,4 +90,10 @@ Name the block and the seam — transitions are the one place where per-seam con
|
||||
- ❌ `add a page-curl transition`
|
||||
- ✅ pick a real block, e.g. `sdf-iris` for an iris reveal
|
||||
|
||||
<Note>
|
||||
**Capstone thread** — the [Level 7 film](/prompting/capstone) allows itself exactly one shader seam: the camera pushes through an `sdf-iris` lens into the Surface region (0:38–0:45 below, cut from the film) with the timeline wire visible through the iris the whole way — a lens the journey passes through, not a cut.
|
||||
</Note>
|
||||
|
||||
<video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/capstone-region-surface.mp4" style={{ borderRadius: "0.5rem", marginTop: "0.75rem" }}></video>
|
||||
|
||||
*Next: [Code animations](/prompting/code-blocks) — naming a block and pasting real code for walkthroughs, diffs, and terminal takes.*
|
||||
|
||||
@@ -86,4 +86,8 @@ If total length must differ per output, that's a different root `data-duration`
|
||||
</Card>
|
||||
</CardGroup>
|
||||
|
||||
<Note>
|
||||
**Capstone thread** — the [Level 7 film](/prompting/capstone) is a working template: one single-file composition, one variable scope, and its second render — navy ground, acid-green ink, every region re-skinned including the generated mural — is nothing but one `--variables` flag. Both full renders are embedded on the capstone page.
|
||||
</Note>
|
||||
|
||||
*Next: [Storyboards](/prompting/storyboards) — for multi-scene work, prompt the plan a frame-by-frame build fills in, not the scenes one by one.*
|
||||
|
||||
@@ -100,4 +100,10 @@ The Effects components above have none of this — they're plain CSS and animate
|
||||
- [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.
|
||||
|
||||
<Note>
|
||||
**Capstone thread** — the [Level 7 film](/prompting/capstone)'s Surface region floats its inspector panels on the brand's glass tokens — translucent white over real backdrop blur, the mural visibly smearing through each panel (0:38–0:45 below, cut from the film).
|
||||
</Note>
|
||||
|
||||
<video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/capstone-region-surface.mp4" style={{ borderRadius: "0.5rem", marginTop: "0.75rem" }}></video>
|
||||
|
||||
*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.*
|
||||
|
||||
Reference in New Issue
Block a user