Prototype 33 degrés un nouveau regard en mouvement
Les quatre maquettes de home de 33degres.pen, codées telles quelles, avec leur motion : lentilles qui suivent le curseur, carrousels à glisser, parallaxe, survols et FAQ dépliable. À regarder sur ordinateur, souris en main.
- Hero : la lentille suit le curseur et révèle l'univers imaginaire aligné (bouton pause)
- Chiffres en bandeau défilant, 7 cercles qui se remplissent au survol
- Réalisations à glisser ou aux flèches, avis qui changent au survol des noms
- « Faisons décoller » : chaque réalisation flotte à sa vitesse ; lentille citron sur le wordmark du footer
- Hero : les cercles du logo apparaissent, bougent avec la souris et se remplissent
- Expertises en lignes XXL : une lentille photo suit le curseur
- Avis au clic sur les noms, FAQ en pilules
- « Faisons décoller » : les cercles montent comme des ballons ; bouton Parlons-en magnétique
- Hero : 5 scènes qui défilent (auto, flèches, clic), chacune avec sa lentille alignée
- Expertises : les grands cercles rognés se remplissent au survol
- Fil des avis à glisser, logos en défilement continu
- CTA : le dôme citron se lève au scroll ; footer avec la scène finale et sa lentille
- Hero : la scène en dôme se lève au scroll, la lentille reste dans le dôme
- Chiffres puis logos clients en défilement continu
- Le reste de la page reprend les comportements de V3
À savoir avant de montrer
- Fidèle au .pen. La mise en page vient de l'export Pencil des frames KOQby, UD1IT, m2ven et Kv8Uc (largeur 1440 px, mise à l'échelle de la fenêtre). Une modification dans Pencil demande un nouvel export.
- Ordinateur d'abord. Sur téléphone, la page est seulement réduite. La version mobile reste à faire après validation de la page de référence.
- Visuels provisoires. Banque d'images, extraits du brief créa et visuels générés (IA), marqués comme tels sur les slides. Aucun ne montre le vrai client.
- Textes à valider. Les avis sont des extraits du wireframe, à vérifier mot pour mot. Les réponses de la FAQ ne sont pas dans le wireframe : elles s'affichent « à rédiger ».
- Motion codé sans librairie, pour tourner partout. Pour le site final, la même logique passera sur GSAP + ScrollTrigger et un défilement lissé.