diff --git a/docs/prompting/anatomy.mdx b/docs/prompting/anatomy.mdx index 52f3fe081..bcc64040e 100644 --- a/docs/prompting/anatomy.mdx +++ b/docs/prompting/anatomy.mdx @@ -3,8 +3,6 @@ title: Anatomy of a one-shot prompt description: "The six-part skeleton - route, spec, beats, copy, technique, negatives - that removes the decisions agents most often get wrong." --- -## Anatomy of a one-shot prompt - The [copy-paste examples](/prompting/examples) share one skeleton. Each part removes a decision agents most often get wrong on a first try: ```text diff --git a/docs/prompting/code-blocks.mdx b/docs/prompting/code-blocks.mdx index 2022ab086..6b5f6d221 100644 --- a/docs/prompting/code-blocks.mdx +++ b/docs/prompting/code-blocks.mdx @@ -3,8 +3,6 @@ title: Code animations description: "Prompt code walkthroughs — typing, diffing, highlighting, scrolling — and pick a terminal or editor theme by name." --- -## Code animations - Code is the one subject where the framework does the hard part for you. The [Code Animations](/catalog/blocks/code-typing) blocks handle syntax highlighting, caret tracking, diff coloring, and camera moves deterministically — you describe the *walkthrough*, name the block, and paste your snippet. This page is the vocabulary for doing that well; for turning a real pull request into a code-change video, see [Code and PRs](/prompting/code-and-prs). Everything here follows the [one-shot skeleton](/prompting/anatomy): route, spec, beats, copy, technique, negatives. The "technique" slot is where you name the block, and the "copy" slot is where your code goes — quoted exactly, because unquoted code gets paraphrased into something that won't compile. diff --git a/docs/prompting/data-and-maps.mdx b/docs/prompting/data-and-maps.mdx index 1a4f2a476..84d49b583 100644 --- a/docs/prompting/data-and-maps.mdx +++ b/docs/prompting/data-and-maps.mdx @@ -3,8 +3,6 @@ title: Data and maps description: "Prompt animated charts, count-up stats, and maps — highlight regions, draw flows, size bubbles — or hand-draw a chart for full control." --- -## Data and maps - Numbers and geography are the two subjects where "what data" and "how it moves" are separate decisions. The [Data](/catalog/blocks/data-chart) blocks give you a polished chart or map you feed values into; the count-up [showcase](/catalog/blocks/apple-money-count) blocks handle the odometer-and-flourish moment. Everything here plugs into the [one-shot skeleton](/prompting/anatomy) — the data goes in the "copy" slot, the block name in "technique." ### Charts: name the block, or hand-draw diff --git a/docs/prompting/design-systems.mdx b/docs/prompting/design-systems.mdx index 5778e0e6d..b94605cb7 100644 --- a/docs/prompting/design-systems.mdx +++ b/docs/prompting/design-systems.mdx @@ -3,8 +3,6 @@ title: Design systems and brand description: "Point the agent at a source of brand truth - a design spec, a site, or a Figma file - instead of asking for 'on-brand', and let it compose the frame." --- -## Design systems and brand - "Make it on-brand" is the single vaguest thing you can ask. The agent has no way to know what your brand *is*, so it invents one. The fix is always the same: give it a **source of brand truth** — a design spec, a live site, or a Figma file — and name it in the prompt. Everything on this page is a way to do that. ## Point at a spec, don't describe a vibe diff --git a/docs/prompting/editing-existing-videos.mdx b/docs/prompting/editing-existing-videos.mdx index fe9685b23..ea5f1b57f 100644 --- a/docs/prompting/editing-existing-videos.mdx +++ b/docs/prompting/editing-existing-videos.mdx @@ -3,8 +3,6 @@ title: Editing existing videos description: "Direct the agent like an editor — trim, move, retime, swap, restyle — with the NLE verb you already know mapped to the prompt that lands it in one pass." --- -## Editing existing videos - Most HyperFrames time isn't the first render — it's the twenty edits after it. A composition is plain HTML with `data-*` timing attributes and a GSAP timeline, so every edit you'd make in a non-linear editor maps to a specific, inspectable change in the source. You don't re-specify the video; you name the edit the way you'd say it to a human editor, and the agent makes the smallest change that does it. This page maps the editor verbs to the prompts that land them. Two habits from [Iterating](/prompting/iterating) apply to every one of them, so keep them in mind: **change one thing per render**, and **state targets as absolute values** ("scene 2 = 2 seconds", not "a bit shorter") so the agent lands it in a single pass instead of oscillating. diff --git a/docs/prompting/examples.mdx b/docs/prompting/examples.mdx index 3494f6a89..b97bfbec5 100644 --- a/docs/prompting/examples.mdx +++ b/docs/prompting/examples.mdx @@ -3,8 +3,6 @@ title: Verified example prompts description: "18 copy-paste prompts, every one run end-to-end to a finished video that passes lint and validate." --- -## Copy-paste examples - Every prompt below has been run end-to-end and one-shots a finished video that passes `lint` and `validate`. Swap the copy, colors, and inputs for your own. ### With registry blocks and workflows diff --git a/docs/prompting/generated-artwork.mdx b/docs/prompting/generated-artwork.mdx index eb7ef9539..0c4f82452 100644 --- a/docs/prompting/generated-artwork.mdx +++ b/docs/prompting/generated-artwork.mdx @@ -3,8 +3,6 @@ title: When to generate artwork description: "Code-drawn wins for UI, type, geometry, and 3D; illustration-led hero art comes from an image model, animated as layers." --- -## When to generate artwork instead of drawing it - Code-drawn HTML/CSS/SVG excels where the medium is native: UI mockups, typography, geometric shapes, charts, pixel art, and 3D via Three.js. For **illustration-led** hero art — characters, painterly scenes, sculptural objects — hand-drawn SVG tops out at clipart quality no matter how well you prompt. The fix is a hybrid: > Generate the hero artwork as an image (via the media skill's image generation), then animate it with code. Anything that must move independently — eyelids, light beams, drawing lines — stays a code layer on top of the static art. diff --git a/docs/prompting/iterating.mdx b/docs/prompting/iterating.mdx index cd06c26a3..fac8327d5 100644 --- a/docs/prompting/iterating.mdx +++ b/docs/prompting/iterating.mdx @@ -3,8 +3,6 @@ title: Iterating description: "Talk to the agent like a video editor - small targeted edits beat re-specification." --- -## Iterating - Hyperframes is a conversation. After the first render, talk to the agent the way you'd talk to a video editor — don't re-prompt from scratch: > Make the title 2x bigger. diff --git a/docs/prompting/media-and-audio.mdx b/docs/prompting/media-and-audio.mdx index c50a22eb5..ebdf57a1e 100644 --- a/docs/prompting/media-and-audio.mdx +++ b/docs/prompting/media-and-audio.mdx @@ -3,8 +3,6 @@ title: Media and audio description: "Ask for the voiceover, music, sound, captions, cutouts, and assets a composition needs — with the precise, unambiguous phrasing the media pipeline acts on." --- -## Media and audio - HyperFrames owns media *playback*; a companion media pipeline resolves everything else — voice, music, sound effects, images, icons, logos, captions, and background removal. You reach all of it by describing what the composition needs, and the agent resolves each need to a frozen local file. The craft here is precision: vague media asks ("add some music," "no sound") are the ones that come back wrong, because the pipeline does exactly what the words say. ## Voiceover (TTS) diff --git a/docs/prompting/motion.mdx b/docs/prompting/motion.mdx index 9db89ae67..6038b0e98 100644 --- a/docs/prompting/motion.mdx +++ b/docs/prompting/motion.mdx @@ -3,8 +3,6 @@ title: Motion that reads premium description: "Six motion-grammar rules from frame-by-frame study of professional work - nothing stops, the camera acts, action overlaps." --- -## Motion that reads premium - Static frames can be perfect and the video still feels cheap if the motion is dead. Professional motion design follows a grammar you can put directly in prompts: 1. **Nothing ever fully stops.** Every "hold" carries ambient idle motion — a 1-2% breathing scale, slow drift, a shimmer. Never write "holds motionless"; write "settles into a gentle ambient idle." A frozen final second is the single biggest cheap-motion tell. diff --git a/docs/prompting/recreating-references.mdx b/docs/prompting/recreating-references.mdx index 953f0e4d1..d6443cc3a 100644 --- a/docs/prompting/recreating-references.mdx +++ b/docs/prompting/recreating-references.mdx @@ -3,8 +3,6 @@ title: Recreating something you saw description: "Transcribe motion, iterate with absolute targets, distill the constants - and know where the text-only ceiling is." --- -## Recreating something you saw - Matching a specific reference from text alone is possible to roughly 90% — but only with a specific workflow, and knowing where the ceiling is. **Transcribe motion, not just composition.** Watch the reference frame by frame and write down: the exact duration, the camera's path, what each element does with timestamps, how entrances overlap, which layers are blurred, sampled colors. A prompt built this way one-shots ~75% of the target — structure and motion arc land, rendering calibration doesn't. diff --git a/docs/prompting/rendering-and-output.mdx b/docs/prompting/rendering-and-output.mdx index c21aaf7a4..a9528521d 100644 --- a/docs/prompting/rendering-and-output.mdx +++ b/docs/prompting/rendering-and-output.mdx @@ -3,8 +3,6 @@ title: Rendering and output description: "What to say to get the right file out — quality tier, format, resolution, framerate, and cloud rendering — without over-speccing a render that slows to no benefit." --- -## Rendering and output - Everything before this point shapes the composition. This page is about the *export*: the words that pick a quality tier, a container format, a resolution, and where the render runs. The defaults — MP4, 1920×1080, 30fps, `standard` quality — are deliberately good, so most of the skill here is knowing when *not* to ask for more. The mechanics live in the [Rendering guide](/guides/rendering); this page owns what to say. ## Quality tier diff --git a/docs/prompting/runtimes-and-3d.mdx b/docs/prompting/runtimes-and-3d.mdx index 77659a35f..90dd971d9 100644 --- a/docs/prompting/runtimes-and-3d.mdx +++ b/docs/prompting/runtimes-and-3d.mdx @@ -3,8 +3,6 @@ title: Runtimes and 3D description: "GSAP is the default and you rarely name it - but real 3D, existing animation files, and scene transitions each have a runtime worth pinning in the prompt." --- -## Runtimes and 3D - HyperFrames animates through the [frame-adapter](/concepts/frame-adapters) pattern: any runtime that can answer "what should the screen look like at frame N?" plugs in and renders deterministically. [GSAP](/guides/gsap-animation) is the default adapter and covers most motion — you rarely need to name it. The cases below are the ones where the default choice can go wrong, so the prompt should pick the runtime for you. ## Real 3D → Three.js via the adapter diff --git a/docs/prompting/specification-dial.mdx b/docs/prompting/specification-dial.mdx index 1dd2e7ec7..6a677cbf1 100644 --- a/docs/prompting/specification-dial.mdx +++ b/docs/prompting/specification-dial.mdx @@ -3,8 +3,6 @@ title: The specification dial description: "Spec density controls how far the result drifts from what you imagined - not whether it works." --- -## The specification dial - How much you specify sets how much you delegate — it controls how far the result can drift from what you imagined, not whether it works. Mood-level prompts ("snappy", "cinematic") get a designer's interpretation: coherent, but the agent picks the colors, staging, and details. Dense specs — hexes, timestamps, easings, pinned techniques — get *your* frame. Three settings: diff --git a/docs/prompting/variables-and-templating.mdx b/docs/prompting/variables-and-templating.mdx index efad3dd89..7d09098b1 100644 --- a/docs/prompting/variables-and-templating.mdx +++ b/docs/prompting/variables-and-templating.mdx @@ -3,8 +3,6 @@ title: Variables and templating description: "Ask for the parts that should change to become named slots, then re-render the same composition with different values - one output per record." --- -## Variables and templating - Most videos have a few things that vary and a lot that doesn't. When you know a composition will be reused — a card per customer, a stat per quarter, a name per recipient — say so in the prompt, and name the parts that change. The agent turns them into declared [variables](/concepts/variables): typed, labeled slots filled at render time instead of hardcoded into the HTML. The trigger phrase is simple — call out the slots: diff --git a/docs/prompting/vfx-and-liquid-glass.mdx b/docs/prompting/vfx-and-liquid-glass.mdx index b95a8b9a9..e04a14049 100644 --- a/docs/prompting/vfx-and-liquid-glass.mdx +++ b/docs/prompting/vfx-and-liquid-glass.mdx @@ -3,8 +3,6 @@ title: VFX and liquid glass description: "Prompt device mockups, liquid-glass UI, shatter/portal/magnetic moments, and ambient polish — and know which effects need the canvas pipeline." --- -## VFX and liquid glass - This is the showy end of the catalog: 3D device mockups, frosted-glass Apple UI, and cinematic moments where HTML shatters or gets sucked through a portal. Two groups do the work — the [HTML-in-Canvas](/catalog/blocks/vfx-iphone-device) blocks (real WebGL, live HTML rendered as GPU textures) and the [Effects](/catalog/components/vignette) components (lightweight CSS polish). Knowing which is which is the difference between an effect that renders and one that surprises you. All of it slots into the [one-shot skeleton](/prompting/anatomy) at the "technique" step. ### Device mockups diff --git a/docs/prompting/visual-specs.mdx b/docs/prompting/visual-specs.mdx index 772e47481..642a87eaa 100644 --- a/docs/prompting/visual-specs.mdx +++ b/docs/prompting/visual-specs.mdx @@ -3,8 +3,6 @@ title: High-fidelity looks description: "Write a visual spec - every element named, positioned, colored, and timed - to carry a specific look in words." --- -## High-fidelity looks: write a visual spec - Recreating a specific look from words alone works when the prompt reads like a designer's spec — every element named, positioned, colored, and timed. Compare a description ("dark night scene, mountain, glowing ring, title fades in") with a spec: > 8-second 1920x1080 title card. Scene, back to front: #0a0e2a night sky with faint grain; a huge concentric ring system (5 rings, 1px strokes at 8% white opacity, innermost ring glowing #4a5fd9) centered 40% from the top; behind the rings an orange radial glow (#ff6a2b core → transparent, ~300px) igniting at the peak's right shoulder from 2s; a low-poly mountain (6-8 dark navy facets, #141a3d–#1e2650) filling the lower third, a white road S-curving up its face with a soft glow; thin horizontal cloud streaks (white, 6% opacity) drifting right at two heights; a man's silhouette, pure black, ~90px tall, bottom-right, fading in at 2.5s. At 3.5s "SHOWREEL" — thin geometric sans, ~140px, 0.35em tracking, white at 90% — fades in per letter across the ring center, the orange glow bleeding through the O. Slow 4% push-in across the full 8s. No audio. diff --git a/docs/prompting/vocabulary.mdx b/docs/prompting/vocabulary.mdx index 5d12eddd7..25a34bafd 100644 --- a/docs/prompting/vocabulary.mdx +++ b/docs/prompting/vocabulary.mdx @@ -3,8 +3,6 @@ title: Vocabulary that changes output description: "Natural-language adjectives the skills map to specific framework settings - easing, captions, transitions, audio, voices." --- -## Vocabulary that changes output - 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