Save delight for rare momentsSave delight for rare moments

First invoice sent

Press Send, then push Bounce past 0.3.

const k = (2 * Math.PI / 0.5) ** 2;
const c = (1 - 0.2) * 4 * Math.PI / 0.5;

UILab.spring({ from: 0.6, to: 1, stiffness: k, damping: c,
  onUpdate: (s) => badge.style.setProperty("transform", `scale(${s})`) });

pieces.forEach((p, i) => p.animate(
  [{ transform: "translate(0, 0)", opacity: 1 },
   { transform: `translate(${dx}px, ${dy}px) rotate(${r}deg)`, opacity: 0 }],
  { duration: 900, delay: i * 30, easing: "cubic-bezier(0.23, 1, 0.32, 1)" }));

title.animate([{ opacity: 0, transform: "translateY(6px)" }, { opacity: 1, transform: "none" }],
  { duration: 400, delay: 180, easing: "cubic-bezier(0.23, 1, 0.32, 1)", fill: "backwards" });

Same flourish on every save

Type a note; each keystroke saves.

.saved { opacity: 1; }
if (isFirstEver) celebrate(badge);

An empty state takes its time

Archive all, then compare the two entrances.

const ease = "cubic-bezier(0.23, 1, 0.32, 1)";
illo.animate([{ opacity: 0, transform: "translateY(12px) scale(0.94)" }, { opacity: 1, transform: "none" }],
  { duration: beat, easing: ease });
[heading, body].forEach((el, i) => el.animate(
  [{ opacity: 0, transform: "translateY(6px)" }, { opacity: 1, transform: "none" }],
  { duration: 400, delay: beat * 0.35 + i * 120, easing: ease, fill: "backwards" }));

Why it matters, pros and cons