Quick, quiet, caused by you
Pantri moves only when you touch it, and never for decoration. Three timings, one easing curve, and nothing at all moves when an item is ticked.
Three durations and a hero fade
Row state change
Sheet open and close
Section collapse
Landing hero fade (once)
- Easing
cubic-bezier(.2, .8, .2, 1), a soft ease-out. One curve for everything.- Anything else
- Don’t animate it.
- Reduced motion
- Under
prefers-reduced-motion: reduceevery duration drops to 0. State still changes instantly. - The 500ms rule
- Never animate a layout change that wasn’t caused by the person’s own input in the last 500ms.
Nothing moves on tick
Try it: tap a rowExample data
Fruit and vegetables · 3
Broccoli2 heads · Coles, checked 30 Sep$2.98$1.49 each
Brown onions1kg bag · Coles, checked 30 Sep$2.90$2.90/kg
Lebanese cucumbers2 · ALDI, checked 30 Sep$2.40$1.20 each
Ticking changes that row and nothing else, in 120ms: the box fills with Action, the name strikes through and drops to Ink 2. No re-sort, no auto-scroll, no removal, no collapse. Tap again to undo.
Self-reordering lists are measurably slower and more frustrating (Findlater & McGrenere, CHI 2004), and a row that jumps under a thumb causes the wrong tap.
300ms, only when asked
Try itExample data
Olive oilIn your pantry
Brown riceIn your pantry
Motion we no longer use
- Bobbing or floating stickers.
- Stacked cards that drift and collapse on scroll.
- Scroll-held (“pinned”) scenes and dark scrollytelling bands.
- Glows, pulses, confetti, streak animations, pulsing “LIVE” dots.
- Skeleton shimmer longer than a moment: show the real state and say what’s loading.