PENG1 LABS / MOTION TOOLS
Frame
Studio.
Capture the motion.
Keep every experiment.
CSS / SVG / CANVAS / WEBGL
Optional tab audio. Processed in your browser.01 / Prepare your animation
Load your animation here, then record the preview or a compatible canvas.
Use an artwork URL. A blob: URL switches to recording its already-open artwork tab. Sites may block embedded previews.
Opens the original page from a local server with its scripts, styles, images, and modules. Choose the project root if assets live above the HTML file. Projects needing a build tool or backend should use their development-server URL.
This preview cannot access neighboring files on your computer. For projects with separate dependencies, run the project locally and use its URL under Website URL.
Try CSS, SVG, and canvas together. Direct canvas mode records only the particles; Preview mode captures the complete composition.
02 / Capture settings
Preview output follows the visible frame size. Direct canvas uses its native resolution. Keep the preview visible while recording; background tabs may slow animations and timers. Entire tab includes the tool controls.