mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-01 19:42:03 +00:00
docs(prompting): six more validated renders, tighten the prompts their builds exposed
This commit is contained in:
Vance Ingalls
@@ -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.
|
||||
|
||||
<video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/terminal-ocean.mp4" style={{ borderRadius: "0.5rem", marginTop: "0.75rem" }}></video>
|
||||
*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`
|
||||
|
||||
@@ -25,7 +25,11 @@ Feed data inline or as a file. Small series go straight in the prompt; a CSV get
|
||||
<video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/chart-languages.mp4" style={{ borderRadius: "0.5rem", marginTop: "0.75rem" }}></video>
|
||||
*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.
|
||||
|
||||
<video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/barrace-handdrawn.mp4" style={{ borderRadius: "0.5rem", marginTop: "0.75rem" }}></video>
|
||||
*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.
|
||||
|
||||
<video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/money-count.mp4" style={{ borderRadius: "0.5rem", marginTop: "0.75rem" }}></video>
|
||||
*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.
|
||||
|
||||
<video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/flight-route.mp4" style={{ borderRadius: "0.5rem", marginTop: "0.75rem" }}></video>
|
||||
*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)
|
||||
|
||||
@@ -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.
|
||||
|
||||
<video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/vfx-shatter.mp4" style={{ borderRadius: "0.5rem", marginTop: "0.75rem" }}></video>
|
||||
*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.
|
||||
|
||||
<video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/logo-polish.mp4" style={{ borderRadius: "0.5rem", marginTop: "0.75rem" }}></video>
|
||||
*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`
|
||||
|
||||
Reference in New Issue
Block a user