mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-03 04:38:33 +00:00
WaterrrForever
2efbfd4758
* docs(prompting): correct workflow one-liners against skill contracts general-video leads with its positive identity and companion mode; faceless-explainer keys on invented visuals instead of TTS; talking-head-recut uses the 'graphic overlays' trigger term; motion-graphics gains its input side and overlay output; music-to-video stops implying images are required. * docs(prompting): make vocabulary video grids readable Replace the 4-5 column table hack with a 3-column CSS grid, switch demo clips to autoplay muted loops (no black poster frame, no player chrome over tiny videos), and align cells at 16:9. * docs(prompting): document the opening interview and run-shape questions The guide taught prompt shapes but never prepared readers for the conversation that follows: the intent interview, the two run-shape questions (storyboard, automation vs companion), the just-build-it skip, and BRIEF.md as the resumable artifact. Add that section to the overview, a disambiguation note on the storyboards page, and free up 'companion' as a reserved term in media-and-audio. * docs(guides): make BRIEF.md the pipeline's Step 3 artifact Step 3 (Strategy & Messaging) listed no output while describing exactly what BRIEF.md now captures. Name the artifact in the step table, project tree, step body, gate, and iterating list, and fix SCRIPT.md's step label in the tree (Step 4, not 3). * docs(quickstart): realign the setup surface with the skills catalog The quickstart drifted from docs/guides/skills.mdx, CLAUDE.md, and the prompting overview — it had never been updated when those surfaces were: - `--full-depth` on both install commands, with the reason inline. Without it `skills add` fetches the skills.sh registry blob, which lags `main` by hours, so a reader following the quickstart installs stale skills. - `check` in the `/hyperframes-cli` row, and a validate step in the manual dev loop, which went preview → render with no gate at all. The prompting overview calls `check` "the step people skip and regret" and states both `lint` and `check` must pass before rendering. - `/hyperframes-keyframes` in the core-skills table (8 rows → 9). - `/figma` in the optional-workflow list (10 → 11). * docs(skills): close the catalog drift class and complete the music-to-video input Follow-up on the two review nits from #2872. `/music-to-video`'s SKILL.md names three inputs — an audio file, a video to pull audio from, or a track generated from a mood brief. Every compressed copy of that description carried only the first two, and the third is the one that makes "a complete video needs zero assets" true. Fixed on all eight surfaces that state it, so no surface is now more correct than its siblings: the prompting overview and quickstart setup tables, docs/guides/skills.mdx, the README catalog, root CLAUDE.md + AGENTS.md, both CLI project templates, and the router's own routes/music-to-video.md Input line (whose Interview must-haves already listed all three). The drift was structural, not accidental: the sync set declared in docs/guides/skills.mdx and in CLAUDE.md's "Skill catalog maintenance" named four surfaces and never the two setup tables, so those two were free to rot while the declared four stayed correct. Both declarations now name them, and both say the set applies to a *changed contract* — a reworded description — not only to an added or renamed skill. skills-manifest.json regenerated for the touched route file. * docs(claude): point the routing-surface rule at routes/, not the moved stubs Item 3 of "Skill catalog maintenance" still sent readers to `references/workflow-catalog.md` for a workflow's input/output/trigger contract and `references/route-briefs.md` for its interview entry. Both are now "moved" stubs — the contract and the interview entry live together in `references/routes/<workflow>.md`, one read per candidate route. Same failure class the previous commit fixed at item 1: a maintenance rule outliving the layout it describes. Swept the tree for other pointers at the two stubs; there are none, so this closes it rather than fixing one instance.
214 lines
15 KiB
Plaintext
214 lines
15 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" }}>
|
||
<div><video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/ease-power2-out.mp4#t=0.1" style={{ width: "100%", aspectRatio: "16 / 9", objectFit: "cover", borderRadius: "0.4rem", display: "block" }}></video><div style={{ fontSize: "0.8em", textAlign: "center", opacity: 0.7, marginTop: "0.35rem" }}>smooth · power2.out</div></div>
|
||
<div><video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/ease-power4-out.mp4#t=0.1" style={{ width: "100%", aspectRatio: "16 / 9", objectFit: "cover", borderRadius: "0.4rem", display: "block" }}></video><div style={{ fontSize: "0.8em", textAlign: "center", opacity: 0.7, marginTop: "0.35rem" }}>snappy · power4.out</div></div>
|
||
<div><video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/ease-back-out.mp4#t=0.1" style={{ width: "100%", aspectRatio: "16 / 9", objectFit: "cover", borderRadius: "0.4rem", display: "block" }}></video><div style={{ fontSize: "0.8em", textAlign: "center", opacity: 0.7, marginTop: "0.35rem" }}>bouncy · back.out</div></div>
|
||
<div><video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/ease-elastic-out.mp4#t=0.1" style={{ width: "100%", aspectRatio: "16 / 9", objectFit: "cover", borderRadius: "0.4rem", display: "block" }}></video><div style={{ fontSize: "0.8em", textAlign: "center", opacity: 0.7, marginTop: "0.35rem" }}>springy · elastic.out</div></div>
|
||
<div><video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/ease-expo-out.mp4#t=0.1" style={{ width: "100%", aspectRatio: "16 / 9", objectFit: "cover", borderRadius: "0.4rem", display: "block" }}></video><div style={{ fontSize: "0.8em", textAlign: "center", opacity: 0.7, marginTop: "0.35rem" }}>dramatic · expo.out</div></div>
|
||
<div><video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/ease-sine-inout.mp4#t=0.1" style={{ width: "100%", aspectRatio: "16 / 9", objectFit: "cover", borderRadius: "0.4rem", display: "block" }}></video><div style={{ fontSize: "0.8em", textAlign: "center", opacity: 0.7, marginTop: "0.35rem" }}>dreamy · sine.inOut</div></div>
|
||
</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" }}>
|
||
<div><video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/camera-push-in.mp4#t=0.1" style={{ width: "100%", aspectRatio: "16 / 9", objectFit: "cover", borderRadius: "0.4rem", display: "block" }}></video><div style={{ fontSize: "0.8em", textAlign: "center", opacity: 0.7, marginTop: "0.35rem" }}>slow push-in</div></div>
|
||
<div><video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/camera-pull-back.mp4#t=0.1" style={{ width: "100%", aspectRatio: "16 / 9", objectFit: "cover", borderRadius: "0.4rem", display: "block" }}></video><div style={{ fontSize: "0.8em", textAlign: "center", opacity: 0.7, marginTop: "0.35rem" }}>pull back</div></div>
|
||
<div><video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/camera-pan.mp4#t=0.1" style={{ width: "100%", aspectRatio: "16 / 9", objectFit: "cover", borderRadius: "0.4rem", display: "block" }}></video><div style={{ fontSize: "0.8em", textAlign: "center", opacity: 0.7, marginTop: "0.35rem" }}>pan across</div></div>
|
||
<div><video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/camera-crane.mp4#t=0.1" style={{ width: "100%", aspectRatio: "16 / 9", objectFit: "cover", borderRadius: "0.4rem", display: "block" }}></video><div style={{ fontSize: "0.8em", textAlign: "center", opacity: 0.7, marginTop: "0.35rem" }}>crane down</div></div>
|
||
<div><video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/camera-whip.mp4#t=0.1" style={{ width: "100%", aspectRatio: "16 / 9", objectFit: "cover", borderRadius: "0.4rem", display: "block" }}></video><div style={{ fontSize: "0.8em", textAlign: "center", opacity: 0.7, marginTop: "0.35rem" }}>whip to</div></div>
|
||
<div><video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/camera-parallax.mp4#t=0.1" style={{ width: "100%", aspectRatio: "16 / 9", objectFit: "cover", borderRadius: "0.4rem", display: "block" }}></video><div style={{ fontSize: "0.8em", textAlign: "center", opacity: 0.7, marginTop: "0.35rem" }}>parallax</div></div>
|
||
<div><video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/camera-orbit.mp4#t=0.1" style={{ width: "100%", aspectRatio: "16 / 9", objectFit: "cover", borderRadius: "0.4rem", display: "block" }}></video><div style={{ fontSize: "0.8em", textAlign: "center", opacity: 0.7, marginTop: "0.35rem" }}>drone orbit (Three.js)</div></div>
|
||
</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" }}>
|
||
<div><video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/marker-highlight.mp4#t=0.1" style={{ width: "100%", aspectRatio: "16 / 9", objectFit: "cover", borderRadius: "0.4rem", display: "block" }}></video><div style={{ fontSize: "0.8em", textAlign: "center", opacity: 0.7, marginTop: "0.35rem" }}>highlight</div></div>
|
||
<div><video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/marker-circle.mp4#t=0.1" style={{ width: "100%", aspectRatio: "16 / 9", objectFit: "cover", borderRadius: "0.4rem", display: "block" }}></video><div style={{ fontSize: "0.8em", textAlign: "center", opacity: 0.7, marginTop: "0.35rem" }}>circle</div></div>
|
||
<div><video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/marker-burst.mp4#t=0.1" style={{ width: "100%", aspectRatio: "16 / 9", objectFit: "cover", borderRadius: "0.4rem", display: "block" }}></video><div style={{ fontSize: "0.8em", textAlign: "center", opacity: 0.7, marginTop: "0.35rem" }}>burst</div></div>
|
||
<div><video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/marker-scribble.mp4#t=0.1" style={{ width: "100%", aspectRatio: "16 / 9", objectFit: "cover", borderRadius: "0.4rem", display: "block" }}></video><div style={{ fontSize: "0.8em", textAlign: "center", opacity: 0.7, marginTop: "0.35rem" }}>scribble</div></div>
|
||
<div><video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/marker-sketchout.mp4#t=0.1" style={{ width: "100%", aspectRatio: "16 / 9", objectFit: "cover", borderRadius: "0.4rem", display: "block" }}></video><div style={{ fontSize: "0.8em", textAlign: "center", opacity: 0.7, marginTop: "0.35rem" }}>sketchout</div></div>
|
||
</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.*
|