Mixing footage
Place Seedance, Kling or Veo shots inside a code composition, add three.js scenes and Blender renders, and make everything match in color and grain.
Keep all text, UI, logos and numbers in code, and use a video model only for what code cannot draw: people, places, physical products and photoreal light. Plan each generated shot in the beat map first, generate it at the exact length you need with no text in it, strip its audio, place it as a timed clip, and grade it to match the code layers.
What goes where
| Make it in code | Make it with a video model or a 3D render |
|---|---|
| UI, screenshots, cursor moves | People, faces, animals |
| Titles, captions, kinetic type | Filmed looking places, weather, crowds |
| Logos and brand marks | Physical products in real light |
| Charts and numbers | Metaphor shots and atmosphere |
| Diagrams, icons, flat illustration | Painterly scenes and sculptural objects |
The flow-studio skill puts it simply: keep UI, copy and logos out of AI shots, so they stay sharp and on brand. HyperFrames' docs draw the same line for stills: code for UI mockups, type, shapes and charts, generated art for characters and painterly scenes, because hand drawn SVG "tops out at clipart quality". And as one creator noted, "Seedance 2.5 still has stunning moments you cannot get with code to video" (zhu185178).
Bring a generated shot into a composition
Plan the shot in the beat map
Decide the shot's start, length and job in the approved beat map. Generate it only after the beat map is approved, at the exact duration you need.
Write the shot prompt for the edit
Name the model, aspect ratio and duration, then timed beats, camera, light and mood. End with lines that keep the clip clean for the edit.
9:16, 6 seconds. [0-2s] A hand sets a ceramic cup on a wooden counter.
[2-6s] Steam rises, slow push in. Soft morning window light from the left,
warm and quiet. Audio: none (music is added in the edit).
Single continuous shot. No text, no logos, no UI.Model specific prompt rules are on the model guides.
Chain shots that must connect
Use the last frame of one shot as the first frame of the next. A Flow "first frame = last frame" loop lands close but not exact, so check the seam and fall back to playing the clip forward then backward.
Strip audio and check for marks
Flow clips carry an audio track even when you asked for no music, and a small watermark. Remove the track or keep it on purpose, and check the corners.
Place it as a timed clip
Ask the agent to add the clip as a timed video in the scene, then snapshot every scene that has video in it. A black panel in the render is a real bug, not a preview glitch.
Disclose it
A realistic generated shot inside a code film needs the platform's AI label, even though the motion graphics around it do not.
HyperFrames clip rules
You do not need to write this yourself, but these are the rules to check when a clip misbehaves:
| Rule | Why |
|---|---|
The video has class="clip" with data-start, data-duration and data-track-index | Places it on the timeline |
data-media-start trims the start of the source | Starts the clip on motion, not on a still first frame |
Never put data-start on both the video and a wrapper | The timing would apply twice |
Never add crossorigin to media | Listed as a lint error |
data-has-audio="true" to keep the clip's sound, otherwise mute it | Decides whether the clip's own sound plays |
Animate a wrapper div, not the video element | Keeps playback and motion separate |
HEVC sources get an automatic H.264 proxy for preview; the render decodes the original. In Remotion, ask the skills to place the clip; this guide's research covers the HyperFrames rules only.
Animate generated stills instead
A generated still animated in code is cheaper than a video generation and easier to control. Generate the image on a solid contrasting background, key it out, and treat it as one flat layer; anything that should move on its own becomes a code layer above it. Add "minimal, lots of negative space" to the image prompt, because image models fill the frame. HyperFrames' background removal works on people only; for flat generated art, use FFmpeg's colorkey on a magenta or green background.
The most elaborate example we found: GPT Image stills on pure green, a 4x upscale, a depth map for per pixel parallax, and a Python 2.5D compositor written by Opus with a virtual camera, bokeh, rain, volumetric light and grain, rendered at 4K on a 16 GB machine (zhu185178).
three.js scenes
For real 3D inside a composition, name the runtime in the brief: "Build the scene in Three.js via the adapter, with a product on a slow turntable and one key light plus fill." CSS perspective only moves flat planes, and a camera orbit requested without a runtime "won't exist".
- The three.js adapter publishes the composition time and fires a seek event; the scene must draw the exact frame for that time. Do not drive motion with
requestAnimationFrame,setAnimationLoop,Date.now()or clock deltas. - Set
data-durationon the root composition. The adapter cannot infer the length, and lint fails withroot_composition_missing_duration_source. - Pin the renderer size (for example 1920x1080) and a pixel ratio of 1. Load models, textures and HDRIs before the first seek.
- One key light with no fill renders the far side as a flat black cutout. Add a
HemisphereLightfill. - For camera cuts inside one canvas, declare each cut time once as a constant and check the last frame before and the first frame after it.
- Pin one three.js version, or better, bundle it locally so the render never hits the network.
Opus 5.5 ranks 1 to 3 on AA-3D, a blind voted benchmark where models build three.js scenes from a brief (score 1190 on 15 Oct 2026). Limits remain: "bloom falloff, material feel, and optical color mixing don't fully transfer through text", and Claude Motion's 3D is "not that advanced yet". For a photoreal product, render or generate the hero shot and composite it.
Blender renders
Render in Blender when you need exact geometry, a product from every angle or a repeatable camera, such as a product turntable or an exploded view. Opus 5.5 can drive Blender through the Blender MCP connector; the Blender section covers setup and the full 3D workflow.
To bring a Blender render into a composition:
- Set Blender's resolution to match your composition and its frame rate to match too (HyperFrames defaults to 30 fps).
- Preview in EEVEE at 480p or every 4th frame first; 1080p finals can take 1 to 2 hours.
- Render the final as a PNG sequence with Overwrite off, so a crash can resume, then encode it:
ffmpeg -framerate 30 -i renders/hero/%04d.png -c:v libx264 -pix_fmt yuv420p -crf 16 assets/clips/hero.mp4- Place the MP4 like any generated clip, with all text and labels added in code on top.
Blender renders can also become references for a video model (clay renders for camera, first and last frames). That route is in the Blender section.
Match color and grain
Clips from different models, a Blender render and flat code layers will not match on their own.
- Grade in the composition. HyperFrames ships fixed treatments and grades for footage:
npx hyperframes media-treatment --capabilitieslists them, andgrade-comparelets you pick a grade from candidates side by side. - Match to one hero clip. The standard colorist order: balance each clip, pick one hero clip, match the others' neutrals and skin tones to it, and only then add a look or LUT. A LUT on unmatched clips just makes the mismatch uniform.
- Unify texture. AI footage is often over sharp, so post production guides add a light blur plus film grain. Putting the same grain over the code layers too is our suggestion, so both sit in one image.
- Keep the palette. Use the brief's 2 or 3 colors plus one accent in the shot prompt's light and mood words, so the footage does not fight the code layers.
Real hybrid examples
- A Seedance 2.5 clip handed to Opus 5.5: it re cut every shot to the beat, added impact frames, motion graphics, a title logo and a grade, and wrote the music in code (aimikoda).
- Midjourney stills, Kling motion, pose tracking driving a HUD, rendered in HyperFrames with three.js: "No camera, the cut is code" (OPPATRIA2).
- A launch film as a Remotion project on a 124 BPM grid, with public domain archive photos brought to life by Seedance and Gemini Omni (gthartley).
- Opus 5.5 as director: Seedance 2.5 for picture and voice, Nano Banana Pro for people and sets, Lyria for music, Remotion for UI motion (showheyohtaki).
- A 27 minute AI documentary made in four days with generated footage, a Lyria score and HyperFrames graphics, presented by a host who "does not exist" (DavidBarbelo, disclosed in the post).
Synthetic people need a label
Threads that pitch synthetic influencers or avatar ads built with Seedance, Kling and HyperFrames ("This fitness coach doesn't exist") are mostly engagement bait. If a generated person appears in your film, use each platform's AI label.
Sources
- HyperFrames: Generated artwork, Media and audio, Rules and anti patterns, Runtimes and 3D, Recreating references, and the core, CLI and three.js adapter skills
- Remotion and three.js, Remotion performance
- AA-3D leaderboard and methodology
- Color matching: HackerNoon
- The flow-studio skill (cinematic-studio plugin) for shot prompts, chaining and Flow clip audio
- Posts on X linked inline; synthetic influencer example: ArchiveExplorer (likely promo)