Act as a front-end engineer with a motion design eye. Animate the numbers on {{page_or_feature}} in my {{tech_stack}} project, fed by real data from {{data_to_store}}. Read the existing number displays and the data layer first, and list every number that changes while someone is on the page. What moves and why: a number animates only when its value changes, so people notice the change and its direction. Typical cases: a price when switching monthly to annual, a total after a filter or quantity change, a dashboard figure after a refresh, and a headline stat the first time it scrolls into view. Data: - Every number comes from the database, an API or real calculation, never typed into a component - Marketing stats show a source and an as-of date; if the data fails, show the last known value with its date or hide it, never a made-up fallback Motion: - Value changes: tween from the old value to the new one in 400ms, ease-out cubic-bezier(0.2, 0, 0, 1); a brief color hint for up or down, never color alone - First view of a stat: start when half of it is visible, run once, count from about 80% of the final value over 900ms, ease-out expo cubic-bezier(0.16, 1, 0.3, 1) - Update text with requestAnimationFrame, formatted with Intl.NumberFormat for the visitor's locale and currency - Tabular figures and a width reserved for the longest likely value, so nothing nearby shifts - Rapid changes cancel the running tween and start from the current displayed value Accessibility and SEO: - The final value is in the server HTML; animation only changes what's painted - Screen readers hear the new value once through a polite live region, not every frame - Under prefers-reduced-motion: reduce, values change instantly Performance budget: no animation library for this, layout shift of 0, and no work off screen. Avoid: "10,000+ happy customers" with no source, odometer spins, and counters that replay on every scroll. Finish with each animated number, its data source, and the files changed.