01 / FROM IDEA TO OUTPUT
A workflow you can follow
Lock the brief before the component tree
Choose one action the viewer should remember. For a product launch, a practical 18-second structure is 0–4 seconds for the problem, 4–13 for a real product action and 13–18 for the outcome and next step. These are suggested timings, not a recipe attributed to the creator above.
Make the first scene measurable
Fix the composition dimensions, frame rate and total frames. Ask for three still frames before adding transitions. The product screenshot must remain legible at the intended output size; if it does not, crop the relevant region and simplify the surrounding copy.
Separate content from motion
Keep the logo, headline and screenshot paths as explicit inputs. Define reusable scene boundaries and motion values instead of repeating timings in several components. That makes a second language or a second product easier to revise without rebuilding the film.
Review the encoded file
Watch the export in a separate player. Check the very first frame, scene boundaries, font rendering and the last held frame. Then inspect it on a phone with sound off. A smooth preview does not establish that the delivered file has the right audio or typography.
02 / START HERE
Make the brief your own
This is an original Hermes example. Replace the inputs and delivery requirements before sending it to your agent. It is not the showcase creator’s original prompt or a promise of the same result.
Use the installed Remotion skills to build an 18-second product launch in my existing project. Inputs: logo.svg, before.png, after.png and one approved headline. 1920×1080, 30 fps. Story: problem (4s), product action (9s), outcome and CTA (5s). Keep copy and asset paths as props. Show three representative still frames, then render a 5-second test. Do not invent UI or product metrics. Deliver source, final video and an output checklist.Real assets, the mechanism to explain and verified numbers.
React compositions · Specify dimensions, duration and files.
Stills → short test → full output → independent playback or interaction.
03 / READ THE WORK
Scrub a frame. Understand the timeline.
LESS NOISE. MORE SIGNAL.
From a thought to a finished thing.
Seek to any frame, then return to it: the scene and readout match. Change the curve to compare the pacing. This Hermes teaching study explains a timeline; it is not a tool-generated result or performance benchmark.
04 / REVIEW & REVISE
When the result feels wrong
The film breaks when the copy changes
Test the longest headline early. Give text a measured safe area and allow the layout to adapt instead of shrinking every title to fit.
A frame changes between renders
Check wall-clock timers, unseeded randomness and assets loaded during capture. Motion should be derived from the requested frame.
The portrait version feels cramped
Treat it as another composition: rearrange the screenshot and headline, then review every scene at its own dimensions.
Questions before you begin
Does installing the skill install a renderer?
No. The skill guides the coding agent. The project and renderer still need to be configured and checked. Start with the official setup documentation.
Was the showcase made with Remotion?
BridgeMind explicitly names Remotion in the source post. Model and workflow attribution follow that creator statement; we did not reproduce the original production.
Sources & display notes
The original projects are authoritative for capabilities and setup. The production recipes, sample briefs and review advice here are Hermes editorial work. A recommendation is not a claim of exhaustive tool testing.
Official Remotion Skills ↗Remotion fundamentals ↗Rendering ↗
