❌

Normal view

I made a fintech hero where the balance rolls like an odometer when a payment lands (React + Framer Motion)

How it works, since people usually ask:

  • The odometer: each digit is its own reel of 0–9 stacked vertically, and it slides to y = −digit × 10% with a 0.9s ease-out. Commas and the $ sign never move, only digits roll. Screen readers get the plain value through an sr-only span.
  • The balance and the feed share one tick (every 3.4s): a new transaction slides in at the top of the feed and the balance is recomputed from the ledger, so the two can never disagree.
  • The payout is a tiny state machine: Sent → Converted → Arrived, 1.1s per step, then it holds 2.6s and starts over.
  • On wide screens it's a staggered bento that runs off the fold, on tablets 2×2, on phones a swipeable row. With reduced motion everything holds still.

Free to copy if it's useful: https://ui.deliverwebsite.com/components/hero-sections/fintech-hero-section-with-gradient-cards/

Feedback on the motion very welcome. I'm trying to make every animation say something about the product

submitted by /u/poojadeliverwebsite to r/reactjs
[link] [comments]
❌