Relationship Wrapped 2025
Une expérience web narrative de type « Wrapped » (dans l'esprit du Spotify Wrapped) : un récit qui se déroule au défilement (scrollytelling), synchronisé à une bande sonore. Côté technique, c'est surtout un terrain de jeu d'animation web — séquences orchestrées avec GSAP et Framer Motion, lecture et contrôle audio via Howler.js (vitesse, volume, pause), confettis, frise chronologique animée au scroll et repères de progression. Construit en React + Vite + Tailwind et déployé sur Vercel.
L'idée
Un « Wrapped » web, dans l'esprit du Spotify Wrapped : un récit qui se déroule au défilement, rythmé par une bande sonore.
- ▸Scrollytelling — le contenu s'anime section par section
- ▸Bande sonore synchronisée, avec contrôle audio
- ▸Frise chronologique et repères de progression
La technique
Avant tout un terrain de jeu d'animation web : orchestration précise du timing et de l'audio.
- ▸Animations avec GSAP et Framer Motion
- ▸Audio via Howler.js (lecture, vitesse, volume, pause)
- ▸Confettis (canvas-confetti) aux moments forts
- ▸React + Vite + Tailwind, déployé sur Vercel
Résultat
Une expérience fluide et en ligne, qui m'a servi à pousser l'animation et l'audio synchronisé côté web.