Motion & Delight
Delight Vocabulary
Motion communicates meaning, not decoration. Every animation must earn its place — communicating state, revealing hierarchy, or rewarding a genuine financial win.
Section 01
Motion Vocabulary
Four duration tiers and three easing functions cover every UI transition. Match the tier to the moment's emotional weight.
Duration Scale
Counter animation, confetti burst, scale bounce peak
Token Value Use Case
micro 150ms Press state, icon swap, toggle flip
standard 300ms Page transitions, fade in/out, chip selection
entrance 500ms Card appear, bottom sheet open, hero reveal
celebration 800ms
Easing Curves
Name Curve When to Use
ease-out ease-out All entrances · elements coming to rest
spring cubic-bezier(0.34, 1.56, 0.64, 1) Bottom sheets, celebratory reveals, bouncy CTA
linear linear Counter number roll, progress bar fill
ease-in-out ease-in-out Looping animations (glow pulse, particle float)
Principle: Motion communicates meaning, not decoration. If removing an animation makes the UI harder to understand, the animation belongs. If not, cut it.
Section 02
Micro-interactions
Immediate feedback for user actions. Always 150ms or under — sub-perceptual but felt.
Press State
scale 0.95 · 150ms ease-out
Tap & Hold Me
Applied to all tappable elements: buttons, brand tiles, list rows. Never skip on native touch.
Selected State
gold border 2px · scale 1.02 · gold tint bg
Selected
Gold border signals active selection. Scale 1.02 provides lift. Combine: border + scale + tint bg.
Pulsing Status Dot
scale 1.0→1.2→1.0 · 1.5s ease-in-out · infinite
Account Active
Use for live status indicators only — earning in progress, payment processing. Never decorative.
Section 03
Staggered Entrances
Lists and card groups enter with a 50ms stagger. Each item fades + translates 12px upward. Creates a sense of scanning hierarchy without overwhelming.
Card List · 50ms stagger
fade + translateY 12px→0 · 300ms ease-out per card
Zomato Cashback
+₹24 · Pending
Swiggy Reward
+₹18 · Credited
Myntra Discount
+₹40 · Credited
Bottom Sheet Spring
translateY 100%→0 · 400ms cubic-bezier(0.34,1.56,0.64,1)
Modal title here
Content slides up with spring overshoot
Easing cubic-bezier(0.34, 1.56, 0.64, 1)
Duration 400ms
Dismiss translateY 0→100%, 250ms ease-in
Section 04
Counter Animation
Animated number roll makes abstract values feel earned. Reserve for genuine financial wins — returns earned, savings total, cashback credited.
Size S · Inline stat
DM Sans 16px · 700 · 1s · easeOut
₹ 1,240
Earned this month
Size M · Card value
DM Sans 24px · 700 · 1.5s · easeOut
+₹ 69
Grew with you
Size L · Celebration peak
DM Sans 32px · 800 · 2s · easeOut · teal glow
₹ 109
Total Saved
✓ Do
Let counters run 1–2s proportional to value magnitude. ₹69 → 800ms. ₹24,500 → 1800ms.

Always use tabular-nums + tnum features so digits don't shift width during roll.

Apply teal glow to celebration-size counters only (L · Size).
✗ Don't
Never flash counters to final value instantly — it feels cold and mechanical.

Don't animate every number on screen simultaneously — pick the emotionally meaningful one.

Avoid counter animation on negative values (fees, penalties) — only for wins.
Section 05
Value Breakdown Card — Progressive Reveal
The breakdown card reveals its content in three stages, building anticipation toward the headline "Total Saved" moment.
Stage 0 · 0ms
0ms
Voucher Value
₹500
Brand Discount
−₹40
Amount to Pay
₹460
Returns & Total Saved hidden
→
Stage 1 · 500ms
+500ms
Voucher Value
₹500
Brand Discount
−₹40
Amount to Pay
₹460
Returns Earned
+₹69
Total Saved hidden
→
Stage 2 · 1200ms · PEAK
+1200ms
Voucher Value
₹500
Brand Discount
−₹40
Amount to Pay
₹460
Returns Earned
+₹69
Total Saved
₹109
↑ scale 1.1×→1.0 · spring
Section 06
Celebration Screen Anatomy
The celebration screen is the peak delight moment — reserved for genuine financial wins. Every layer has a specific spec and purpose.
Floating Particles
Size: 8×8px circles
Count: 15 particles
Colors: Gold 40% · Teal 35% · White 25%
Opacity: 0.30–0.70
Loop: 10s ease-in-out infinite
Motion: upward drift ±28px animation-delay: 0ms–5000ms
staggered spawn
Confetti Burst
Count: 20 pieces
Shapes: 7×7px square + 5×9px tall
Colors: Gold · Teal · White · Blue
Origin: Screen center ±10px
Radius: 25–130px radial
Duration: 1500ms
Physics: rotation + gravity + fade triggered at 2400ms
opacity: 1→0
Teal Glow (Returns)
Applied to "+₹69 grew" counter value. text-shadow:
0 0 20px
rgba(0,212,170,0.40);
Pulses in sync with counter:
0 0 8px rgba(0,212,170,0.30)
→ 0 0 24px rgba(0,212,170,0.60)
800ms linear
Card Entrance
Bottom sheet celebration card enters from below with spring overshoot. from:
translateY(60px)
rotate(-2deg)
opacity: 0

to:
translateY(0)
rotate(0)
opacity: 1 Duration: 600ms spring
cubic-bezier(0.34,1.56,0.64,1)
Section 07
Delight Dos & Don'ts
Principles for deploying delight thoughtfully. Motion that fires too often loses meaning.
✓
Reserve celebration for genuine wins
Confetti and scale-bounce are reserved for moments where the user's money genuinely worked — cashback credited, returns earned, goal reached. Deploy once, at the peak. The emotional impact comes from scarcity.
✓
One emotional peak per screen
Design each celebration screen with a single scale-bounce moment — the "Total Saved" reveal. If two elements compete for peak attention, neither wins. Build up to one headline, then release with the spring animation.
✓
Let counters run 1–2 seconds
A counter that runs for 1–2s feels earned and satisfying. Duration should scale with the magnitude of the value — ₹69 runs shorter than ₹24,500. Never flash to the final value instantly; that feels like a glitch.
✗
Don't animate on every screen
Routine screens (transaction list, settings, profile) should have clean, fast transitions only. Entrance animations on every screen train users to ignore them — saving the spring and confetti for genuine moments preserves their impact.
✗
Don't use celebration for errors or empty states
Confetti and gold glow are emotionally coded as "win" moments. Using them for neutral onboarding or error recovery dilutes their meaning and can feel patronising. Error states use coral tones with simple fade-in, no spring.
✗
Don't animate negative financial values
Counter animations, teal glows, and scale bounces are reserved for positive amounts — returns earned, cashback, savings. Fees, charges, and payment amounts should display instantly in neutral colors. Never make the user feel excited about money leaving.
The Golden Rule of Delight
Every delight animation should answer: "Did the user earn this?" If yes, the motion amplifies a genuine moment and builds trust. If no, it's noise that teaches users to skip ahead. Motion in a fintech product is not about looking exciting — it's about making users feel that their money is working for them.