orbit-poster-editorial

Orbit poster editorial

Une page d'accueil qui ressemble à une série d'affiches de voyage imprimées devenues vivantes. Les sections alternent entre fond sombre (encre) et fond clair (papier) ; la typographie est énorme et serrée ; un seul accent orange porte chaque action. Le héros est un petit univers — une planète, des orbites et des cartes en papier — qui s'incline vers la souris. Plus bas, les photographies réelles ne sont pas placées dans des boîtes mais imprimées dans les affiches : en niveaux de gris, multipliées sur la couleur du papier, sous des lettres géantes, jusqu'à ce que le visiteur survole et que la couleur revienne.

La construction de référence se trouve dans example/index.html (Atlasio, une marque de voyage fictive, en anglais). Le code détaillé est dans references/components.md ; screenshots/ montre chaque section sur desktop et mobile.

1. Avant de concevoir

1. Collectez 6 à 8 photographies avec des personnes en mouvement (gares, tableaux, routes, fenêtres). Attribuez à chacune un seul rôle : une petite impression dans le héros, une par état d'affiche, une par carte de support. N'utilisez jamais deux fois la même photo.
2. Vérifiez chaque photo pour les logos et écrans tiers (publicités aéroportuaires, panneaux de marque) et recadrez-les.
3. Choisissez quatre « possibilités » pour le sélecteur d'affiches (façons de voyager, villes, programmes, saisons) et quatre étapes pour la console d'itinéraires. Chacune nécessite un titre d'affiche d'un mot, un titre de deux lignes, une phrase et un exemple concret (« Paris → Vienne en train de nuit »).
4. Compressez les photos (voir §5). Les sept photos de l'exemple pèsent ensemble environ 750 Ko.

2. ADN visuel

Élément	Règle
Encre	#101b22 page ; papier texte #edece4 ; atténué #9ca6a8 ; traits fins #ffffff20.
Papier	#edece4 sections claires avec teintes d'affiche : sauge #cbd4b2, argile #d8c4b5, brume #c0cfce, lilas #c9c2d3 ; cartes de support #dbe1cd et #e5d5c6.
Accent	Un orange #ff6c3a (planète, disques solaires, bandeau, onglet actif, section finale). Un vert lime pâle #c6d9ab/#c2d3a3 uniquement pour le point final du titre et le numéro d'itinéraire.
Typographie	DM Sans 800–1000 pour l'affichage (espacement des lettres -.065 à -.09em, hauteur de ligne .8–1) ; 400–700 pour le texte. IBM Plex Mono 6–9px en majuscules pour chaque étiquette, coordonnée et sourcil.
Titre	Trois lignes empilées : pleine, contourée (-webkit-text-stroke:1px), orange ; chaque ligne se déplace différemment avec la souris.
Photos	Dans les affiches et cartes de support : grayscale(1) contrast(1.1) + mix-blend-mode:multiply sur une carte isolée teintée ; le survol restaure la couleur et agrandit à 1.04. Les petites impressions (héros) restent en couleur avec une bordure papier.
Formes	Coins carrés partout sauf planète, disques solaires, orbites, pastilles du sélecteur.
Curseur	Un anneau de 30 px avec un point, mix-blend-mode:difference ; s'agrandit sur les liens. Les boutons magnétiques dérivent vers le pointeur.

3. Motifs des sections

1. En-tête – marque mot, un lien mono « édition », trois ancres, un bouton de mouvement (MOTION ON/OFF), un CTA bordé, burger en dessous de 650 px. Une barre de progression de lecture orange de 2 px se trouve en haut de page.
2. Héros – ligne méta mono, le titre en trois lignes, un astérisque étoile, deux lignes de texte, un lien souligné, une petite impression. À droite : l'univers en orbite (planète avec anneaux de latitude/longitude et un mot de deux lettres, trois orbites, satellites, étiquettes mono pivotées) et trois cartes flottantes : billet de destination (clic cyclique entre les quatre possibilités), carte de tampon de passeport, impression photo. Barre du bas : lien de défilement, astuce « bougez la souris », numéro de volume.
3. Bandeau – bande orange pleine largeur pivotée de −1,6°, mots énormes séparés par des glyphes étoiles.
4. Possibilités – titre avec une phrase grise au milieu, sélecteur en pastilles, puis un tableau à deux colonnes : l'affiche (ligne de coordonnées, photo fusionnée, disque solaire, mot géant, étiquette en bas) et les détails (grand numéro, sourcil, titre, texte, « un itinéraire pour commencer », bouton encre, avertissement mono). L'affiche s'incline en 3D avec la souris.
5. Console d'itinéraires – section sombre, titre avec une phrase orange, quatre onglets en rangée bordée (onglet actif orange), panneau avec un grand numéro vert lime à l'intérieur d'une ellipse en orbite lente et le texte de l'étape ; une ligne « déverrouiller » en dessous.
6. Support – grande étoile rotative + titre bicolore ; deux cartes (libre-service et conseiller payant) chacune avec une photo fusionnée, une lumière suivant le curseur et un lien souligné ; une ligne « apprendre une langue » avec un mot orange.
7. Appel final – section orange pleine avec une grille, un lien géant de deux lignes (« Et maintenant, où ? ») avec une flèche qui bouge au survol, une courte promesse, un bouton encre et une ligne mono d'itinéraire.
8. Pied de page – marque mot, une phrase de deux lignes, liens ; une ligne mono en bas avec une note honnête lorsque la marque est fictive.

