Aller au contenu principal

slug: "motherload" ref: "S6_V01" title: "Motherload" year: 2025 client: "Projet personnel d'Olivier Cloutier" typology: "Vitrine portfolio" stack: ["Next.js", "TypeScript", "Recherche graphique"] hosting: "Local · Itération v2" duration: "Itération continue" abstract: "Itération v2 du projet personnel d'Olivier Cloutier. Exploration technique d'interfaces, terrain d'essai pour les composants qui finissent dans les chantiers clients." status: "vitrine" category: "vitrine"

Motherload

Année
2025
Client
Projet personnel
Référence
S6_V01
Typologie
Vitrine
Itération
v2
Code
~/_Projets_Dev/motherload-v2

Motherload est le terrain d'essai d'Olivier Cloutier — itération v2 d'un projet personnel qui sert de fonderie pour les composants qui finissent ensuite dans les chantiers clients du studio.

Pourquoi un projet personnel

Un studio confidentiel a besoin d'un endroit où essayer sans contraintes. Motherload tient cette fonction depuis 2024 : laboratoire de pratique pour les patterns d'animation, banc d'essai des nouveaux paquets npm, et vitrine pour montrer que la stack tient sur des sujets de notre choix et pas seulement sur ceux des clients.

L'itération v2 a porté sur trois axes : ré-architecture de l'arborescence App Router, intégration de View Transitions API native avant que le pattern ne stabilise dans la communauté Next.js, et exploration des shaders WebGL en arrière-plan léger.

Ce que le projet a donné aux chantiers clients

  • La logique de défilement Lenis utilisée dans studiosixieme.com y a été testée d'abord
  • Le pattern d'animation split-type + GSAP expo.out du Hero du studio est issu d'un essai motherload
  • Le composant MarqueeReactive qui défile au rythme de la vélocité scroll est une reprise directe
  • La discipline du prefers-reduced-motion à trois niveaux (CSS + JS + composant) vient des erreurs faites ici
Suivant →

Simuvaction