The art of being French

Highlights

• A header that walks

  The character crosses the title with his half-eaten baguette, on a loop, over a transparent background. It is a video, not a drawn animation: it starts on its own and stops if the visitor asked for less motion.

• A title fitted to the exact width

  Both title lines are measured once the font has loaded, then set to the size that makes them touch both margins. No hand-written value, and nothing breaks from one window to the next.

• Scenes that stack

  Each section pins while the next one climbs over it, drifting a few dozen pixels as it goes. Chapter navigation still lands right: invisible markers stay in normal flow while the sections are pinned.

• Cut-out illustrations, re-inked

  The drawings are cut out, then run through SVG filters that separate the blue ink from the rest, hue by hue. Laid down in multiply blend on the cream canvas, they look printed onto it.

• A croissant for a cursor

  On desktop the arrow is replaced by a croissant. It is the site's only ornament, and it doubles as the icon here.

• Two languages, one title

  The text switches between French and English from the footer, with no reload. The name of the site never changes: it is already in English.

• No framework

  HTML, CSS and three scripts. The site ships as static files, with no dependency and no build step beyond the copy.