ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-04 16:42:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs(prompting): complete plan — variant validation, vocab clips, worked specs, measured motion

Browse Source 
Validates 16 more published prompts end-to-end (variants across every
video type, caption styles, overlays with proven alpha, code diff and
highlight, edit verbs against the real attribute map, a generated-avatar
talking-head through embedded-captions, a presented slideshow deck) and
fixes every prompt flaw the builds surfaced. Adds keyword-to-render
grids for the easing, camera, and marker vocabulary; two more worked
visual specs with renders; a measured before/after pair proving the
motion grammar (frozen frames vs all-alive, 211KB vs 2.5MB); before/
after render pairs on editing and generated-artwork pages; and proof
renders on the overview.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Vance Ingalls
2026-07-09 22:21:12 -07:00
co-authored by Claude Fable 5
parent 99ff79bc60
commit 2f958d1197
16 changed files with 149 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/prompting/runtimes-and-3d.mdx
+8
View File
@@ -14,10 +14,18 @@ This is the one pin to state every time. For anything with genuine **depth, ligh
- ❌ `isometric cards floating in CSS 3D with perspective`
- ✅ `build the isometric scene in Three.js via the adapter, with real depth and lighting`
<video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/example-3d-cards.mp4" style={{ borderRadius: "0.5rem", marginTop: "0.75rem" }}></video>
*The Three.js version of the isometric-cards prompt — real shadows and lighting, one-shot.*
The engine rationale: CSS `perspective` transforms skew flat planes — they read flat the moment lighting or parallax matters, because there is no light source and no camera, only projected rectangles. Three.js is a first-party seek-safe runtime (`hf-seek` events plus `window.__hfThreeTime`), so a real 3D scene renders frame-accurately like everything else. This is a validated default, not a preference — treat "real 3D" as "Three.js" unless you specifically want a flat, stylized fake-3D look.
Camera moves are part of the same rule. A "drone orbit", dolly, or push-in only exists where there's an actual camera:
<video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/camera-orbit.mp4" style={{ borderRadius: "0.5rem", marginTop: "0.75rem" }}></video>
*A seek-driven Three.js drone orbit — the camera sweeps a continuous arc; impossible with CSS transforms.*
- ❌ `a drone-orbit camera move around the logo` (with no runtime named — CSS has no camera to orbit)
- ✅ `orbit the camera around the logo — Three.js via the adapter`