Showcase · 6s loop

Typewriter Story

Text lines stroke in one after another with a walking, blinking cursor

By Lottie Max Added Jun 12, 2026

480×360 · 30fps · 6.00s · loops

Inspiration

Inspired by classic typewriter scenes in cinema and the satisfying feel of watching real text being typed. The cursor walks each line waypoint by waypoint, blinks while idle, and never breaks the illusion of being driven by a human hand.

How it was made

Seven text-line silhouettes appear one after another via trim-path animation — each line strokes in left-to-right over roughly half a second. A purple cursor bar is position-keyframed to walk between waypoints calculated to match each line's start and end position. The cursor's blink (fast on/off at the beginning and end) is layered over the position track via opacity. The page underneath breathes 4% so the composition never freezes during the held frames.

Embed it anywhere

Paste the snippet into any HTML page. The animation loads from /templates/typewriter-story.json — host it yourself or hot-link from lottiemax.com.

Embed · Typewriter Story

<script src="https://unpkg.com/lottie-web@latest/build/player/lottie.min.js"></script>
<div id="lottie-typewriter-story" style="width:480px;height:360px;"></div>
<script>
  lottie.loadAnimation({
    container: document.getElementById('lottie-typewriter-story'),
    renderer: 'svg',
    loop: true,
    autoplay: true,
    path: 'https://lottiemax.com/templates/typewriter-story.json',
  });
</script>