Getting Started & Technical Guide

1. Overview & Architecture

D3 HTML to Video is a high-performance, local-first cross-platform desktop application engineered to convert interactive web animations (HTML5, CSS keyframes, JavaScript, SVG, Canvas 2D, and Three.js/WebGL) into broadcast-quality MP4 (H.264 / yuv420p) video files without requiring cloud subscriptions or per-minute credit burns.

2. Installation & Setup

A. Windows 10 & 11 Installation

1. Download D3-Motion-Setup.exe.
2. Double-click the installer. Follow the on-screen steps to install the application and create desktop/start menu shortcuts.
3. Launch D3 Motion from your desktop or start menu.

B. macOS Installation & First-Time Launch Guide

D3 Motion supports both Apple Silicon (M1/M2/M3/M4) and Intel Macs:

• Apple Silicon (M-Series): Download D3-Motion-Mac-arm64.dmg
• Intel (x64): Download D3-Motion-Mac-x64.dmg

xattr -d com.apple.quarantine "/Applications/D3 Motion.app"

3. Quick Start (Drag · Drop · Download)

1. Launch App: Open D3 Motion from your Applications or Desktop.
2. Import Project: Drag and drop your .html file (or a .zip archive containing your project files) directly into the dashed dropzone. You can also click Choose HTML / ZIP to select a file via the native file picker.
3. Configure Settings: Select your desired output resolution, frame rate (24, 30, or 60 FPS), duration in seconds, zoom/pan, background color, and render quality.
4. Preview & Render: Check the live preview stage to verify rendering behavior, then click Render MP4.
5. Save Export: When rendering concludes, click Save MP4 to choose a destination or Show file to reveal the output video in your system file manager.

4. Supported Project Formats

A. Single Standalone HTML File (.html / .htm)

Ideal for self-contained animations with inline CSS, embedded SVG, or JavaScript libraries loaded from reliable CDNs or embedded as inline scripts.

B. ZIP Project Archives (.zip)

For projects structured across multiple files and subdirectories. Your ZIP archive should include an entry HTML file (e.g., index.html) at the root level, alongside relative directories for assets:

my-animation.zip/
├── index.html       (Entry file)
├── style.css        (Stylesheets)
├── script.js       (Animation logic)
├── assets/         (Images, audio, video)
└── fonts/          (Custom web fonts)

5. Output Settings & Resolutions

6. Best Practices for Flawless Motion Exports

Font Synchronization

D3 automatically waits for document.fonts.ready before beginning recording. However, if using custom web fonts loaded from external Google Fonts or Typekit, bundling the font files (.woff2 or .ttf) locally inside your ZIP archive ensures 100% offline consistency without network latency.

Canvas & Three.js Loop Timing

For deterministic animations, tie your render loop to elapsed time or frame counts rather than real-world clock intervals where possible. For example:

// Recommended: Compute angle from requestAnimationFrame timestamp
function render(timestamp) {
  const elapsed = timestamp * 0.001; // in seconds
  cube.rotation.y = elapsed * 1.5;
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}
requestAnimationFrame(render);

7. Troubleshooting & FAQs

Why is my preview blank?

Ensure your ZIP contains an index.html (or index.htm) file at the root or within the main directory. If your HTML uses absolute paths (e.g., /styles.css instead of ./styles.css), switch to relative paths so the local server can resolve them properly.

Where are my rendered videos stored?

Rendered videos are automatically saved to your system's default user media folder (Videos\D3 Motion\ on Windows or ~/Movies/D3 Motion/ on macOS). You can immediately access or copy them using the Save MP4 or Show file buttons on the success screen.

Is my data uploaded to any remote server?

No. All rendering, browser execution, frame capture, and FFmpeg encoding happen entirely on your computer's CPU and GPU. Your projects and videos never leave your local machine.