mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-11-14 13:27:13 +00:00
Vance IngallsandClaude Fable 5
2f958d1197
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>
25 lines
2.4 KiB
Plaintext
25 lines
2.4 KiB
Plaintext
---
|
|
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."
|
|
---
|
|
|
|
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-use 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.
|
|
|
|
Three rules that make this work:
|
|
|
|
1. **Generate on a solid contrasting background** (magenta works) so the subject keys out cleanly. A light subject on a light background gets silently eaten.
|
|
2. **Key flat vector-style art with a chroma key** (`ffmpeg colorkey`), not AI background removal — `remove-background`'s matting model is tuned for photographic and human subjects and reads flat art unreliably, sometimes keeping the background instead of the subject. Reserve `remove-background` for photographs.
|
|
3. **Put a restraint clause in the generation prompt** ("minimal, lots of negative space") — image models fill the frame by default, and a busy generated texture reads as cheap as bad vector art.
|
|
|
|
## The difference, side by side
|
|
|
|
The same brief — four people arm in arm, warm gradient sweaters, flat-illustration style — built both ways. Same animation beats, same craft layer (lighting, atmosphere, grade); the only variable is where the figures came from.
|
|
|
|
<video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/artwork-hand-drawn.mp4" style={{ borderRadius: "0.5rem", marginTop: "0.75rem" }}></video>
|
|
*Hand-drawn SVG figures — clean, but the proportions and gesture read as clipart.*
|
|
|
|
<video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/artwork-generated.mp4" style={{ borderRadius: "0.5rem", marginTop: "0.75rem" }}></video>
|
|
*Generated illustration animated as layers — real anatomy and editorial shading; the animated line still passes behind the figures because the artwork was keyed to transparency.*
|