Built with Framer
Animated Referral Rewards Card Feature
Raymond A.
Can animation make a product feature feel human?
While exploring how motion can improve user experience, I designed and animated a Referral Rewards feature card using Rive.
The goal:
to show how subtle, purposeful animation can transform a static feature into something that feels social, dynamic, light weight and alive.
Smooth preview animation in action
✅ The Solution
I designed a Referral Rewards card and animated in Rive.The concept is feasible across all device cards and it includes:
Orbit Animation: Profile avatars circle subtly a metaphor for community in motion.
Scaling Rewards: The referral value grows and shifts color, signaling progress and achievement.
Micro Interactions: Smooth easing curves create a natural, trustworthy rhythm.
✅ The Outcome
The feature card moved beyond static UI and transformed into an engaging product element:
Visual storytelling: The orbit motion reflects connection, while the scaling number communicates growth.
Focused attention: Subtle motion naturally draws the eye to the evolving reward value.
Client advantage: Thoughtful micro-interactions build trust, increase retention, and add a layer of delight that sets the experience apart.
Like this project
Posted Sep 15, 2025
Animated referral rewards card with Rive, turning a simple feature into an engaging, interactive experience that captures attention and builds user trust.
Likes
1
Views
4
Timeline
Jun 12, 2025 - Jun 14, 2025
SolidFrame – Landing Page Design
Animating Feature Section Integrations with Rive
LinkUp: Designing a Landing Page for Real-World Connection
Landing Page Design for Kindnest
