I wanted a playful way to simulate a cafe pickup queue—customers appear, then “pick up” and slide out—while keeping the UI buttery-smooth on mobile.

The demo uses lightweight CSS transitions for enter/exit, plus a tiny bit of JavaScript to schedule random arrivals and departures. It staggers list-item delays, cancels keyframe animations before exit, and collapses space to avoid layout jumps.

It’s a micro-interaction sandbox that could power a real-time pickup board or order queue in a POS dashboard.

My Role

Solo designer–developer (interaction design, performance tuning, build).

Process

  1. Motion Spec: slide-in on mount, slide-right + collapse on pickup.
  2. Perf: animate transform/opacity, add will-change, cancel keyframes before exit.
  3. Robustness: random intervals, guard against double-removal, restagger remaining items.

Live Demo

Try the embedded version below or open it fullscreen on CodePen.

If the embed doesn’t load, open it on CodePen →

Takeaways

Tech

Vanilla JS, CSS transitions, Tailwind.

Open on CodePen