From 8468771dc60e1ccbe825d61107cb0df17e97aa5e Mon Sep 17 00:00:00 2001 From: Vance Ingalls Date: Wed, 29 Jul 2026 15:10:08 -0700 Subject: [PATCH] docs(prompting): six more validated renders, tighten the prompts their builds exposed --- docs/prompting/code-blocks.mdx | 6 +++++- docs/prompting/data-and-maps.mdx | 16 ++++++++++++++-- docs/prompting/vfx-and-liquid-glass.mdx | 12 ++++++++++-- 3 files changed, 29 insertions(+), 5 deletions(-) diff --git a/docs/prompting/code-blocks.mdx b/docs/prompting/code-blocks.mdx index acddc04d3..a95043192 100644 --- a/docs/prompting/code-blocks.mdx +++ b/docs/prompting/code-blocks.mdx @@ -118,7 +118,11 @@ The [Code Snippets](/catalog/blocks/code-snippet-monokai) blocks are pre-styled | High Contrast | `code-snippet-high-contrast` | High Contrast Light | `code-snippet-high-contrast-light` | | Visual Studio Dark | `code-snippet-visual-studio-dark` | Visual Studio Light | `code-snippet-visual-studio-light` | -> /motion-graphics 5-second 1920x1080 video. A macOS Terminal window in the Ocean profile types `npx skills add heygen-com/hyperframes` character by character, then holds on the prompt. Use the `code-snippet-apple-terminal-ocean` registry block. No narration. +> /motion-graphics 5-second 1920x1080 video. A macOS Terminal window in the Ocean profile types `npx skills add heygen-com/hyperframes` character by character, then holds on the typed, unexecuted command with the cursor blinking — no output, no second prompt. Use the `code-snippet-apple-terminal-ocean` registry block. No narration. + + +*Rendered from the prompt above, unedited.* + **Match the theme to the surface you're claiming to show.** A terminal command in a VS Code editor chrome reads wrong; a source file in Terminal.app reads wrong. - ❌ `monokai theme typing a shell command` diff --git a/docs/prompting/data-and-maps.mdx b/docs/prompting/data-and-maps.mdx index 9fd4962a5..fbe7966a2 100644 --- a/docs/prompting/data-and-maps.mdx +++ b/docs/prompting/data-and-maps.mdx @@ -25,7 +25,11 @@ Feed data inline or as a file. Small series go straight in the prompt; a CSV get *Rendered from the prompt above, unedited — labels count up while the next bar is already growing.* -> /motion-graphics 10-second 1920x1080 video, dark slate background. Title "Top languages 2026" top-left. Five horizontal bars (Python, TypeScript, Rust, Go, Java) grow from zero with staggered starts, overtaking each other twice mid-animation; each bar has a right-edge value label counting up to its final %. End state holds 2s with the leader pulsing once. Hand-draw everything — no chart library. No audio. +> /motion-graphics 10-second 1920x1080 video, dark slate background. Title "Top languages 2026" top-left. Five horizontal bars (Python, TypeScript, Rust, Go, Java) grow from zero with staggered starts, overtaking each other twice mid-animation; each bar has a right-edge value label counting up to its final %. End state holds 2s, alive — the leader pulses once, timed to finish exactly on the last frame, never a frozen tail. Hand-author the marks (no chart library) and make them *look* hand-drawn: wobbly ink strokes, not clean rectangles. Say which two pairs overtake and when, or the reveal will land on a different number of crossings each run. No audio. + + +*Rendered from the prompt above, unedited — hand-authored ink strokes, no chart library; ranks swap twice.* + **State the block *or* opt out of it — don't leave it implicit.** "Animate this data" without a decision drifts between a generic block and an improvised layout. - ❌ `animate this CSV as a chart` @@ -41,6 +45,10 @@ For a single hero number, [`apple-money-count`](/catalog/blocks/apple-money-coun > /motion-graphics 6-second 1920x1080 video, dark navy background. Beat 1 (0-1s): label "ARR" fades up small, top-center. Beat 2 (1-4s): a giant number counts up to $4.2M with an odometer roll, easing out as it lands. Beat 3 (4-6s): "+312% YoY" stamps in below in green, then settles into a gentle ambient idle. Use the `apple-money-count` registry block as base. No narration. + +*Rendered from the prompt above, unedited.* + + ### Maps: match the ask to the map Each map block answers a different geographic question. Say what the map is *for* and name the matching block: @@ -78,7 +86,11 @@ The US map encodings combine — asking to "shade states *and* draw flows betwee For a point-to-point journey — a route drawing across a map with a landing beat — [`nyc-paris-flight`](/catalog/blocks/nyc-paris-flight) is the Apple-style flight animation: a plane flies New York → Paris with a marker circle, landing pop, and sound effects. Use it as the base and re-point the endpoints in your prompt. -> /motion-graphics 6-second 1920x1080 video. A realistic map with a plane flying between two cities, a marker circle at the origin, and a landing pop at the destination. Use the `nyc-paris-flight` registry block as base. No narration. +> /motion-graphics 6-second 1920x1080 video. A realistic map with a plane flying between two cities, a marker circle at the origin, and a landing pop at the destination. Use the `nyc-paris-flight` registry block as base — the route runs New York (JFK) → Paris (CDG), labelled at both ends. Keep the block's own title card and route ticks. End on the settled map, not on the block's white-out hand-off frame. No audio. + + +*Rendered from the prompt above, unedited.* + **A route is a flow with a vehicle, not a static arc.** If you want the drawn arc without the plane and sound, that's `us-map-flow`; if you want the journey performance, that's `nyc-paris-flight`. - ❌ `draw a line from NYC to Paris` (ambiguous between arc-only and full flight) diff --git a/docs/prompting/vfx-and-liquid-glass.mdx b/docs/prompting/vfx-and-liquid-glass.mdx index 3a6b36f88..a384681c7 100644 --- a/docs/prompting/vfx-and-liquid-glass.mdx +++ b/docs/prompting/vfx-and-liquid-glass.mdx @@ -61,7 +61,11 @@ The `vfx-*` blocks are single cinematic beats — spend them on a transition or | HTML floating over an organic liquid surface | [`vfx-liquid-background`](/catalog/blocks/vfx-liquid-background) | 12s | | A dramatic text reveal with chromatic shadow rays | [`vfx-text-cursor`](/catalog/blocks/vfx-text-cursor) | 8s | -> /motion-graphics 8-second 1920x1080 video. Beat 1 (0-4s): a landing-page hero holds under directional light. Beat 2 (4-6s): the whole page shatters into glass fragments that scatter. Beat 3 (6-8s): bold white text slams in on black. Use the `vfx-shatter` registry block. No narration, no image or media files. +> /motion-graphics 8-second 1920x1080 video. Beat 1 (0-4s): a landing-page hero holds under directional light. Beat 2 (4-6s): the whole page shatters into glass fragments that scatter. Beat 3 (6-8s): bold white text slams in on black. Use the `vfx-shatter` registry block; the final beat reads "HTML IS VIDEO". No narration, no image or media files. + + +*Rendered from the prompt above, unedited.* + **Name the exact effect — "explode," "break," "burst" don't map.** Each block is a specific simulation. - ❌ `make the UI explode` @@ -82,7 +86,11 @@ The [Effects](/catalog/components/vignette) components are lightweight, pure-CSS These are the ambient layer of the [motion grammar](/prompting/motion): grain and a slow `parallax-zoom` keep a "held" beat alive instead of freezing. Never write "holds motionless" — a still final second is the biggest cheap-motion tell; let a grain overlay and a 2% push carry the hold. -> /motion-graphics 6-second 1920x1080 video. A product logo settles center-frame, then holds — but keep it alive with a film grain overlay and a slow 3% push-in, plus one shimmer sweep across the wordmark at 4s. Use the `grain-overlay`, `parallax-zoom`, and `shimmer-sweep` registry components. No audio. +> /motion-graphics 6-second 1920x1080 video. A wordmark logo — "HYPERFRAMES" in platinum on near-black — settles center-frame, then holds — but keep it alive with a film grain overlay and a slow 3% push-in, plus one shimmer sweep across the wordmark at 4s. Use the `grain-overlay`, `parallax-zoom`, and `shimmer-sweep` registry components. No audio. + + +*Rendered from the prompt above, unedited — the "hold" stays alive on grain, a 3% push, and one shimmer pass.* + **Reach for grain over a literal freeze.** The engine holds the final state exactly as written. - ❌ `logo appears and holds still to the end`