The art of being French
Six small French rituals, illustrated, across a day that takes its time.
The real site, inside the frame: scroll it to explore.
A poster that unrolls. The art of being French tells one day in six scenes, from the baguette already bitten into on the walk home to the last glass nobody finishes: croissant at 9:12, café terrace at 11:46, pétanque at 16:08, pastis at 18:32. Each scene fills the screen, settles over the one before it as you scroll, and reads like a printed page: monumental headline, illustration in the middle, two columns of asides on either side. The cursor is a croissant. Nothing is for sale and there is nothing to click: you scroll, that is all.
- 01
A transparent-background video, and its fallback
The header is a VP9 WebM with an alpha channel. Safari and iOS cannot decode it: they get an opaque H.264 copy, chosen at load time. The page itself does not change by a pixel.
- 02
The title is measured, not set
Both lines are laid out at 100 px, the widest is measured, and the final size follows so that they touch both margins exactly. Recomputed once the font has loaded and on every resize: no hand-written value, nothing that breaks from one window to the next.
- 03
Pinned sections that do not break the anchors
Each scene freezes while the next one climbs over it. Invisible markers stay in the normal flow during the pinning, so chapter navigation and the table-of-contents highlight keep landing right. `?parallax=0` hands the page back to ordinary scrolling.
- 04
The illustrations are re-inked in SVG
One filter per scene isolates the blue of the ink with a colour matrix, applies its own per-channel curves to it, then recomposes the rest of the drawing. Multiply-blended onto the cream paper, it looks printed on it rather than pasted over it.
- 05
Two languages without a reload
The English version is a table of selectors applied on the fly, not a second page to maintain. The site's name does not switch: it is already English.
- 06
Motion stops on its own
The system's reduced-motion setting, or a tab sent to the background: in both cases the video pauses and the stacking of the scenes does not trigger.
Is the preview on this page the real site?
Yes, it is the site itself, rendered live in the frame. In the catalogue tile only its header shows: the video runs, the croissant cursor and the hover states answer, but the wheel keeps scrolling the studio page.
Does it read on a phone?
Yes. The scenes fall back into a column and the stacking is dropped. The croissant cursor only exists where there is a mouse.
Where do the illustrations come from?
They were produced for this site, with the same pair of characters from scene to scene, then cut out and re-inked in the studio. No photography and no 3D render: that is a rule of the project.
What if you dislike animation?
The site follows the system's reduced-motion setting: the video pauses and the scenes do not stack.
Bloomwise
