mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-01 19:42:03 +00:00
ukimsanov
fd90fd3e72
Three things the quality layer asserted but the pages did not support. changelog-process said "do not recreate docs/weekly-updates.mdx; that empty public page was retired" while the page exists with a real curated feed. It describes the page as it is: unlisted, reachable by URL and RSS, with versioned notes still in the Changelog. The Related-topics rule read as universal, but three different endings are in use and each is right for its shape — Related topics on task pages, a single Next line through the Prompt Guide's numbered sequence, and nothing on reference and concept pages. The rule now says that, and every section matches it; color-grading gained the Next line it was missing and no longer points at a page this stack retired. The vocabulary previews were 18 DocsVideo players in three unlabelled grids, so a reader saw several near-identical clips with no way to tell smooth from snappy. They are now native muted loops with visible captions, which is what AGENTS.md asks for small preview loops in the first place.
466 lines
16 KiB
Plaintext
466 lines
16 KiB
Plaintext
---
|
||
title: Vocabulary that changes output
|
||
description: "Natural-language adjectives the skills map to specific framework settings — easing, captions, transitions, audio, voices."
|
||
---
|
||
|
||
[The dial](/prompting/specification-dial) told you *how much* to specify; this page is the word list for the cheap-precision setting — style tokens that cost you nothing to say and remove real ambiguity. The skills map natural-language adjectives to specific framework settings. Using the right word gets you the right result without specifying technical details.
|
||
|
||
## Motion & easing
|
||
|
||
Describe how motion should *feel* and the agent picks the matching GSAP ease:
|
||
|
||
| Say this | Agent uses | Feels like |
|
||
| ----------- | ---------------- | ------------------------------ |
|
||
| smooth | `power2.out` | Natural deceleration |
|
||
| snappy | `power4.out` | Quick and decisive |
|
||
| bouncy | `back.out` | Overshoots then settles |
|
||
| springy | `elastic.out` | Oscillates into place |
|
||
| dramatic | `expo.out` | Fast start, long glide |
|
||
| dreamy | `sine.inOut` | Slow, symmetrical |
|
||
|
||
**Timing shorthand:** fast (0.2s) = energy, medium (0.4s) = professional, slow (0.6s) = luxury, very slow (1–2s) = cinematic.
|
||
|
||
Each word, rendered — the same move, only the ease changes:
|
||
|
||
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))", gap: "1rem", margin: "1.25rem 0" }}>
|
||
<figure style={{ margin: 0 }}>
|
||
<video
|
||
src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/ease-power2-out.mp4#t=0.1"
|
||
autoPlay
|
||
muted
|
||
loop
|
||
playsInline
|
||
preload="metadata"
|
||
aria-label="smooth preview"
|
||
style={{ display: "block", width: "100%", borderRadius: "10px", background: "#000" }}
|
||
/>
|
||
<figcaption style={{ marginTop: "0.4rem", fontSize: "0.8125rem", opacity: 0.75 }}>
|
||
smooth <code>power2.out</code>
|
||
</figcaption>
|
||
</figure>
|
||
<figure style={{ margin: 0 }}>
|
||
<video
|
||
src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/ease-power4-out.mp4#t=0.1"
|
||
autoPlay
|
||
muted
|
||
loop
|
||
playsInline
|
||
preload="metadata"
|
||
aria-label="snappy preview"
|
||
style={{ display: "block", width: "100%", borderRadius: "10px", background: "#000" }}
|
||
/>
|
||
<figcaption style={{ marginTop: "0.4rem", fontSize: "0.8125rem", opacity: 0.75 }}>
|
||
snappy <code>power4.out</code>
|
||
</figcaption>
|
||
</figure>
|
||
<figure style={{ margin: 0 }}>
|
||
<video
|
||
src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/ease-back-out.mp4#t=0.1"
|
||
autoPlay
|
||
muted
|
||
loop
|
||
playsInline
|
||
preload="metadata"
|
||
aria-label="bouncy preview"
|
||
style={{ display: "block", width: "100%", borderRadius: "10px", background: "#000" }}
|
||
/>
|
||
<figcaption style={{ marginTop: "0.4rem", fontSize: "0.8125rem", opacity: 0.75 }}>
|
||
bouncy <code>back.out</code>
|
||
</figcaption>
|
||
</figure>
|
||
<figure style={{ margin: 0 }}>
|
||
<video
|
||
src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/ease-elastic-out.mp4#t=0.1"
|
||
autoPlay
|
||
muted
|
||
loop
|
||
playsInline
|
||
preload="metadata"
|
||
aria-label="springy preview"
|
||
style={{ display: "block", width: "100%", borderRadius: "10px", background: "#000" }}
|
||
/>
|
||
<figcaption style={{ marginTop: "0.4rem", fontSize: "0.8125rem", opacity: 0.75 }}>
|
||
springy <code>elastic.out</code>
|
||
</figcaption>
|
||
</figure>
|
||
<figure style={{ margin: 0 }}>
|
||
<video
|
||
src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/ease-expo-out.mp4#t=0.1"
|
||
autoPlay
|
||
muted
|
||
loop
|
||
playsInline
|
||
preload="metadata"
|
||
aria-label="dramatic preview"
|
||
style={{ display: "block", width: "100%", borderRadius: "10px", background: "#000" }}
|
||
/>
|
||
<figcaption style={{ marginTop: "0.4rem", fontSize: "0.8125rem", opacity: 0.75 }}>
|
||
dramatic <code>expo.out</code>
|
||
</figcaption>
|
||
</figure>
|
||
<figure style={{ margin: 0 }}>
|
||
<video
|
||
src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/ease-sine-inout.mp4#t=0.1"
|
||
autoPlay
|
||
muted
|
||
loop
|
||
playsInline
|
||
preload="metadata"
|
||
aria-label="dreamy preview"
|
||
style={{ display: "block", width: "100%", borderRadius: "10px", background: "#000" }}
|
||
/>
|
||
<figcaption style={{ marginTop: "0.4rem", fontSize: "0.8125rem", opacity: 0.75 }}>
|
||
dreamy <code>sine.inOut</code>
|
||
</figcaption>
|
||
</figure>
|
||
</div>
|
||
|
||
|
||
## Camera language
|
||
|
||
Compositions have no physical camera, but camera words translate directly into scene transforms (or real camera moves in Three.js scenes):
|
||
|
||
| Say this | Agent builds |
|
||
| ------------------- | --------------------------------------------------------- |
|
||
| slow push-in | 4–8% scale increase across the scene, gentle ease |
|
||
| pull back / widen | scale decrease, often paired with elements entering |
|
||
| pan across | horizontal translate of the scene layer |
|
||
| drone orbit | continuous camera orbit (Three.js scenes) |
|
||
| crane down/up | vertical camera drift combined with a look-at shift |
|
||
| whip to | fast blurred slide into the next framing |
|
||
| parallax | layers translating at different rates for depth |
|
||
|
||
The same scene under each camera word:
|
||
|
||
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))", gap: "1rem", margin: "1.25rem 0" }}>
|
||
<figure style={{ margin: 0 }}>
|
||
<video
|
||
src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/camera-push-in.mp4#t=0.1"
|
||
autoPlay
|
||
muted
|
||
loop
|
||
playsInline
|
||
preload="metadata"
|
||
aria-label="slow push-in preview"
|
||
style={{ display: "block", width: "100%", borderRadius: "10px", background: "#000" }}
|
||
/>
|
||
<figcaption style={{ marginTop: "0.4rem", fontSize: "0.8125rem", opacity: 0.75 }}>
|
||
slow push-in
|
||
</figcaption>
|
||
</figure>
|
||
<figure style={{ margin: 0 }}>
|
||
<video
|
||
src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/camera-pull-back.mp4#t=0.1"
|
||
autoPlay
|
||
muted
|
||
loop
|
||
playsInline
|
||
preload="metadata"
|
||
aria-label="pull back preview"
|
||
style={{ display: "block", width: "100%", borderRadius: "10px", background: "#000" }}
|
||
/>
|
||
<figcaption style={{ marginTop: "0.4rem", fontSize: "0.8125rem", opacity: 0.75 }}>
|
||
pull back
|
||
</figcaption>
|
||
</figure>
|
||
<figure style={{ margin: 0 }}>
|
||
<video
|
||
src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/camera-pan.mp4#t=0.1"
|
||
autoPlay
|
||
muted
|
||
loop
|
||
playsInline
|
||
preload="metadata"
|
||
aria-label="pan across preview"
|
||
style={{ display: "block", width: "100%", borderRadius: "10px", background: "#000" }}
|
||
/>
|
||
<figcaption style={{ marginTop: "0.4rem", fontSize: "0.8125rem", opacity: 0.75 }}>
|
||
pan across
|
||
</figcaption>
|
||
</figure>
|
||
<figure style={{ margin: 0 }}>
|
||
<video
|
||
src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/camera-crane.mp4#t=0.1"
|
||
autoPlay
|
||
muted
|
||
loop
|
||
playsInline
|
||
preload="metadata"
|
||
aria-label="crane down/up preview"
|
||
style={{ display: "block", width: "100%", borderRadius: "10px", background: "#000" }}
|
||
/>
|
||
<figcaption style={{ marginTop: "0.4rem", fontSize: "0.8125rem", opacity: 0.75 }}>
|
||
crane down/up
|
||
</figcaption>
|
||
</figure>
|
||
<figure style={{ margin: 0 }}>
|
||
<video
|
||
src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/camera-whip.mp4#t=0.1"
|
||
autoPlay
|
||
muted
|
||
loop
|
||
playsInline
|
||
preload="metadata"
|
||
aria-label="whip to preview"
|
||
style={{ display: "block", width: "100%", borderRadius: "10px", background: "#000" }}
|
||
/>
|
||
<figcaption style={{ marginTop: "0.4rem", fontSize: "0.8125rem", opacity: 0.75 }}>
|
||
whip to
|
||
</figcaption>
|
||
</figure>
|
||
<figure style={{ margin: 0 }}>
|
||
<video
|
||
src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/camera-parallax.mp4#t=0.1"
|
||
autoPlay
|
||
muted
|
||
loop
|
||
playsInline
|
||
preload="metadata"
|
||
aria-label="parallax preview"
|
||
style={{ display: "block", width: "100%", borderRadius: "10px", background: "#000" }}
|
||
/>
|
||
<figcaption style={{ marginTop: "0.4rem", fontSize: "0.8125rem", opacity: 0.75 }}>
|
||
parallax
|
||
</figcaption>
|
||
</figure>
|
||
<figure style={{ margin: 0 }}>
|
||
<video
|
||
src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/camera-orbit.mp4#t=0.1"
|
||
autoPlay
|
||
muted
|
||
loop
|
||
playsInline
|
||
preload="metadata"
|
||
aria-label="drone orbit preview"
|
||
style={{ display: "block", width: "100%", borderRadius: "10px", background: "#000" }}
|
||
/>
|
||
<figcaption style={{ marginTop: "0.4rem", fontSize: "0.8125rem", opacity: 0.75 }}>
|
||
drone orbit
|
||
</figcaption>
|
||
</figure>
|
||
</div>
|
||
|
||
|
||
## Depth language
|
||
|
||
| Say this | Agent builds |
|
||
| ---------------------- | -------------------------------------------------------- |
|
||
| near-lens / foreground bokeh | large, heavily-blurred elements drifting close to camera |
|
||
| depth planes | 2–3 layers moving at different speeds |
|
||
| out-of-focus background | blurred, slower-moving back layer |
|
||
| shallow depth of field | sharp subject, blurred everything-else |
|
||
|
||
## Pacing language
|
||
|
||
| Say this | Agent builds |
|
||
| ----------------- | --------------------------------------------------- |
|
||
| punchy cuts | 1.5–4s per idea, hard cuts, overlapping entrances |
|
||
| cinematic holds | longer beats with ambient idle motion |
|
||
| beat-synced | cuts and accents on the music's beat grid |
|
||
| breathing room | a held moment before the next beat starts |
|
||
| ambient idle | 1–2% breathing scale + slow drift during holds |
|
||
|
||
## Caption tones
|
||
|
||
*The full chapter: [Caption styles](/prompting/captions-catalog).*
|
||
|
||
Describe the *energy* of your captions and the agent picks matching typography, size, and animation:
|
||
|
||
| Tone | Typography | Animation | Size range |
|
||
| ------------ | ---------------------- | ------------ | ---------- |
|
||
| Hype | Heavy weight fonts | Scale-pop | 72–96px |
|
||
| Corporate | Clean sans-serif | Fade + slide | 56–72px |
|
||
| Tutorial | Monospace | Typewriter | 48–64px |
|
||
| Storytelling | Serif | Slow fade | 44–56px |
|
||
| Social | Rounded, playful | Bounce | 56–80px |
|
||
|
||
```
|
||
"Hype-style captions with scale-pop"
|
||
"Calm, elegant subtitles with slow fades"
|
||
"Karaoke-style word highlighting"
|
||
```
|
||
|
||
Per-word styling also works:
|
||
|
||
```
|
||
"Make brand names larger with accent color"
|
||
"Add bounce to emotional keywords"
|
||
"Highlight numbers differently"
|
||
```
|
||
|
||
## Transitions
|
||
|
||
*The full chapter: [Transitions](/prompting/transitions).*
|
||
|
||
Every multi-scene composition benefits from transitions. Describe the energy level:
|
||
|
||
| Energy | CSS option | Shader option |
|
||
| ------- | ---------------- | ------------------- |
|
||
| Calm | Blur crossfade | Cross-warp morph |
|
||
| Medium | Push slide | Whip pan |
|
||
| High | Zoom through | Glitch, ridged burn |
|
||
|
||
Or describe by mood:
|
||
|
||
```
|
||
"Warm transitions for this wellness brand"
|
||
"Cold, clinical transitions for tech"
|
||
"Playful bouncy transitions"
|
||
"Dramatic zoom for the reveal"
|
||
```
|
||
|
||
## Audio-reactive animation
|
||
|
||
*The full chapter: [Media and audio](/prompting/media-and-audio).*
|
||
|
||
Map audio frequency bands to visual properties. The agent uses these defaults:
|
||
|
||
| Audio band | Maps to | Visual effect |
|
||
| ---------- | --------- | ------------------- |
|
||
| Bass | `scale` | Pulse on the beat |
|
||
| Treble | `glow` | Shimmer intensity |
|
||
| Amplitude | `opacity` | Breathing |
|
||
| Mids | `shape` | Morphing |
|
||
|
||
```
|
||
"Make the text pulse with the beat"
|
||
"Add bass-driven scale to the logo"
|
||
"Create glow that responds to treble"
|
||
```
|
||
|
||
<Tip>
|
||
Keep audio-reactive effects subtle for text (3–6% intensity). Go bigger for backgrounds (10–30%).
|
||
</Tip>
|
||
|
||
## Marker highlights
|
||
|
||
Hand-drawn emphasis effects for text:
|
||
|
||
| Mode | Effect | Best for |
|
||
| ----------- | ------------------ | ------------- |
|
||
| `highlight` | Marker sweep | Key phrases |
|
||
| `circle` | Hand-drawn ellipse | Single words |
|
||
| `burst` | Radiating lines | Hype moments |
|
||
| `scribble` | Chaotic scratch | Crossing out |
|
||
| `sketchout` | Rectangle outline | Callouts |
|
||
|
||
```
|
||
"Add a marker highlight sweep on 'revolutionary'"
|
||
"Circle this keyword with hand-drawn effect"
|
||
"Add burst lines around 'AMAZING'"
|
||
```
|
||
|
||
The five modes on the same sentence:
|
||
|
||
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))", gap: "1rem", margin: "1.25rem 0" }}>
|
||
<figure style={{ margin: 0 }}>
|
||
<video
|
||
src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/marker-highlight.mp4#t=0.1"
|
||
autoPlay
|
||
muted
|
||
loop
|
||
playsInline
|
||
preload="metadata"
|
||
aria-label="highlight preview"
|
||
style={{ display: "block", width: "100%", borderRadius: "10px", background: "#000" }}
|
||
/>
|
||
<figcaption style={{ marginTop: "0.4rem", fontSize: "0.8125rem", opacity: 0.75 }}>
|
||
highlight
|
||
</figcaption>
|
||
</figure>
|
||
<figure style={{ margin: 0 }}>
|
||
<video
|
||
src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/marker-circle.mp4#t=0.1"
|
||
autoPlay
|
||
muted
|
||
loop
|
||
playsInline
|
||
preload="metadata"
|
||
aria-label="circle preview"
|
||
style={{ display: "block", width: "100%", borderRadius: "10px", background: "#000" }}
|
||
/>
|
||
<figcaption style={{ marginTop: "0.4rem", fontSize: "0.8125rem", opacity: 0.75 }}>
|
||
circle
|
||
</figcaption>
|
||
</figure>
|
||
<figure style={{ margin: 0 }}>
|
||
<video
|
||
src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/marker-burst.mp4#t=0.1"
|
||
autoPlay
|
||
muted
|
||
loop
|
||
playsInline
|
||
preload="metadata"
|
||
aria-label="burst preview"
|
||
style={{ display: "block", width: "100%", borderRadius: "10px", background: "#000" }}
|
||
/>
|
||
<figcaption style={{ marginTop: "0.4rem", fontSize: "0.8125rem", opacity: 0.75 }}>
|
||
burst
|
||
</figcaption>
|
||
</figure>
|
||
<figure style={{ margin: 0 }}>
|
||
<video
|
||
src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/marker-scribble.mp4#t=0.1"
|
||
autoPlay
|
||
muted
|
||
loop
|
||
playsInline
|
||
preload="metadata"
|
||
aria-label="scribble preview"
|
||
style={{ display: "block", width: "100%", borderRadius: "10px", background: "#000" }}
|
||
/>
|
||
<figcaption style={{ marginTop: "0.4rem", fontSize: "0.8125rem", opacity: 0.75 }}>
|
||
scribble
|
||
</figcaption>
|
||
</figure>
|
||
<figure style={{ margin: 0 }}>
|
||
<video
|
||
src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/marker-sketchout.mp4#t=0.1"
|
||
autoPlay
|
||
muted
|
||
loop
|
||
playsInline
|
||
preload="metadata"
|
||
aria-label="sketchout preview"
|
||
style={{ display: "block", width: "100%", borderRadius: "10px", background: "#000" }}
|
||
/>
|
||
<figcaption style={{ marginTop: "0.4rem", fontSize: "0.8125rem", opacity: 0.75 }}>
|
||
sketchout
|
||
</figcaption>
|
||
</figure>
|
||
</div>
|
||
|
||
## Text-to-speech voices
|
||
|
||
TTS runs locally via Kokoro (no API key needed). Describe the content and the agent picks a voice, or request one directly:
|
||
|
||
| Content type | Recommended voices |
|
||
| ------------- | -------------------------- |
|
||
| Product demo | `af_heart`, `af_nova` |
|
||
| Tutorial | `am_adam`, `bf_emma` |
|
||
| Marketing | `af_sky`, `am_michael` |
|
||
|
||
```
|
||
"Generate narration for this script"
|
||
"Create voiceover with a professional female voice"
|
||
"Add TTS with British male voice at 1.1x speed"
|
||
```
|
||
|
||
## Rendering quality
|
||
|
||
*The full chapter: [Rendering and output](/prompting/rendering-and-output).*
|
||
|
||
| Quality | Use for |
|
||
| ---------- | ------------------------ |
|
||
| `draft` | Fast iteration |
|
||
| `standard` | Review and feedback |
|
||
| `high` | Final delivery |
|
||
|
||
```
|
||
"Quick draft render"
|
||
"Render at high quality"
|
||
"Export as transparent WebM"
|
||
```
|
||
|
||
*Next: [High-fidelity looks](/prompting/visual-specs) — past single words, into full visual specs that carry an entire look.*
|