Built with Framer
Recreated Tatem.com Animations in Rive
Raymond A.
Recreating Micro-Interactions for Modern Product Design
Project Overview
Inspired by the beautifully fluid UI of Tatem, I challenged myself to recreate key animations from their site to better understand the motion design systems that elevate digital experiences.
The goal was to study and replicate subtle transitions, hover states, and scroll-based interactions that feel seamless and intuitive.
Type: Personal Practice / Animation Study
Focus: UI Animations, Microinteractions, Motion Design
Tools: Rive, Arc, Figma
Deliverables:
3 responsive micro-interaction recreations
Animation system inspired by real product design
The Challenge
Deconstructing High-Level Interactions: Tatem’s animations are built with a subtle touch of finesse — smooth transitions, scroll-based layers, and hover states. It required careful observation to break these down.
Making Personal Work Feel Real: As a solo project, one challenge was presenting this rebuild in a way that reflects value, process, and intentional design — not just visual mimicry. So I changed some stuffs.
Performance & Timing: Matching timing, easing, and responsiveness in Rive took experimentation and iterative refinements.
Animation 01 - https://share.cleanshot.com/JNhPKw6P
Animation 02 - https://share.cleanshot.com/vPB00vcZ
Animation 03 - https://share.cleanshot.com/mSZYdTgC
The Outcome
Each animation was faithfully recreated with clean, efficient motion principles that could be applied to any SaaS or product landing page AND with RIVE, be rest assured all these file sizes were not up to 1MB.
This project deepened my motion understanding and strengthened my ability to reverse-engineer real-world examples into production-ready animations.
Founder's Review
Full Preview - https://share.cleanshot.com/HN6lcR6d
Like this project
Posted May 11, 2025
Recreated Tatem-inspired UI animations to study and refine motion design systems, improving user experience through smooth, intuitive interactions.
Likes
4
Views
11
