HUD & Overlays

Add heads-up displays (HUD), text overlays, and information panels to enhance your map animations.

Quick Enable

Enable all default HUD elements with a single flag:

{
  "hud": true
}

Custom HUD Configuration

{
  "hud": {
    "stats": {
      "show_distance": true,
      "show_time": true,
      "vehicle_speed_kmh": 80,
      "position": "top-right"
    },
    "progress_bar": true,
    "minimap": true,
    "distance_markers": {
      "interval_km": 1000
    }
  }
}

Stats Panel

Display real-time distance and time statistics:

Position Options

• top-left
• top-right
• bottom-left
• bottom-right

Progress Bar

Show a progress bar indicating route completion:

{
  "hud": {
    "progress_bar": true
  }
}

Minimap

Display a small overview map showing the full route:

{
  "hud": {
    "minimap": true
  }
}

Distance Markers

Show markers at regular intervals along the route:

{
  "hud": {
    "distance_markers": {
      "interval_km": 500
    }
  }
}

Text Overlays

Add custom text overlays at specific times during the video:

{
  "text_overlays": [
    {
      "text": "Global Shipping Routes 2026",
      "position": "top-center",
      "start_time": 0,
      "end_time": 4,
      "font_size": 48,
      "font_color": "#FFFFFF",
      "background": "rgba(0,0,0,0.7)",
      "animation": "fade"
    },
    {
      "text": "Source: Maritime Analysis",
      "position": "bottom-right",
      "start_time": 8,
      "font_size": 24,
      "animation": "slide-up"
    }
  ]
}

Text Overlay Properties

Text Positions

• top-left, top-center, top-right
• center
• bottom-left, bottom-center, bottom-right

Text Animations

• fade - Fade in/out
• slide-up - Slide in from below
• none - Instant appear/disappear

Complete Example

{
  "waypoints": [...],
  "hud": {
    "stats": {
      "show_distance": true,
      "show_time": true,
      "position": "top-right"
    },
    "progress_bar": true
  },
  "text_overlays": [
    {
      "text": "Suez Canal Blockage: Impact on Global Trade",
      "position": "top-center",
      "start_time": 0,
      "end_time": 5,
      "font_size": 36,
      "animation": "fade"
    },
    {
      "text": "12,000 km added to shipping route",
      "position": "bottom-center",
      "start_time": 8,
      "font_size": 28,
      "font_color": "#FF6B6B",
      "animation": "slide-up"
    }
  ]
}