Un objet, un monde.
Choisir un sujet central que l'on peut explorer. Ici, la voiture est un objet d'observation. La 3D ouvre la visite et répond directement au geste.
DU CARACTÈRE.
PAS UNE RECETTE.
Un système pour composer des expériences qui ont quelque chose à raconter. Il fixe le rythme, les contrastes et les comportements. Chaque projet apporte sa matière.
CHAQUE GESTE
A UNE RAISON.
Composer le contraste.
Alterner une scène dense, une archive typographique, une photographie et un moment calme. Le rythme se construit à l'échelle de la page.
Faire sentir la matière.
Employer des sujets réels et une lumière cohérente. Le passage au filaire révèle la construction du même objet, sous le même angle.
Écrire peu, juste.
Des titres précis. Des légendes utiles. Les informations de navigation restent lisibles et les grandes lettres portent l'identité.
Garder la main.
Le scroll appartient au visiteur. Les mouvements se mettent en pause. Le clavier et les liens restent des chemins complets.
Laisser respirer.
Les traits séparent, l'espace organise. Les blocs n'ont pas tous besoin d'une boîte. Les changements de fond marquent les chapitres.
GRAPHITE.
CRAIE. SIGNAL.
Le graphite accueille la matière. Le blanc froid porte la lecture. L'orange marque une intention : un titre, une action ou une transition de chapitre.
Graphite
--ink
#101211Surface
--surface
#191C1ACraie
--paper
#E5E8DDSignal
--signal
#FF6536Secondaire
--muted
#A7AEA4Utiliser l'orange sur graphite, ou le graphite sur orange. Réserver les textes secondaires à des fonds stables. Les légendes photographiques gardent un voile sombre derrière elles.
UNE VOIX.
TROIS REGISTRES.
LA CURIOSITÉ
COMME MOTEUR.
Une présence verticale, des lignes courtes, un interligne proche du corps. Les titres grandissent avec l'écran, sans réduire la lisibilité des commandes.
La route comme point de départ.
L'espace comme horizon.
Corps courant : 16 px minimum. Les phrases s'installent dans des colonnes de 40 à 65 caractères. Les libellés d'action restent à 14 px minimum.
OBJET / 01 — ÉDITION 001 — 2026
12 px pour les informations secondaires. Les chiffres créent un fil de lecture, sans simuler des mesures ou des données en direct.
8 · 16 · 24 · 32
Base de 8 px, puis 48, 64 et 96 px entre les grands ensembles. La marge extérieure va de 20 à 72 px selon l'écran.
Décalage assumé.
Une colonne porte le titre, l'autre peut commencer plus bas. Le titre, le texte et les commandes occupent des lignes de grille distinctes. L’objet peut passer devant le titre ; la colonne de lecture garde son propre espace. Sur mobile, ces éléments se suivent naturellement.
Un trait suffit.
Traits de 1 px. Coins droits. Les cercles servent aux actions directionnelles. Les photographies ont des cadres francs.
LES PIÈCES
DE L'ATELIER.
Ces exemples utilisent les mêmes classes et les mêmes variables que le portfolio. Le système et son application évoluent ensemble.
A / INDEX ÉDITORIAL — SURVOLER OU UTILISER TAB02MOTOÀ même la route
B / NAVIGATION — ACTION ET DIRECTIONExplorer mes univers
C / CHOIX EXCLUSIF — SÉLECTIONNER UN REGISTRE
Matière — lumière, surface, reflets.
D / OBJET INSPECTABLE — L'INTERACTION RÉVÈLE LA CONSTRUCTION
Les 51 pièces automobiles s’écartent autour de trois ensembles mécaniques : bloc V8 fermé, boîte et transmission, échappement. Le gros plan montre les mêmes ensembles et permet de les écarter d’un seul tenant. Le volant et l’habitacle restent solidaires ; les roues s’écartent sur leurs axes. Les volumes mécaniques sont simplifiés, sans détail interne. Au clic, un enregistrement réel de Ferrari 458 accompagne les vibrations.
Passer sous le capot ↗ · Source du son ↗E / CAS PROJET — BESOIN, APPROCHE, RÉSULTAT
Une image ou une composition typographique forte, un nom précis, des compétences explicites et un détail ouvrable. Le statut et les résultats reposent sur des faits. La lecture complémentaire s’ouvre dans un panneau dédié : la page conserve sa hauteur et sa position. Le titre et la fermeture restent visibles ; Échap retrouve le déclencheur. Sur mobile, le panneau occupe l’écran. Les images peuvent être agrandies dans cette même lecture.
Voir Papyrus, la vision et le stage ↗F / RÉCIT DE CONSTRUCTION — IDÉE, CODE, PRODUIT
Trois états accessibles par boutons présentent les décisions et les essais. Un carnet facultatif s’ouvre dans le panneau de lecture. Le récit compact garde les mêmes repères sur grand et petit écran.
Parcourir la démarche ↗LE CODE
PREND LE VOLANT.
Un circuit isométrique sinueux au milieu des arbres. Deux caméras rapprochées, sept rapports, transfert de charge et adhérence partagée entre freinage et virage. Le son de la 458 suit le régime, la carrosserie réagit et les roues tournent. Une reconnaissance automatique permet de lire le circuit avant de viser un chrono. Le même langage visuel accompagne un jeu : les commandes restent visibles, le décor porte le caractère et chaque état de course est explicite.
Jouer à M/ CircuitLE SCROLL
DONNE LE TEMPO.
Une traversée en profondeur relie les quatre projets. Le scroll natif écarte les documents, puis fait pivoter la scène vers le projet suivant. « Écarter les plans » permet de regarder sa construction ; les liens supérieurs rejoignent directement chaque projet. « Vue liste » et le mode réduit rendent la sélection au document. Les dossiers conservent leur lecteur stable.
SCROLL / RÉVÉLATION PAR MASQUE
UNE INTENTION.DU MOUVEMENT.
Revenir en arrière rejoue le geste. Le défilement reste natif. Sur mobile, les déplacements diminuent ; en mode réduit, la lecture reste fixe.
Retour immédiat d'une commande.
Accélération courte, arrivée progressive.
Interaction d'abord.
La 3D suit le geste avec un léger amorti. Un changement de mode conserve le point de vue pour comparer le même objet.
Une pause visible.
La rotation automatique peut être arrêtée. Elle démarre arrêtée lorsque la réduction des mouvements est demandée.
Un coût maîtrisé.
Le rendu 3D s'interrompt hors écran et lorsque l'onglet est masqué. Le contenu reste disponible si la scène échoue.
EMPORTER
LA GRAMMAIRE.
Reprendre les tokens, les comportements et la logique de composition. Choisir ensuite un sujet, une matière et un geste propres au nouveau projet.
La galerie et le ZIP sont reconstruits depuis les composants actuels : traversée des projets, fiches avec preuves, démo Papyrus, carnet de décisions, collaboration et contact. Polices et dépendances incluses. Le jeu 3D et son audio restent hors du kit.
Emporter les composants 0.39 Télécharger les tokens CSS Télécharger le guide Ouvrir la galerie des composants Télécharger les styles
<link rel="stylesheet" href="tokens.css">
<link rel="stylesheet" href="style.css">
<a class="universe-row" href="#projet">
<span class="row-number data">01</span>
<span class="row-title">MON SUJET</span>
<span class="row-descriptor">Une intention précise</span>
<span class="row-arrow" aria-hidden="true">↗</span>
</a>Atelier interactif.
Pour un objet à comprendre : une scène centrale, un geste simple, deux états comparables. Exemple vivant : l'accueil de ce portfolio.
Archive expressive.
Pour une sélection de travaux : grands titres, index numéroté, image associée et accès direct au contenu. Exemple : les univers.
Récit photographique.
Pour un voyage ou un sujet éditorial : image pleine surface, légende courte, puis respiration typographique. Exemple : moto et spatial.