mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-11-15 13:58:20 +00:00
288 lines
10 KiB
Plaintext
288 lines
10 KiB
Plaintext
---
|
||
title: Vocabulary that changes output
|
||
description: "Natural-language adjectives the skills map to specific framework settings — easing, captions, transitions, audio, voices."
|
||
---
|
||
|
||
import { DocsVideo } from "/snippets/docs-video.jsx";
|
||
|
||
[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" }}>
|
||
<DocsVideo
|
||
title="HyperFrames video: Ease Power2 Out"
|
||
src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/ease-power2-out.mp4#t=0.1"
|
||
loop
|
||
/>
|
||
<DocsVideo
|
||
title="HyperFrames video: Ease Power4 Out"
|
||
src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/ease-power4-out.mp4#t=0.1"
|
||
loop
|
||
/>
|
||
<DocsVideo
|
||
title="HyperFrames video: Ease Back Out"
|
||
src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/ease-back-out.mp4#t=0.1"
|
||
loop
|
||
/>
|
||
<DocsVideo
|
||
title="HyperFrames video: Ease Elastic Out"
|
||
src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/ease-elastic-out.mp4#t=0.1"
|
||
loop
|
||
/>
|
||
<DocsVideo
|
||
title="HyperFrames video: Ease Expo Out"
|
||
src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/ease-expo-out.mp4#t=0.1"
|
||
loop
|
||
/>
|
||
<DocsVideo
|
||
title="HyperFrames video: Ease Sine Inout"
|
||
src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/ease-sine-inout.mp4#t=0.1"
|
||
loop
|
||
/>
|
||
</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" }}>
|
||
<DocsVideo
|
||
title="HyperFrames video: Camera Push In"
|
||
src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/camera-push-in.mp4#t=0.1"
|
||
loop
|
||
/>
|
||
<DocsVideo
|
||
title="HyperFrames video: Camera Pull Back"
|
||
src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/camera-pull-back.mp4#t=0.1"
|
||
loop
|
||
/>
|
||
<DocsVideo
|
||
title="HyperFrames video: Camera Pan"
|
||
src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/camera-pan.mp4#t=0.1"
|
||
loop
|
||
/>
|
||
<DocsVideo
|
||
title="HyperFrames video: Camera Crane"
|
||
src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/camera-crane.mp4#t=0.1"
|
||
loop
|
||
/>
|
||
<DocsVideo
|
||
title="HyperFrames video: Camera Whip"
|
||
src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/camera-whip.mp4#t=0.1"
|
||
loop
|
||
/>
|
||
<DocsVideo
|
||
title="HyperFrames video: Camera Parallax"
|
||
src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/camera-parallax.mp4#t=0.1"
|
||
loop
|
||
/>
|
||
<DocsVideo
|
||
title="HyperFrames video: Camera Orbit"
|
||
src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/camera-orbit.mp4#t=0.1"
|
||
loop
|
||
/>
|
||
</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" }}>
|
||
<DocsVideo
|
||
title="HyperFrames video: Marker Highlight"
|
||
src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/marker-highlight.mp4#t=0.1"
|
||
loop
|
||
/>
|
||
<DocsVideo
|
||
title="HyperFrames video: Marker Circle"
|
||
src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/marker-circle.mp4#t=0.1"
|
||
loop
|
||
/>
|
||
<DocsVideo
|
||
title="HyperFrames video: Marker Burst"
|
||
src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/marker-burst.mp4#t=0.1"
|
||
loop
|
||
/>
|
||
<DocsVideo
|
||
title="HyperFrames video: Marker Scribble"
|
||
src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/marker-scribble.mp4#t=0.1"
|
||
loop
|
||
/>
|
||
<DocsVideo
|
||
title="HyperFrames video: Marker Sketchout"
|
||
src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/marker-sketchout.mp4#t=0.1"
|
||
loop
|
||
/>
|
||
</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.*
|