Studio Vesper
Une démonstration d'animation web : un portail végétal qui s'ouvre au scroll pour révéler un ciel de coucher de soleil, avec de la profondeur qui réagit au curseur. L'effet waouh, de bout en bout.
- Client
- Projet concept
- Rôle
- Direction créative & développement
- Année
- 2026
Le contexte
Projet personnel (concept). Une pièce de démonstration pensée comme une proposition de force : montrer ce que je sais faire en animation et en interaction web. J'ai imaginé une arche de fleurs sous un ciel de coucher de soleil, avec plusieurs plans détourés qui créent de la profondeur et réagissent au mouvement du curseur, et, au scroll, une entrée spectaculaire dans l'arche jusqu'aux nuages. Objectif assumé : l'effet waouh.
Le défi
Créer un moment d'ouverture spectaculaire, un hero animé et fluide au scroll comme à la remontée, qui prouve un vrai niveau d'animation web.
La réponse
Un hero en deux phases : on explore des plans de végétation détourés qui réagissent au curseur (profondeur, parallaxe), puis au scroll on franchit l'arche jusqu'aux nuages. Développé en vanilla + GSAP pour une fluidité 60fps.
Le process
Benchmark animation
Benchmark surtout tourné vers l'animation (Instagram, Dribbble, sites de référence) plutôt que l'UI : je repère les types d'effets que je veux reproduire à ma sauce.
Concept & DA
Je pose l'intention visuelle : une arche végétale, un coucher de soleil, des plans détourés pour créer de la profondeur.
Prototypage animé
Mise en place des animations en vanilla + GSAP : parallaxe réactive au curseur, scroll-pinning, transition entre les deux phases.
Optimisation
Réglage de la fluidité au scroll et à la remontée pour tenir le 60fps, la partie la plus délicate.
Direction artistique & choix
L'animation avant l'interface
Ici, le contenu, c'est l'animation. J'ai concentré le benchmark et le travail sur les effets (profondeur, parallaxe, scroll-pinning) plutôt que sur une UI classique. Le geste prime.
Un portail en deux phases
L'idée m'est venue en scrollant Instagram et Dribbble : reproduire ce type d'animation, mais avec mon univers, une arche de fleurs et un ciel de coucher de soleil. On explore la profondeur au curseur, puis au scroll on franchit l'arche jusqu'aux nuages.
Vanilla + GSAP pour la fluidité
Pas besoin d'un framework lourd : vanilla + GSAP était le moyen le plus simple et le plus optimisé pour obtenir exactement l'effet voulu, fluide au scroll comme à la remontée, à 60fps.
Ce que le vibe coding rend possible
Ce genre d'animation était hors de portée d'un designer seul il y a deux ans : il fallait une équipe de dev et des semaines. Avec Claude Code, je l'ai réalisée en moins d'une semaine. C'est le type de rendu que je me sens prêt à livrer à des clients.
Ce que j'ai livré
- Benchmark d'animations & moodboard
- Direction artistique (arche végétale, coucher de soleil)
- Plans détourés & profondeur réactive au curseur
- Hero scroll-pinné en deux phases (GSAP)
- Optimisation 60fps (scroll & remontée)
- Mise en ligne de la démo
Le site en images
Résultats
Un projet similaire en tête ?
Projet suivant
Élan