Agency Website . Corporate . Portfolio

Marcel agency

Site institutionnel pour l'agence Marcel : direction artistique minimaliste, animations WebGL discrètes et navigation immersive conçue pour mettre en valeur les projets et la culture de l'agence.

Rôle
Senior Frontend Developer
Année
2023
Durée
6 mois
Stack
Next.jsWebGLGSAP
Marcel website hero
Contexte

Vue d'ensemble

L'agence Marcel voulait renouveler son site web afin de mettra à jour son design.

Le défi

Problématiques

  • 01Animations sobres et élégantes
  • 02Transitions de page fluides
  • 03Animation des fonds via des formes colorées et changeantes
Marcel works
Marcel work detail page
Marcel works galery
Marcel people page
Marcel about us page
L'approche

Solution mise en œuvre

L'utilisation de scènes WebGL intégrées au DOM permet de gérer les animations de fonds de couleur.

  • ↳Shaders GLSL custom pour les animations de fonds colorés
  • ↳Variable font pour les animations de lettrage
  • ↳GSAP pour le reste des animations
Résultats

Impact mesuré

fps
Sur desktop & mobile récent
Performance Lighthouse
s
Largest Contentful Paint
Projet suivant — 05 / 05
Haribo PikBoxing ↗