A Node.js script that renders an HTML5-based animation into a high-quality video (supports at least 1080p60). It renders the animation in a frame-by-frame basis using Puppeteer. So, even very CPU-intensive animations can be rendered without skipping frames (unlike screen recording solutions).
It works by opening a headless browser and calls
seekToFrame(frameNumber) for each frame of your animation.
When called, your web page is expected to display that frame on the screen so that a screenshot for that frame can be taken.
Each frame is then sent to
ffmpeg to encode the video without needing to save temporary files to disk.
Because it works by capturing the page screenshot, it can render:
- HTML elements
- SVG elements
However, the renderer needs to be able to display a freeze frame when requested. Therefore, it does not support:
- CSS animations and transitions
- Nondeterministic animations
- Outputs high-quality MP4 file with configurable frame rate and size.
- Outputs PNG image frames with the
- Framework-agnostic, so you can use it with GSAP, Pixi.js, Vue.js, React.js, etc. See examples below!
- Parallizable — It can run multiple instances of headless Chrome in parallel to speed up rendering.
- Video with alpha channel can be rendered using the
--transparentoption. It outputs as a QuickTime Animation (.mov) file.
Examples and demos
|Image||Source code||View in browser||Result|
|A simple but CPU-intensive Hello World example using GSAP. Shows basic usage on how to create an HTML5 webpage compatible with this renderer.|
|A very CPU-intensive starfield built with Vue.js. When viewed in real-time, my Late 2013 MacBook Pro cannot render any faster than 10 fps.|
Creating your HTML5 animation
Your HTML5-based animation can be created using any tool, so long as the webpage has these properties:
The webpage should contain a
#sceneelement in the DOM, positioned at
top: 0; left: 0;. The dimensions of the
#sceneelement will be the video’s dimensions. You can use the provided lib/style.css as a starting point.
getInfo()should return an object with the following properties:
fpsThe video frame rate.
numberOfFramesThe number of frames to render.
seekToFrame(frameNumber)should display the frame at the specified
frameNumber. This function may return a promise, in this case the renderer will wait for it to resolve. Please make sure that all assets (such as images/fonts) are already loaded.
seekToFrame()returns (or resolves to) a string begining with
data:image/png;base64,, then the renderer directly renders the PNG image instead of taking a screenshot. This can really speed up rendering by an order of magnitude.
See an example at examples/gsap-hello-world.html.
Install the prerequisites
Install Node.js 12, Yarn and ffmpeg, then install the project dependencies with:
Running the renderer
To see help text, run:
node render --help
Rendering a video
node render --url=<URL> --video=<FILE>.mp4
By default, the renderer will spawn multiple headless Chrome processes matching the number of CPU cores detected on your machine. However, more running Chrome instances means more memory consumption. This may be undesirable.
For instance, CircleCI instances have 2 vCPUs and 4 GB of RAM. However it reports as having 36 cores, leading to a lot of crashes due to out-of-memory condition.
You can control the number of headless Chrome processes using the
node render --url=<URL> --video=<FILE>.mp4 --parallelism=4
Render as image files instead
You can also render individual frames as different image files using the
This can help you avoid losing your work in case you want to render a long video, in exchange for more disk usage.
node render --url=<URL> --video=<FILE>.mp4 --png=<DIR>
This will render each frame to
Note that you will have to assemble these frames into a video file yourself.
You can use this in conjunction with
--no-video to render just the image files, without the video.
Render only some part of the video
You can also set the starting and ending frame numbers.
node render --url=<URL> --video=<FILE>.mp4 --start=60 --end=120
This will render the frames 60–119. Note that the ending frame is not rendered.
Do not render a video
--no-video option. Useful when used with
node render --url=<URL> --no-video
Render a single frame
--end to (
--start + 1) and render out a
node render --url=<URL> --png=<DIR> --start=60 --end=61
Upscale/downscale the viewport
--scale option to scale up or scale down the browser viewport.
node render --url=<URL> --video=<FILE>.mp4 --scale=0.5 node render --url=<URL> --video=<FILE>.mp4 --scale=2
Render alpha channel
You can also use this tool to render animations with alpha channel passing the
--alpha option and outputting a
Note that the resulting file size will be significantly larger due to codec change (QuickTime Animation codec)!
node render --url=<URL> --video=<FILE>.mov --alpha
This allows you to composite the rendered animation on top of another video file!