Choose a core route2
Remotion
Choose this route when React, compositions, data-driven scenes and a precise timeline fit the project.
HyperFrames
Choose this route when HTML, CSS, JavaScript, UI or GSAP-style animation fits the project.
Assets and finishing2
ImageGen
Add it when you need illustrations, backgrounds or scene assets; it is not a complete video-editing framework.
Generative Polish
Add it after the timeline and main visuals are complete when lighting, atmosphere or texture needs improvement.
Optional for a specific format1
HeyGen
Consider it only when the explainer explicitly needs an avatar presenter or spoken-avatar format.
Usually skip1
Two complete code-video routes at once
Without a clear hybrid-workflow requirement, choose either Remotion or HyperFrames rather than maintaining both.
Where do the tools overlap?
Identify overlapping routes before deciding whether both tools need to stay.
FUNCTION OVERLAP
Remotion vs HyperFrames
SharedCode-driven video · Motion graphics · Explainer and data-animation workflows
DifferenceRemotion leans toward React, compositions and timelines; HyperFrames leans toward HTML, CSS, JavaScript, GSAP and browser rendering.
Choose one route based on the team's technical stack and target visual style instead of installing both by default.FUNCTION OVERLAP
ImageGen vs Generative Polish
SharedBoth can improve the visual assets used in a video
DifferenceImageGen creates missing image assets; Generative Polish refines visuals that already exist.
Missing assets and insufficient polish are different problems. Add only the capability that solves the current one.What are you trying to make?
This setup is for educational, data-led or explanatory animation. Before choosing tools, decide whether the visual system is mainly based on React and precise timeline control or on HTML, UI and GSAP-style browser animation. That decision matters more than the number of tools in the setup.
Pick one main animation route first
Remotion and HyperFrames can both support code-driven video work, but they begin from different development models. Remotion leans toward React, compositions, data-driven scenes and timelines. HyperFrames leans toward HTML, CSS, JavaScript, GSAP and browser-rendered motion.
For many projects, one route is enough. Maintaining both is not the default recommendation; use both only when the production has a clear hybrid requirement.
Add assets and finishing only when needed
Consider ImageGen when the project lacks an illustration, background or scene image. Consider Generative Polish after the main composition is complete and a specific need remains around lighting, atmosphere or texture. Add HeyGen only when the explainer format actually calls for an avatar presenter.
These are separate production gaps. “We need an image” and “the existing image needs a final polish pass” do not automatically call for the same capability.
What should you usually skip?
Do not install two complete code-video routes simply because both are capable. Do not add an avatar tool to a purely animated explainer, and do not add image or finishing tools before the core route reveals a real need for them.
Installation order and cleanup
Use the chosen core route to produce one short segment first. Next, identify any missing visual assets. Only after the main sequence works should you decide whether a finishing pass is worthwhile. ImageGen and Generative Polish now have reviewed detail pages, but optional capabilities should still be removed when the project no longer has the problem they were added to solve.
The individual tool pages are still editorial drafts, so this setup does not publish unreviewed commands, pricing, compatibility or performance claims.
Related terms
Continue with these published explanations.
Sources & last checked
Sources supplied by the reviewed editorial pack. The check date records our pack cross-check, not a new live verification of these websites. Examples illustrate the concepts.
Official documentation
01Last checked: September 4, 2026