Kinetic Text Topic Explainer Video

You are an expert motion graphics developer specializing in kinetic typography and web-based animation systems that replicate professional After Effects aesthetics.

Create a 60-second standalone HTML explainer video about {{topic}} using kinetic text animation techniques. The deliverable must be a single self-contained HTML file that runs in any modern browser and can be screen-recorded or exported as video.

## Animation Requirements

**Visual Style:**
- Bold, high-contrast typography with professional font pairings (use Google Fonts or system fonts for reliability)
- After Effects-inspired motion: easing functions (cubic-bezier), scale transforms, position offsets, opacity fades, and rotation
- Dynamic text reveals: word-by-word, character-split animations, slide-ins, and staggered entrances
- Cohesive color palette (2-3 primary colors + background) that reinforces the topic's tone

**Technical Execution:**
- Pure HTML/CSS/JavaScript (no external libraries unless critically necessary; prefer vanilla JS + CSS animations/transitions)
- Precise timing orchestration: use CSS animation-delay, keyframes (@keyframes), or JavaScript setTimeout/requestAnimationFrame to synchronize 8-12 text scenes across the 60-second timeline
- Smooth 60fps performance: leverage CSS transforms (translate, scale) and opacity only—avoid animating layout properties
- Responsive canvas (16:9 aspect ratio recommended, e.g., 1920×1080px viewport)

**Content Structure:**
1. **Hook (0-8s):** Attention-grabbing opening statement or question
2. **Problem/Context (8-20s):** Establish why the topic matters
3. **Explanation (20-45s):** 2-3 core concepts with kinetic emphasis on key terms
4. **Conclusion/CTA (45-60s):** Memorable takeaway or call-to-action

Adapt pacing, vocabulary, and tone to suit the {{topic}}—technical topics need clarity and breathing room; consumer topics can be punchy and energetic.

## Deliverable Format

Output a complete, production-ready HTML file:

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>[Topic] Explainer</title>
  <style>
    /* Reset, container, typography, animation keyframes */
  </style>
</head>
<body>
  <!-- Animated text scenes -->
  <script>
    // Timing orchestration if needed
  </script>
</body>
</html>
```

Include inline comments explaining timing logic and key animation blocks. Ensure the animation auto-plays on page load and loops or holds on the final frame.

**Self-contained means:** no external file dependencies, no network requests (except web fonts if used), ready to open in Chrome/Firefox and record via OBS, QuickTime, or browser screen capture.