Le projet
Studio Koukaki est un studio d’animation dont le dernier court-métrage a été nommé aux Oscars. Leur site existant était fonctionnel mais figé : aucune animation, aucune mise en scène, alors que le métier du client repose entièrement sur le mouvement.
Mission confiée par l’agence : reprendre la page d’accueil à partir des maquettes de l’UX designer et lui donner vie, sans dégrader les performances.
Objectifs
- Traduire fidèlement la maquette fournie en interface responsive
- Ajouter des animations qui servent le propos du studio, pas la démonstration technique
- Travailler dans un thème enfant WordPress, sans page builder
- Préserver les temps de chargement malgré l’ajout d’images et de vidéo
Contraintes techniques
- Thème enfant obligatoire : aucune modification du thème parent, pour que les mises à jour restent possibles
- Intégration des scripts via
wp_enqueue_script: les bonnes pratiques WordPress plutôt qu’un<script>collé dans le header - Sass pour structurer le CSS et le garder maintenable
- Zéro plugin d’animation : tout est écrit à la main
Fonctionnalités clés
- Animations CSS pures pour les éléments décoratifs — rotation continue, transitions fluides, aucun coût JavaScript
- Effets d’apparition au scroll déclenchés par observation de la position des éléments dans le viewport
- Parallaxe sur les visuels de fond pour créer de la profondeur
- Carrousel de présentation des productions du studio
- Navigation modale animée avec gestion du scroll de la page en arrière-plan
- Intégration vidéo optimisée : chargement différé pour ne pas pénaliser le premier affichage
Résultats
- Page d’accueil vivante et cohérente avec l’identité du studio
- Code CSS organisé en partiels Sass, lisible et repris facilement
- Thème enfant propre, mises à jour du parent préservées
- Aucune régression de performance malgré l’ajout des médias
Ce que j’en retiens
L’enjeu de ce projet n’était pas de savoir animer, c’est facile. C’était de choisir quoi animer. Une animation qui attire l’œil sans raison fatigue le visiteur ; une animation bien placée raconte quelque chose sur le client. Le vrai travail a été de trancher entre les deux, maquette en main.
