Susan Acharya 用網頁而非影片編輯器製作發布影片

I don't know Premiere. I didn't want to learn it just to make a 30-second trailer for a side project. So I made the video a web page instead.

The idea

The whole trailer is one 1920x1080 page where everything on screen is a pure function of time. No timers, no animation libraries, no Math.random() while rendering. You give the page a time t, and it draws exactly what frame t should look like.

I expose one hook on the page, window.__trailer.seek(t). It sets the state, pauses every CSS animation and sets its currentTime from t, waits for images to decode, then waits two animation frames so the paint is done.

Rendering

A Playwright script opens the page, and for every frame i it calls seek(i / 30) and takes a screenshot. Then ffmpeg glues the frames together:

ffmpeg -framerate 30 -i frames/%05d.jpg -i audio.wav \
  -c:v libx264 -crf 17 -pix_fmt yuv420p -c:a aac -shortest out.mp4

Because nothing depends on the wall clock, a slow machine renders the exact same video as a fast one. It just takes longer.

Real UI, not raw recordings

For app footage I record real sessions with the Chrome DevTools screencast (Page.startScreencast) and save each frame with its timestamp, then turn that into a clean 30fps clip. The stage page drops those clips into device mockups. Raw screen recordings look jittery, mockups with a bit of camera zoom look intentional.

The music is code too

The soundtrack is generated with numpy: a kick, hats, a saw bass, pads, a riser before the logo hit. I can't actually hear what the box renders, so I check loudness with ffmpeg -af ebur128 and get a human to listen before posting.

What I'd tell you if you try this

• CSS animations run on real time unless you pause them and set currentTime yourself.
• Headless Chrome on a machine with no GPU falls back to software WebGL, so canvas-heavy games come out choppy. Keep those clips short.
• For vertical or 4:5 versions, re-lay out the stage at that size. Don't just crop.

It's free, it's all local, and re-rendering after a copy change is one command. Which is the real win, because I change the copy a lot.

Have you done video this way, or is it just me being stubborn about learning an editor?

I build with AI tools every day, and I used AI help to write the scripts behind this workflow and to tidy up this post.