Vano Baby
Expérience web immersive pour le challenge des 10 ans de carrière de l'artiste béninois Vano Baby. Narration visuelle Next.js, transitions Framer Motion, identité sombre et cinématique — transformer une décennie de musique en parcours digital mémorable, mobile-first, digne d'un artiste majeur.
- Client
- Challenge · Vano Baby
- Rôle
- Frontend
- Durée
- Challenge
- Stack Technique
- Next.jsFramer Motion
Expérience immersive · 10 ans de règne
Métriques & Résultats Clés
- FocusImmersion
- StackNext.js
- LiveVercel
Le contexte
Éviter le site « catalogue discographique » plat. Il fallait célébrer dix ans de règne avec une émotion de scène : rythme, contrastes, moments forts — tout en restant performant sur mobile.
L'approche
Storyboard du parcours (intro → moments → discographie émotionnelle → CTA), DA sombre cinématique, motion Framer Motion dosée, Next.js pour le rendu et le déploiement Vercel. Priorité au premier viewport et à la fluidité du scroll narratif.
Le résultat
Une expérience challenge déployée qui transforme une décennie artistique en récit digital immersif, utilisable comme référence visuelle et motion pour d'autres projets culturels.
01 · Problème
Le point de douleur
Comment célébrer 10 ans de carrière en ligne sans tomber dans une page catalogue sans émotion ni rythme ?
02 · Cadrage
Ateliers & périmètre
Cadrage challenge : moments forts, arc narratif, contraintes mobile, sélection visuelle (dark, contrastes, typo display) et cut-list des sections non essentielles.
03 · Conception
Architecture & maquettes
Direction artistique sombre + storyboard motion ; composants Next.js et orchestration Framer Motion (entrées, parallax léger, transitions de section).
04 · Développement
Itérations courtes
Implémentation, polish des timings, optimisation images et contrôle des janks sur mobile mid-range.
05 · Mise en production
Bascule maîtrisée
Déploiement Vercel pour le challenge, smoke test cross-device, préparation de la démo.
06 · Solution
Mesure & évolution
Itérations visuelles post-lancement (copy, contrastes, perf LCP) pour figer une version de référence.
Aperçus du projet en action
Vous avez un projet similaire ou une idée à concrétiser ?
Discutons de vos objectifs techniques et business. Estimation claire et accompagnement sur-mesure.
@eltkof7/webimg-cli
CLI TypeScript open source (npm @eltkof7/webimg-cli, v2.0.5) pour optimiser, convertir et générer des images web prêtes pour la production via Sharp : WebP/AVIF, resize responsive, cache invalidable, mode watch, dry-run, backup avant suppression, rapports et API programmatique. Pensé pour le local et la CI, licence MIT.
Vaultify
Application de découverte GitHub assistée par IA : reformuler une intention en requêtes, scorer les repositories, synthétiser les cas d'usage et accélérer la shortlist open source. Module Benin Devs, favoris, export — pour décider en minutes au lieu de noyer le scroll dans le bruit GitHub.