{"slug": "show-hn-virtual-time-engine-to-record-html-to-60fps-mp4-no-drops", "title": "Show HN: Virtual time engine to record HTML to 60fps MP4, no drops", "summary": "A new tool called Virtual Time Engine lets users record HTML, CSS, and JS animations as 60fps MP4 or WebM videos entirely client-side using the WebCodecs API, with no uploads, sign-ups, or watermarks. The engine overrides browser timing functions to ensure consistent frame capture regardless of machine speed, supporting resolutions up to 4K and external libraries like Three.js and GSAP. It is free and unlimited, but requires Chrome 94+, Edge 94+, or Brave on desktop for recording.", "body_md": "Write HTML, CSS & JS animations — export as MP4 or WebM instantly. 100% client-side via WebCodecs API. Zero uploads, zero sign-up, zero watermarks.\n\nYou write **HTML, CSS and JS** animations in the editor. The Virtual Time engine freezes browser time, steps it frame-by-frame, captures each frame onto a canvas, then encodes them using the browser-native **WebCodecs API**. No server involved at any point.\n\nRecording requires the **WebCodecs API** — available in Chrome 94+, Edge 94+, and Brave on desktop. Firefox and Safari do not yet support `VideoEncoder`\n\n. The editor and live preview work on all modern browsers regardless.\n\nExport as **WebM (VP9)** or **MP4 (H.264)**. MP4 is best for Instagram, TikTok and YouTube. WebM is best for web embedding. Resolutions available are 720p, 1080p, and 4K. Frame rates go up to 60fps with configurable quality levels.\n\nCompletely free. **No watermarks, no sign-up, no limits.** Record as many videos as you want at any resolution. Your output contains only what you put in the editor — nothing else is added.\n\nNormal screen recorders capture whatever frames your GPU renders in real time — resulting in dropped frames on slow machines. The Virtual Time engine overrides `Date.now()`\n\n, `requestAnimationFrame`\n\n, and `setTimeout`\n\nso every frame is rendered at exactly the right moment, regardless of machine speed.\n\nYes. The editor supports any external resources via `@import`\n\nin CSS (Google Fonts, etc.) and `<script src>`\n\nin HTML. Make sure resources are CORS-friendly. Libraries like Three.js, GSAP, and Canvas-based renderers all work well via the canvas-capture path.", "url": "https://wpnews.pro/news/show-hn-virtual-time-engine-to-record-html-to-60fps-mp4-no-drops", "canonical_source": "https://zlvox.com/tools/html-to-video", "published_at": "2026-07-26 12:47:22+00:00", "updated_at": "2026-07-26 12:52:14.804097+00:00", "lang": "en", "topics": ["developer-tools", "artificial-intelligence"], "entities": ["Virtual Time Engine", "WebCodecs API", "Chrome", "Edge", "Brave", "Three.js", "GSAP"], "alternates": {"html": "https://wpnews.pro/news/show-hn-virtual-time-engine-to-record-html-to-60fps-mp4-no-drops", "markdown": "https://wpnews.pro/news/show-hn-virtual-time-engine-to-record-html-to-60fps-mp4-no-drops.md", "text": "https://wpnews.pro/news/show-hn-virtual-time-engine-to-record-html-to-60fps-mp4-no-drops.txt", "jsonld": "https://wpnews.pro/news/show-hn-virtual-time-engine-to-record-html-to-60fps-mp4-no-drops.jsonld"}}