ULTIMATA
EN Se connecter S’inscrire
← La bibliothèque

Orvane Research

Site d’une page pour un institut de recherche ou un laboratoire

Template complet Réservé aux membres Ouvrir la démo
Aperçu du template Orvane Research : sur fond noir, un attracteur de Lorenz doré en forme de papillon, le titre « Orvane Research » en très grand à droite et une ligne d’état en petites capitales dans l’en-tête.

Ce que c’est

Un site vitrine d’une page pour un institut de recherche : accueil, déclaration d’intention, présentation, archive de trois travaux, trois conditions expérimentales, manifeste, pied de page avec inscription. Une seule page, un seul fichier HTML.

Ce qui fait ce site, c’est son fond. Un attracteur de Lorenz — le système d’équations qui a donné son nom à l’effet papillon — est intégré une fois au chargement en 20 000 points, puis redessiné à chaque image au canvas 2D. Rien ne bouge dans la figure : c’est la caméra qui vole, d’un cadrage à l’autre, au rythme du défilement. Cinq cadrages, mélangés selon la part de chaque section déjà entrée à l’écran.

Le design vient d’un site Next.js dont seules les images et la structure ont été gardées. Tout le reste a été réécrit : le runtime React et Turbopack (700 Ko répartis sur dix fichiers), le CSS compilé par Tailwind, la bibliothèque de défilement Lenis, l’optimiseur d’images qui n’existe pas hors de son hébergeur, et le wrapper qui met la page entière à l’échelle avec un transform: scale() recalculé en JavaScript.

Ce que tu changes en premier

Les couleurs — quatre lignes

Tout en haut de assets/css/style.css :

--encre:  #0c0c0d;            /* le fond, et le texte sur la section claire */
--papier: #f2f2f2;            /* la section claire et les fiches d’archive */
--accent: rgb(218, 132, 10);  /* le point qui remplace le curseur */
--focus:  #f5e100;            /* l’anneau de focus sur fond sombre */

Deux choses à savoir avant de toucher au reste. D’abord, la couleur du fond animé n’est pas un jeton CSS : elle est calculée point par point dans field.js, entre rgb(55,30,2) en bas de la figure et rgb(255,185,12) en haut. Ensuite, l’anneau de focus a besoin de deux valeurs : le jaune tient à 14,6:1 sur le fond noir et tombe à 1,2:1 sur la section claire, où il disparaît. C’est --focus-clair qui prend le relais là-bas.

Le nom

Cherche « Orvane Research » dans index.html. Aucune classe CSS ne contient la marque : un rechercher-remplacer ne peut rien casser. Restent les deux SVG du logo, dans assets/img/.

Les tailles

L’échelle typographique est déclarée une fois en haut, puis redéclarée à chacun des trois points de rupture. Un titre n’a donc jamais sa propre media query : tu changes --t-heros et le grand titre suit partout. Si tu te retrouves à écrire une @media ailleurs dans la feuille, c’est probablement qu’il te manque un jeton.

Les quinze effets, et comment ils sont faits

Tous relevés dans le bundle JavaScript de l’original — durées, courbes, décalages, constantes de l’attracteur — puis réécrits sans dépendance. Rien n’a été estimé à l’œil.

EffetOùComment
Attracteur de Lorenzfond, plein écrancanvas 2D, σ=10 ρ=28 β=8/3, 20 000 points, composite screen
Vol de caméraidem5 cadrages mélangés par la progression d’entrée de chaque section
Traînées lumineusesidem4 comètes de 180 segments qui avancent le long de l’orbite
Réaction au pointeuridemcaméra décalée de ±8 px, points repoussés dans un rayon de 160 px
Zoom d’ouverturele fondscale(1.05 → 1) et opacité, 1 s
Fondu de l’en-têteen-têteopacité 0 → 1 en 0,6 s, après 0,4 s d’attente
Fondu de l’accrocheaccueilopacité 0 → 1 en 0,5 s, après 1,4 s d’attente
Machine à écrire10 étiquettesun caractère toutes les 50 ms, largeur figée avant de vider
Apparition ligne par lignetous les grands titresle script relève où le texte s’est coupé, masque chaque ligne, la fait monter
Empilement de l’archive3 fichesscène de 800 px maintenue sur 2 400 px de scroll, trois tiers adoucis
Parallaxe des colonnesles 3 conditionstrois vitesses : 0,06, 0,11 et 0,16 de l’écart au centre de l’écran
Bascule de l’en-têtesur la section clairele texte et le logo passent en noir en 250 ms
Horloge de Berlinen-têteIntl.DateTimeFormat, deux-points éteint une seconde sur deux
Brouillage des liens3 liens de navlettres tirées au hasard, une se fixe toutes les 4 images
Bouton à double face« Request Access »deux calques qui glissent de ±100 %, la flèche change de côté

