Rive Blog
Spotify used Rive for Spotify Wrapped 2025
The technical pattern behind Wrapped experiences: design ships the interaction in Rive, and code drives it with data.
Spotify Wrapped is a product moment that spills into culture: your friends share it, brands remix it, artists respond to it, and the visuals become part of the announcement.
For their most recent Wrapped experience, Spotify used Rive for their motion layer.
Spotify’s own framing leans into that scale. They called the design a “visual mixtape” with a highly graphic system intended to travel across surfaces (in-app, share cards, and beyond).
On the experience side, it’s more layered and interactive, including new ways to move through and revisit moments. It leans into data-as-interaction, too, like the “Top Artist Sprint,” which visualizes how your top artists shifted month by month.
How they built it
The team started with a simple concept, used dummy data to prototype and nail the motion, then built the final animation in Rive. From there, engineering could drive it with real user data. Meanwhile, the system held up to text length variation, device constraints, localization, and last-minute changes without turning every tweak into a rebuild.
Spotify on X
Why companies choose Rive for Wrapped-style experiences
Recaps look like marketing, but they behave like product UI.
If animation lives in a video export, engineering can’t wire it to personalized story logic with localization across languages and responsiveness across devices. If it lives in a prototyping tool, it’s not the asset that ships. And if it lives in code, designers lose iteration speed (and every change becomes a rebuild.)
Rive reduces the translation steps between design intent and shipped behavior. It lets designers build motion and behavior in a runtime asset, and engineers can drive it with data without rebuilding the whole thing.
A “visual system,” not a pile of one-off animations
Wrapped experiences are made of reusable pieces: layouts, transitions, badges, charts, and share cards. If each of those becomes a separate bespoke animation export, your file size and maintenance cost explode.
Rive’s component model is built for reuse: build one “story card” system, then instantiate it with different content, timing, and states.
Iteration speed stays high even late in the cycle
Rive helps teams keep iteration speed while the integration surface grows. This is because the artifact that design edits is the same artifact engineering ships.
The asset is the product
The deliverable isn’t a Figma prototype or a rendered MP4. It’s an interactive experience that has to behave correctly on real devices, at scale, under load.
Go forth and create in Rive
Want to build a recap like this for your own product? Start with our docs (Editor + runtimes), then jump into our YouTube channel for quick walkthroughs and patterns you can copy. If you learn best by dissecting real files, pull a few projects from the Marketplace and Community Showcase and reverse-engineer the structure.
Spotify Wrapped is a product moment that spills into culture: your friends share it, brands remix it, artists respond to it, and the visuals become part of the announcement.
For their most recent Wrapped experience, Spotify used Rive for their motion layer.
Spotify’s own framing leans into that scale. They called the design a “visual mixtape” with a highly graphic system intended to travel across surfaces (in-app, share cards, and beyond).
On the experience side, it’s more layered and interactive, including new ways to move through and revisit moments. It leans into data-as-interaction, too, like the “Top Artist Sprint,” which visualizes how your top artists shifted month by month.
How they built it
The team started with a simple concept, used dummy data to prototype and nail the motion, then built the final animation in Rive. From there, engineering could drive it with real user data. Meanwhile, the system held up to text length variation, device constraints, localization, and last-minute changes without turning every tweak into a rebuild.
Spotify on X
Why companies choose Rive for Wrapped-style experiences
Recaps look like marketing, but they behave like product UI.
If animation lives in a video export, engineering can’t wire it to personalized story logic with localization across languages and responsiveness across devices. If it lives in a prototyping tool, it’s not the asset that ships. And if it lives in code, designers lose iteration speed (and every change becomes a rebuild.)
Rive reduces the translation steps between design intent and shipped behavior. It lets designers build motion and behavior in a runtime asset, and engineers can drive it with data without rebuilding the whole thing.
A “visual system,” not a pile of one-off animations
Wrapped experiences are made of reusable pieces: layouts, transitions, badges, charts, and share cards. If each of those becomes a separate bespoke animation export, your file size and maintenance cost explode.
Rive’s component model is built for reuse: build one “story card” system, then instantiate it with different content, timing, and states.
Iteration speed stays high even late in the cycle
Rive helps teams keep iteration speed while the integration surface grows. This is because the artifact that design edits is the same artifact engineering ships.
The asset is the product
The deliverable isn’t a Figma prototype or a rendered MP4. It’s an interactive experience that has to behave correctly on real devices, at scale, under load.
Go forth and create in Rive
Want to build a recap like this for your own product? Start with our docs (Editor + runtimes), then jump into our YouTube channel for quick walkthroughs and patterns you can copy. If you learn best by dissecting real files, pull a few projects from the Marketplace and Community Showcase and reverse-engineer the structure.
Spotify Wrapped is a product moment that spills into culture: your friends share it, brands remix it, artists respond to it, and the visuals become part of the announcement.
For their most recent Wrapped experience, Spotify used Rive for their motion layer.
Spotify’s own framing leans into that scale. They called the design a “visual mixtape” with a highly graphic system intended to travel across surfaces (in-app, share cards, and beyond).
On the experience side, it’s more layered and interactive, including new ways to move through and revisit moments. It leans into data-as-interaction, too, like the “Top Artist Sprint,” which visualizes how your top artists shifted month by month.
How they built it
The team started with a simple concept, used dummy data to prototype and nail the motion, then built the final animation in Rive. From there, engineering could drive it with real user data. Meanwhile, the system held up to text length variation, device constraints, localization, and last-minute changes without turning every tweak into a rebuild.
Spotify on X
Why companies choose Rive for Wrapped-style experiences
Recaps look like marketing, but they behave like product UI.
If animation lives in a video export, engineering can’t wire it to personalized story logic with localization across languages and responsiveness across devices. If it lives in a prototyping tool, it’s not the asset that ships. And if it lives in code, designers lose iteration speed (and every change becomes a rebuild.)
Rive reduces the translation steps between design intent and shipped behavior. It lets designers build motion and behavior in a runtime asset, and engineers can drive it with data without rebuilding the whole thing.
A “visual system,” not a pile of one-off animations
Wrapped experiences are made of reusable pieces: layouts, transitions, badges, charts, and share cards. If each of those becomes a separate bespoke animation export, your file size and maintenance cost explode.
Rive’s component model is built for reuse: build one “story card” system, then instantiate it with different content, timing, and states.
Iteration speed stays high even late in the cycle
Rive helps teams keep iteration speed while the integration surface grows. This is because the artifact that design edits is the same artifact engineering ships.
The asset is the product
The deliverable isn’t a Figma prototype or a rendered MP4. It’s an interactive experience that has to behave correctly on real devices, at scale, under load.
Go forth and create in Rive
Want to build a recap like this for your own product? Start with our docs (Editor + runtimes), then jump into our YouTube channel for quick walkthroughs and patterns you can copy. If you learn best by dissecting real files, pull a few projects from the Marketplace and Community Showcase and reverse-engineer the structure.
Join our newsletter
Get all the latest Rive news delivered to your inbox.