The art of being French
Six petits rituels français, illustrés, dans une journée qui prend son temps.
Le vrai site, dans le cadre : faites-le défiler pour le visiter.
Une affiche qui se déroule. The art of being French raconte une journée en six scènes, de la baguette entamée sur le chemin du retour au dernier verre qu'on prolonge : croissant à 9 h 12, terrasse à 11 h 46, pétanque à 16 h 08, pastis à 18 h 32. Chaque scène occupe l'écran entier, se cale sur la précédente au défilement, et se lit comme une page imprimée : titre monumental, illustration au centre, deux colonnes de commentaires sur les côtés. Le curseur est un croissant. Rien ne se vend, il n'y a rien à cliquer : on descend, c'est tout.
- 01
Une vidéo à fond transparent, et son repli
L'en-tête est un WebM VP9 avec canal alpha. Safari et iOS ne savent pas le décoder : ils reçoivent une copie H.264 opaque, choisie au chargement. La page, elle, ne change pas d'un pixel.
- 02
Le titre est mesuré, pas réglé
Les deux lignes sont posées à 100 px, la plus large est mesurée, et la taille finale s'en déduit pour qu'elles touchent exactement les deux marges. Recalculé une fois la police chargée et à chaque redimensionnement : aucune valeur écrite à la main, aucune casse d'une fenêtre à l'autre.
- 03
Des sections épinglées sans casser les ancres
Chaque scène se fige le temps que la suivante monte par-dessus. Des repères invisibles restent dans le flux normal pendant l'épinglage, si bien que la navigation par chapitres et le suivi du sommaire continuent de tomber juste. `?parallax=0` rend la page à son défilement ordinaire.
- 04
Les illustrations sont réencrées en SVG
Un filtre par scène isole le bleu de l'encre avec une matrice de couleur, lui applique ses propres courbes canal par canal, puis recompose le reste du dessin. Posé en fusion multiplicative sur la toile crème, il a l'air imprimé dessus et non collé par-dessus.
- 05
Deux langues sans rechargement
La version anglaise est une table de sélecteurs appliquée à la volée, pas une seconde page à maintenir. Le nom du site ne bascule pas : il est déjà en anglais.
- 06
Le mouvement s'arrête tout seul
Réglage système de mouvement réduit, ou onglet passé en arrière-plan : dans les deux cas la vidéo se met en pause et l'empilement des scènes ne se déclenche pas.
L'aperçu de cette page est-il le vrai site ?
Oui, c'est le site lui-même, rendu en direct dans le cadre. Dans la vignette du catalogue, seul son en-tête est visible : la vidéo tourne, le curseur en croissant et les survols répondent, mais la molette continue de descendre la page du studio.
Ça se lit sur téléphone ?
Oui. Les scènes se remettent en colonne et l'empilement s'efface. Le curseur en croissant, lui, n'existe que là où il y a une souris.
Les illustrations viennent d'où ?
Elles ont été produites pour ce site, avec le même duo de personnages d'une scène à l'autre, puis détourées et réencrées à l'atelier. Ni photo, ni rendu 3D : c'est une règle du projet.
Et si on n'aime pas les animations ?
Le site suit le réglage de mouvement réduit du système : la vidéo se met en pause et l'empilement des scènes ne se déclenche pas.
Bloomwise
