Neuf animations d'entrée de section, chacune vivant dans section-anim.js sous la même interface — play, reset, resize, destroy — et n'utilisant que gsap déjà booté par portfolio/motion.js. La dixième, Orbite, est différente : c'est le carrefour du site (voir /), isolé ici sous la même mécanique d'écran unique.
01Prototypé
Broken Glass
Le cadre se fissure en 20 éclats SVG disposés autour du périmètre, avec quelques lignes de fracture qui filent vers le centre.
DéclencheEntrée du bloc dans le viewport (IntersectionObserver).VuDes éclats triangulaires qui se referment vers le centre en cascade, dans un ordre légèrement aléatoire.TechSVG · 20 fragments · stagger aléatoireCoûtMoyen — géométrie recalculée à chaque resize, mais pas de canvas à redessiner par frame.PortfolioFort pour une accroche de section ponctuelle — trop marqué pour un usage répété sur la même page.
02Prototypé
Industrial Scan
Un cadre technique se dessine — bords tiretés, coins en équerre, rampe de graduations — puis un balayage lumineux traverse le bloc de haut en bas.
DéclencheEntrée du bloc dans le viewport (IntersectionObserver).VuBordures et graduations qui apparaissent en premier, puis une bande lumineuse qui balaye le contenu.TechDOM · arêtes tiretées · balayageCoûtFaible — que des éléments DOM statiques, rien à recalculer par frame.PortfolioFort pour une section technique ou un HUD — le vocabulaire visuel est déjà celui du reste du site.
03Prototypé
Organic Reveal
Une tache d'encre organique grandit depuis un coin et dévoile le contenu derrière elle, contour flou plutôt que net.
DéclencheEntrée du bloc dans le viewport (IntersectionObserver).VuUne forme irrégulière qui s'étend en respirant légèrement, jusqu'à couvrir tout le cadre.TechCanvas · destination-out · blurCoûtMoyen — redessiné par frame le temps de la révélation, mais léger (une seule forme, pas de particules).PortfolioFort et singulier — se démarque des transitions géométriques déjà nombreuses ailleurs sur le site.
04Prototypé
Glitch Frame
Le cadre se découpe en 7 tranches horizontales qui rentrent en place indépendamment, pendant que deux doublures colorées se désalignent puis se rejoignent.
DéclencheEntrée du bloc dans le viewport (IntersectionObserver).VuUn effet de dédoublement chromatique bref (accent + encre) qui se résorbe en un cadre net.TechDOM · 7 tranches · dédoublementCoûtFaible — 9 éléments DOM fixes, aucune géométrie recalculée en boucle.PortfolioMoyen : lisible et technique, mais à réserver à un contexte qui assume le vocabulaire « erreur/signal ».
05Prototypé
Wireframe
Un volume filaire (12 arêtes, perspective CSS) s'aplatit progressivement jusqu'à se confondre avec le plan du cadre.
DéclencheEntrée du bloc dans le viewport (IntersectionObserver).VuUne boîte 3D en fil de fer qui perd sa profondeur et devient un rectangle plat.TechCSS 3D · 12 arêtes · aplatissementCoûtMoyen — la 3D CSS est peu coûteuse, mais sensible aux erreurs de perspective sur petits écrans.PortfolioFort pour une section qui parle de structure ou d'architecture — le concept illustre littéralement l'idée.
06Prototypé
Particle Assembly
Des particules dispersées convergent vers des points échantillonnés sur le contenu et le recomposent, comme un nuage qui se condense en texte.
DéclencheEntrée du bloc dans le viewport (IntersectionObserver).VuUn nuage de points qui se rassemble en glyphes lisibles.TechCanvas · glyphes échantillonnésCoûtÉlevé — nombre de particules proportionnel à la densité de texte, à surveiller sur mobile.PortfolioTrès fort pour un titre d'accroche isolé — trop coûteux pour plusieurs blocs sur la même page.
07Prototypé
Shattered Reveal
Le contenu est cloné en 8 bandes découpées en dents de scie, dispersées puis réalignées jusqu'à ne plus faire qu'un bloc net.
DéclencheEntrée du bloc dans le viewport (IntersectionObserver).VuDes lignes de texte qui semblent déchirées puis qui se recollent en place.TechDOM · clones clippés · réalignementCoûtMoyen à élevé — chaque bande clone le DOM réel du bloc, donc son coût suit celui du contenu.PortfolioFort pour un bloc de texte éditorial — l'effet reste lisible, contrairement à des concepts plus abstraits.
08Prototypé
Liquid Glass
Une bande de verre dépoli (backdrop-filter) balaye le cadre en biais pendant que le contenu se révèle derrière elle par un clip-path progressif.
DéclencheEntrée du bloc dans le viewport (IntersectionObserver).VuUn reflet flouté qui glisse sur le contenu, laissant le texte net derrière son passage.Techbackdrop-filter · clip-pathCoûtÉlevé — backdrop-filter est cher à composer, à limiter à une bande étroite et à un seul passage.PortfolioFort visuellement mais à tester sur les GPU faibles avant un usage répété.
09Prototypé
Chevron Mosaic
Une maille de triangles en chevrons se dévoile depuis le centre vers les bords, chaque triangle rejoignant sa place avec un délai qui dépend de sa distance à l'axe.
DéclencheEntrée du bloc dans le viewport (IntersectionObserver).VuUn masque en dents de scie qui se résorbe du centre vers les bords, en V inversé.TechSVG · maille triangulaire · masque chevronCoûtMoyen — nombre de triangles proportionnel à la largeur de l'écran, calculé une fois au build.PortfolioFort pour une bannière ou un hero — motif directement réutilisable comme élément de marque.
10Prototypé
Orbite
Le carrefour du site (voir '/'), isolé ici pour l'étudier seul : deux nœuds tournent sur une ellipse en perspective, celui que le pointeur approche passe devant et ouvre sa fiche.
DéclencheEntrée du bloc dans le viewport (IntersectionObserver).VuDeux points qui orbitent devant un halo central ; le survol en avance un, révèle son panneau et son bouton d'entrée, un rideau couvre l'écran avant de partir.TechDOM · ellipse en perspective · rideau de sortieCoûtFaible — une boucle trigonométrique par nœud et par frame, aucun DOM recréé en cours de route.PortfolioC'est la page d'accueil réelle du site — vue ici hors contexte, seule, pour l'étudier sans le reste de la page.
1–9 et 0 ciblent un croquis · R rejoue · flèches parcourent
01
Broken Glass
Le contour se recolle depuis des fragments dispersés, puis deux fissures se propagent vers l'intérieur.
Vingt fragments SVG posés le long du périmètre, ramenés à leur place avec un décalage pseudo-aléatoire déterministe : le même ordre à chaque lecture.
Section 01
EXPERIENCE
Douze projets, deux ans, une seule ligne de conduite.
SVG · 20 fragments · stagger aléatoire
02
Industrial Scan
Le cadre se déclare arête par arête, se mesure, puis autorise le texte à s'afficher.
Arêtes tiretées, équerres d'angle, graduations et un balayage qui remonte : le relevé s'écrit avant le contenu.
Section 02
PROCESS
Cadrage, maquette, intégration, mise en ligne.
DOM · arêtes tiretées · balayage
03
Organic Reveal
Une nappe d'encre couvre la scène et s'ouvre depuis un point bas, bord irrégulier et liseré vivant.
Le canvas est gommé en destination-out ; le bord est flouté par ctx.filter — sans lui, sur Safari ancien, l'ouverture reste nette.
Section 03
ARCHIVE
Tout ce qui a été livré depuis 2023, par ordre d'entrée.
Canvas · destination-out · blur
04
Glitch Frame
Sept tranches décalées, un dédoublement chromatique très bref, puis un réalignement sec.
Le plus court de la série : deux salves de décalage, deux calques fantômes teintés, retour à zéro.
Section 04
MANIFESTE
Une page se juge à ce qu'elle laisse de côté.
DOM · 7 tranches · dédoublement
05
Wireframe
Un volume filaire se construit en perspective, puis s'aplatit sur le cadre de la section.
Douze arêtes en CSS 3D, aucune bibliothèque de rendu : la perspective retombe à plat sur le contour.
Section 05
STRUCTURE
Une grille, quatre colonnes, aucune exception.
CSS 3D · 12 arêtes · aplatissement
06
Particle Assembly
Les particules convergent sur deux cibles : le contour, et les glyphes du titre échantillonnés.
Le titre est rasterisé hors écran puis relu pixel par pixel : changer le texte change le nuage, et un titre très long fait beaucoup de particules.
Section 06
INDEX
Chaque entrée porte un numéro, une date, une discipline.
Canvas · glyphes échantillonnés
07
Shattered Reveal
La section entre déjà fragmentée : huit bandes obliques se réalignent sur leur propre contenu.
Huit clones du contenu, chacun clippé en bande ; une fois alignés, le vrai contenu reprend la main.
Section 07
TERRAIN
Relevés de site, photographies, notes de chantier.
DOM · clones clippés · réalignement
08
Liquid Glass
Une dalle de verre traverse le cadre ; tout ce qu'elle dépasse est révélé derrière elle.
backdrop-filter pour la matière, clip-path pour la révélation : la bande ne masque rien, elle ouvre.
Section 08
SEUIL
Le passage d'une page à l'autre appartient à la page.
backdrop-filter · clip-path
09
Chevron Mosaic
Une maille de triangles suspendue au bord haut : nulle à l'apex central, elle descend vers le milieu de l'écran sur les deux flancs.
Tuilage triangulaire posé en SVG, découpé par un masque en chevron dont la profondeur suit la distance au centre. La densité tombe le long de la diagonale : les triangles se raréfient au lieu de s'arrêter net.
Section 09
VERSANT
La maille tient le haut du cadre et laisse le texte respirer dessous.
SVG · maille triangulaire · masque chevron
s
Point d'entréeEntry point
Lakeust Works
Deux versantsTwo sides
Un studio, deux domaines. Choisis celui qui t'intéresse : le reste attendra son tour.One studio, two domains. Pick the one you came for; the other can wait.
Survole un versant →Hover a side →
01three.js · GSAP · WebGL
Lakeust Web
Sites, expériences temps réel et laboratoires d'interaction.Sites, real-time experiences and interaction labs.