Showcase · 4.5s loop

Steaming Coffee

Coffee cup with three steam wisps rising on a staggered loop

By Lottie Max Added Jun 12, 2026

480×540 · 30fps · 4.50s · loops

Inspiration

The visual ritual of a morning coffee — the rising steam wisps that read as continuous even though each one only exists for about a second. Aimed for a hand-drawn cozy feel rather than a photo-realistic depiction.

How it was made

The cup is a tapered path with a separate handle arc curving off to the right. Three steam wisps each follow an S-curve drawn via cubic bezier. Each wisp uses comet-style trim animation: trim start and trim end both animate, so the wisp "rises" (end moves up) and "dissipates" (start chases behind). Phases stagger 0.6s apart so the steam looks continuous. The cup breathes a subtle 1% so the scene never feels frozen.

Embed it anywhere

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

Embed · Steaming Coffee

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