diff --git a/docs/prompting/anatomy.mdx b/docs/prompting/anatomy.mdx index 4e8262839..a8a4eb605 100644 --- a/docs/prompting/anatomy.mdx +++ b/docs/prompting/anatomy.mdx @@ -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` + +**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. + + *Next: [The specification dial](/prompting/specification-dial) — how much of the skeleton to fill in, and when density stops being optional.* diff --git a/docs/prompting/capstone.mdx b/docs/prompting/capstone.mdx index e1899cc29..02b943493 100644 --- a/docs/prompting/capstone.mdx +++ b/docs/prompting/capstone.mdx @@ -6,7 +6,7 @@ description: "One prompt, one continuous camera move, every technique in this gu *"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.* diff --git a/docs/prompting/captions-catalog.mdx b/docs/prompting/captions-catalog.mdx index 983949f61..48c00e21c 100644 --- a/docs/prompting/captions-catalog.mdx +++ b/docs/prompting/captions-catalog.mdx @@ -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 + +**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). + + + + *Next: [When to generate artwork](/prompting/generated-artwork) — where hand-drawn HTML/CSS/SVG wins, and where a generated image beats it.* diff --git a/docs/prompting/code-blocks.mdx b/docs/prompting/code-blocks.mdx index 8d61d1d63..cc3ff721a 100644 --- a/docs/prompting/code-blocks.mdx +++ b/docs/prompting/code-blocks.mdx @@ -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. + +**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). + + + + *Next: [Data and maps](/prompting/data-and-maps) — the same named-block, quoted-copy pattern, for charts, stats, and maps instead of code.* diff --git a/docs/prompting/data-and-maps.mdx b/docs/prompting/data-and-maps.mdx index 3d3bf0546..3996f5d7b 100644 --- a/docs/prompting/data-and-maps.mdx +++ b/docs/prompting/data-and-maps.mdx @@ -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. + +**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). + + + + *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.* diff --git a/docs/prompting/design-systems.mdx b/docs/prompting/design-systems.mdx index 964e92a48..d58e4f395 100644 --- a/docs/prompting/design-systems.mdx +++ b/docs/prompting/design-systems.mdx @@ -89,4 +89,10 @@ The engine rationale: a workflow's preset is a coherent, tested system — color + +**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). + + + + *Next: [Variables and templating](/prompting/variables-and-templating) — turn the brand tokens that repeat across a series into named slots you fill per render.* diff --git a/docs/prompting/generated-artwork.mdx b/docs/prompting/generated-artwork.mdx index 9bb918d91..61501024c 100644 --- a/docs/prompting/generated-artwork.mdx +++ b/docs/prompting/generated-artwork.mdx @@ -25,4 +25,10 @@ The same brief — four people arm in arm, warm gradient sweaters, flat-illustra *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.* + +**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). + + + + *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.* diff --git a/docs/prompting/iterating.mdx b/docs/prompting/iterating.mdx index a0631fe21..839d425ee 100644 --- a/docs/prompting/iterating.mdx +++ b/docs/prompting/iterating.mdx @@ -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. + +**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. + + *Next: [Recreating something you saw](/prompting/recreating-references) — the same absolute-target discipline, applied to matching a specific reference frame by frame.* diff --git a/docs/prompting/media-and-audio.mdx b/docs/prompting/media-and-audio.mdx index 08c3a5a6f..752f60484 100644 --- a/docs/prompting/media-and-audio.mdx +++ b/docs/prompting/media-and-audio.mdx @@ -116,4 +116,10 @@ This mirrors the negatives discipline in [Anatomy](/prompting/anatomy): close th Installable overlays, captions, and effects + +**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). + + + + *Next: [Design systems and brand](/prompting/design-systems) — pointing the agent at a source of brand truth instead of describing a vibe.* diff --git a/docs/prompting/motion.mdx b/docs/prompting/motion.mdx index 2bff96d18..fe9f596e6 100644 --- a/docs/prompting/motion.mdx +++ b/docs/prompting/motion.mdx @@ -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. + +**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. + + + +*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. diff --git a/docs/prompting/music-and-slideshows.mdx b/docs/prompting/music-and-slideshows.mdx index 3e8bfb088..02a66b5f9 100644 --- a/docs/prompting/music-and-slideshows.mdx +++ b/docs/prompting/music-and-slideshows.mdx @@ -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). + +**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). + + + + *Next: [Motion graphics](/prompting/motion-graphics) — the shortest one yet, a single motion graphic where motion alone is the message.* diff --git a/docs/prompting/overlays-and-lower-thirds.mdx b/docs/prompting/overlays-and-lower-thirds.mdx index 29677dc19..1924db5c3 100644 --- a/docs/prompting/overlays-and-lower-thirds.mdx +++ b/docs/prompting/overlays-and-lower-thirds.mdx @@ -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 + +**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). + + + + *Next: [Caption styles](/prompting/captions-catalog) — the same timed-block pattern, tuned to on-screen text instead of name cards and social replicas.* diff --git a/docs/prompting/overview.mdx b/docs/prompting/overview.mdx index f83b74803..8040ba7a0 100644 --- a/docs/prompting/overview.mdx +++ b/docs/prompting/overview.mdx @@ -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 diff --git a/docs/prompting/rendering-and-output.mdx b/docs/prompting/rendering-and-output.mdx index 9b9c0ef24..4d49929ab 100644 --- a/docs/prompting/rendering-and-output.mdx +++ b/docs/prompting/rendering-and-output.mdx @@ -114,4 +114,10 @@ The cheapest way to avoid a wasted `high`/4K/HDR render is to judge the frame fi Cloud rendering setup and cost + +**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. + + + + *Next: [Porting from Remotion](/prompting/remotion-migration) — bringing an existing Remotion project into everything you now know.* diff --git a/docs/prompting/runtimes-and-3d.mdx b/docs/prompting/runtimes-and-3d.mdx index de3571de2..d167e5712 100644 --- a/docs/prompting/runtimes-and-3d.mdx +++ b/docs/prompting/runtimes-and-3d.mdx @@ -86,4 +86,10 @@ The rule of thumb: anything the video needs to *know* must be present before ren + +**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). + + + + *Next: [Media and audio](/prompting/media-and-audio) — precise phrasing for voiceover, music, sound, and assets, instead of motion and rendering.* diff --git a/docs/prompting/storyboards.mdx b/docs/prompting/storyboards.mdx index 544792732..a66ab2ff8 100644 --- a/docs/prompting/storyboards.mdx +++ b/docs/prompting/storyboards.mdx @@ -99,4 +99,10 @@ Without stating the return explicitly, a rebuild is free to treat the early moti + +**Capstone thread** — the [Level 7 film](/prompting/capstone) stretches this chapter's callback device across its whole runtime: the `
` 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). + + + + *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.* diff --git a/docs/prompting/transitions.mdx b/docs/prompting/transitions.mdx index a77da8573..a48d185c3 100644 --- a/docs/prompting/transitions.mdx +++ b/docs/prompting/transitions.mdx @@ -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 + +**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. + + + + *Next: [Code animations](/prompting/code-blocks) — naming a block and pasting real code for walkthroughs, diffs, and terminal takes.* diff --git a/docs/prompting/variables-and-templating.mdx b/docs/prompting/variables-and-templating.mdx index 676bd2a7d..bf00a04f7 100644 --- a/docs/prompting/variables-and-templating.mdx +++ b/docs/prompting/variables-and-templating.mdx @@ -86,4 +86,8 @@ If total length must differ per output, that's a different root `data-duration` + +**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. + + *Next: [Storyboards](/prompting/storyboards) — for multi-scene work, prompt the plan a frame-by-frame build fills in, not the scenes one by one.* diff --git a/docs/prompting/vfx-and-liquid-glass.mdx b/docs/prompting/vfx-and-liquid-glass.mdx index cefd4d5bc..6d93dc245 100644 --- a/docs/prompting/vfx-and-liquid-glass.mdx +++ b/docs/prompting/vfx-and-liquid-glass.mdx @@ -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. + +**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). + + + + *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.*