4. Effets signatures

• Champ de souris : sur pointermove dans le héros, définissez --px/--py (−1…1) sur :root ; les lignes du titre, les cartes flottantes et le système d'orbite 3D les lisent via translate3d/rotateX/Y avec différents multiplicateurs, adoucis par une transition .6s cubic-bezier(.16,1,.3,1). Un affichage en direct des coordonnées X 050 / Y 050 se met à jour.
• Réseau de particules : un canevas de 65 points en mouvement (25 sur téléphone) liés lorsqu'ils sont distants de moins de 95 px ; les points sont repoussés à moins de 120 px du pointeur et des lignes oranges le connectent dans un rayon de 180 px. Ne s'exécute que lorsque le héros est visible et que le mouvement est activé.
• Affiches photo fusionnées : la photo est une <img> positionnée absolument à z-index:-2 dans une affiche isolation:isolate ; le niveaux de gris + multiplication l'imprime dans la couleur de l'affiche, le disque solaire se multiplie par-dessus, le mot géant se trouve au-dessus. Le changement de possibilité dissout l'ancienne photo (.swap), échange src, dissout la nouvelle au load, et change la teinte de l'affiche ainsi que la couleur du soleil via un attribut data-theme.
• Cartes inclinées + lumière du curseur : les affiches et les cartes de support pivotent jusqu'à ~7–9° vers le pointeur et exposent --cx/--cy pour un surlignage radial.
• Onglets accessibles : les onglets d'itinéraires utilisent role="tablist", tabindex mobile, touches fléchées/Home/End.
• Bouton de mouvement : un bouton met en pause toutes les animations et remet le champ de souris à zéro ; prefers-reduced-motion et les pointeurs grossiers désactivent automatiquement les mêmes choses.

5. Règles de construction

• Photos : ffmpeg -i in.jpg -vf scale=1400:-2 -q:v 5 out.jpg (impression héros ~900 px de large). Recadrez logos et écrans : -vf "crop=w:h:x:y,scale=1100:-2". Gardez chaque photo sous ~170 Ko.
• HTML autonome avec doctype, charset et viewport ; polices depuis Google Fonts ; symboles SVG inline pour flèches et étoiles ; aucune autre dépendance.
• Chaque photo a un véritable alt décrivant la scène, sauf les photos d'affiche, qui sont décoratives (alt="", aria-hidden) car le mot de l'affiche et les détails portent le sens.
• Mobile : le héros s'empile, l'univers se réduit à ~66 %, les cartes rétrécissent avec leurs propres transformations, les mots d'affiche descendent à 22vw avec word-break:normal, les onglets deviennent une grille 2×2, l'anneau du curseur et l'inclinaison sont désactivés.
• Pas de défilement horizontal à 390 px ; lien de saut ; contour :focus-visible visible.

6. Rédaction du texte

• Déclarations courtes par trois : « Venez avec un rêve. Repartez avec un plan. » « Trouvez l'endroit. Tracez votre propre itinéraire. »
• Les étiquettes mono parlent comme une édition imprimée : 01 / POSSIBILITÉS, MODE 02 / AIR · LOIN DEMAIN MATIN.
• Les exemples doivent sembler réels mais être marqués comme exemples ; les règles légales ou d'entrée renvoient toujours à la source officielle.

7. Liste de vérification finale

• Chaque photo est utilisée une fois, créditée, recadrée sans logos tiers et compressée.
• Le héros s'incline avec la souris ; la carte de destination et « une autre possibilité » cyclent les quatre états en synchronisation avec l'affiche.
• Le changement de photo d'affiche se fait sans flash de l'ancienne image ; la couleur revient au survol.
• Les onglets d'itinéraires fonctionnent au clavier.
• Le bouton de mouvement, la réduction de mouvement et le tactile arrêtent tous le champ de souris, le canevas, le bandeau et l'inclinaison.
• 390 px : pas de coupure de mot dans les titres d'affiche, pas de défilement horizontal, pas d'erreur dans la console.
• Captures d'écran régénérées : node scripts/screenshots.mjs example screenshots.