An HTML card is not just a preview — you can turn it into a finished asset. Capture a still image of a card, or render an animated card to a video, and the result is placed on the board. Both use the same on-device Chromium virtual-time render engine.
Screenshot a card
Click Screenshot on a card to capture it as a still image (POST /api/html/render-frame). The app renders the card exactly as it appears and saves a PNG to the board. Use this for:
- Static designs — title cards, quote graphics, layouts.
- A single frame of an animation (a poster frame, or a thumbnail).
The screenshot is a normal image element afterward, so you can place it in a frame, drop it into a video project, or export it.
Render an animation to video
For an animated card (CSS/JS motion), click Render HTML video to canvas to record it to a video file (POST /api/html/render, MP4 or WebM). The renderer steps the page’s clock with virtual time and plays the animation through at your chosen size and frame rate, sampling the first, current, and last frame, then places the resulting clip on the board.
This is what makes HTML a real motion source: design an animation once as a card, render it to MP4, and reuse it like any other clip — including inside a video project timeline.
Choosing settings
Renders honor the scene’s dimensions and a frame rate suitable for the animation. Longer or heavier scenes take longer to render; rendering happens locally on your machine.
Tips
- Design at final size. Build the HTML at the resolution you want the output to be so text and spacing render crisply.
- Keep animations deterministic. Avoid timing that depends on random delays so the recorded video matches what you preview.
- Screenshot first. A quick screenshot is the fastest way to verify a static scene before committing to a full video render.
Leave a Reply