We needed a video showing how the ceiling baffle configurator in AxisMod works. The classic route is a screen recording, editing, captions, and starting over after every interface change. Instead we did what we do with every repetitive job: we wrote a script.
Requirements
- Short (under a minute), with callouts explaining what is happening and a visible cursor.
- Two language versions, PL and EN, from the same script.
- A file small enough to sit on the site without a video CDN: under 3 MB.
- Repeatable after every UI change with a single command.
Playwright as the camera
Playwright has built-in video recording for a browser context. Set the viewport to 1600×900, enable recordVideo, and from then on everything that happens on the page lands in a WebM file.
The script itself is eight steps: open the configurator, enter the room dimensions, pick a baffle profile, change the spacing, 3D preview, section view, summary with BOM and cut list, output file list. At the end, an end card with the logo.
Two things Playwright does not give you out of the box have to be injected manually:
- Callouts. Short labels in the corner of the modal, injected as a DOM element into
[role=dialog] > divwith a small delay so they appear before the action they describe. - A fake cursor. Headless mode does not draw a cursor, so we add our own: an absolutely positioned circle animated to the coordinates of the next click. Without it the viewer does not know where to look.
ffmpeg as the editor
The raw recording is about 86 seconds long because the script waits for the 3D loader and for animations. The ffmpeg pipeline:
- speed-up with
setpts=PTS/1.7, 86 s becomes about 51 s and the clicking looks natural rather than frantic, - libx264 encoding at
crf 25, roughly 2.6 MB at 1600×900, - a poster for the
<video>tag pulled from second 17, where the 3D scene is already visible.
Two languages means two runs of the same script with a different locale. No manual work in between.
The player on the page
The video only starts when at least 35% of the frame is in view (IntersectionObserver) and pauses when you scroll past. With prefers-reduced-motion enabled we show the poster with native controls instead of autoplay. The "Launch configurator" button ended up below the video frame because it got lost against bright scenes.
Gotcha
Do not edit page files or i18n dictionaries while recording. Hot reload resets the modal state halfway through the script and the recording falls apart at a random point. CSS changes are safe because they do not remount the component.
When this makes sense
This approach pays off when the interface changes more often than once a quarter or when you have to maintain several language versions. A one-off video for a presentation is faster to record by hand. But if the video has to be current the same day after every UI change, the script wins on its second run.
See the result on the AxisMod page.
