The art of being French
Six petits rituels français, illustrés, dans une journée qui prend son temps.
Le site, en direct
Le vrai site, dans le cadre : faites-le défiler pour le visiter. Sortez du cadre pour reprendre la lecture de cette page.
Points forts
Un en-tête qui marche
Le personnage traverse le titre avec sa baguette entamée, en boucle, sur fond transparent. C'est une vidéo, pas une animation dessinée : elle démarre seule et s'arrête si le visiteur a demandé moins de mouvement.
Le titre à la largeur exacte
Les deux lignes du titre sont mesurées une fois la police chargée, puis mises à la taille qui les fait toucher les deux marges. Aucune valeur écrite à la main, aucune casse d'une fenêtre à l'autre.
Les scènes s'empilent
Chaque section se fige le temps que la suivante monte par-dessus, avec une dérive de quelques dizaines de pixels. La navigation par chapitres continue de tomber juste : des repères invisibles restent dans le flux normal pendant que les sections sont épinglées.
Des illustrations détourées, puis réencrées
Les dessins sont détourés puis repassés par des filtres SVG qui séparent le bleu de l'encre du reste, teinte par teinte. Posés en fusion multiplicative sur la toile crème, ils ont l'air imprimés dessus.
Un curseur en croissant
Sur ordinateur, la flèche est remplacée par un croissant. C'est le seul ornement du site, et il sert aussi d'icône ici.
Deux langues, un seul titre
Le texte bascule du français à l'anglais depuis le pied de page, sans rechargement. Le nom du site, lui, ne change jamais : il est déjà en anglais.
Sans cadre de travail
Du HTML, du CSS et trois scripts. Le site est publié en fichiers statiques, sans dépendance et sans étape de compilation à part la copie.
Questions
- 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.
Stack technique
- HTML
- CSS
- JavaScript
- Vercel