SYS–15Case studyPersonal●Personal project · Live
Relationship Wrapped 2025
A 'Wrapped'-style narrative web experience (in the spirit of Spotify Wrapped): a story that unfolds as you scroll (scrollytelling), synced to a soundtrack. Technically it's mostly a web-animation playground — sequences orchestrated with GSAP and Framer Motion, audio playback and control via Howler.js (speed, volume, pause), confetti, a scroll-animated timeline and progress markers. Built with React + Vite + Tailwind and deployed on Vercel.
Role
Developer (solo)
Type
Narrative web experience
Stack
React · GSAP · Framer Motion · Howler
Status
Live
01
The idea
A web "Wrapped", in the spirit of Spotify Wrapped: a story that unfolds as you scroll, paced by a soundtrack.
- ▸Scrollytelling — content animates section by section
- ▸Synced soundtrack, with audio controls
- ▸Timeline and progress markers
02
The tech
Above all a web-animation playground: precise orchestration of timing and audio.
- ▸Animations with GSAP and Framer Motion
- ▸Audio via Howler.js (playback, speed, volume, pause)
- ▸Confetti (canvas-confetti) at key moments
- ▸React + Vite + Tailwind, deployed on Vercel
03
Result
A smooth, online experience that let me push web animation and synced audio.
Scroll
scroll-animated story
GSAP
+ Framer Motion
Howler
synced audio
Live
deployed on Vercel