Ce qu’il faut savoir

  • Aucune requête externe. Toutes les requêtes du chargement sont locales, polices comprises. L’original chargeait dix fichiers JavaScript et passait ses images par un optimiseur d’hébergeur.
  • Sans JavaScript, rien n’est caché. L’état masqué de l’apparition au scroll porte sur un élément que seul le script crée : tant qu’il n’a pas tourné, il n’y a rien à démasquer. Vérifié en retirant les balises <script> : 13 titres sur 13, 32 paragraphes sur 32, les 3 fiches d’archive en liste, et 0 masque posé.
  • Zéro style et zéro script en ligne. Le template respecte la politique de sécurité stricte du site, vérifiée en servant le dossier avec l’en-tête, pas supposée.
  • Le déclencheur est à 15 % du bas de l’écran, mesuré sur l’écran et non sur l’élément comme dans l’original. Un seuil exprimé en fraction de l’élément ne se déclenche jamais pour un bloc plus haut que la fenêtre — et un bloc entre visiblement au lieu d’avoir fini avant d’être vu.
  • Accessibilité : lien d’évitement, navigation nommée, message du formulaire en role="status", décorations masquées aux lecteurs d’écran, focus visible sur les deux fonds, et prefers-reduced-motion qui pose les états finaux immédiatement — délais compris.
  • Le curseur natif n’est masqué que s’il y a une souris. La règle est conditionnée à (pointer: fine) et au premier vrai mouvement. Sur écran tactile, ou sans JavaScript, le curseur du système reste.
  • Responsive vérifié à 390, 1440 et 2560 px, au chargement comme pendant tout le défilement, sans débordement horizontal.

Ce qui n’est pas parfait

Autant le dire ici plutôt que te le laisser découvrir.

  • Le fond coûte cher : 20 000 courbes redessinées à chaque image, soit environ 26 images par seconde sur une machine de bureau. C’est exactement le coût de l’original, mesuré côte à côte dans le même navigateur (26 contre 27). Le levier est la constante POINTS dans field.js : à 8 000 la fluidité double et la figure s’éclaircit.
  • Le wrapper d’échelle n’a pas été repris. L’original ne fait pas de responsive : il dessine à largeur fixe puis met tout à l’échelle en JavaScript, jusqu’à +33 % sur un écran large. Ce template reflow. Aux quatre largeurs de référence les deux pages sont identiques au pixel ; entre les paliers et au-delà de 1440 px, l’original zoome et celui-ci non.
  • Le défilement inertiel est une version simplifiée. L’original embarque une bibliothèque de défilement virtuel de 15 Ko. Ici la molette pousse une cible et la page la rattrape, en une trentaine de lignes. Clavier, barre de défilement, ancres et tactile continuent de fonctionner normalement ; la sensation au pavé tactile est un peu moins fine.
  • Le canvas est rendu à un pixel pour un pixel, comme l’original : sur un écran à haute densité les traits sont légèrement adoucis. Une ligne à changer, pour 8 % d’images par seconde en moins.
  • Les images viennent du site d’origine et leur licence est inconnue. Elles sont là pour montrer la mise en page ; remplace-les avant de publier. Les polices, Funnel Display et Space Mono, sont sous licence SIL Open Font et se redistribuent librement — vérifié à la source.

Prends-le, ouvre-le, casse-le.

Orvane Research est gratuit. La bibliothèque complète — les autres templates et les composants — est incluse dans l’abonnement, avec la formation.

Je commence maintenant — 29 €/mois

Accès immédiat · Sans engagement · Annulation en 1 clic