CENDRE

Site vitrine one-page pour une table gastronomique, ouvert par une traversée de braises en WebGL pilotée au scroll.

CENDRE est un établissement fictif. Le nom, la cheffe, le menu, l'adresse et les horaires sont inventés pour les besoins d'une démonstration technique.

Démarrer

npm install
npm run dev

Le site tourne sur http://localhost:5173. Ajouter ?debug=1 à l'URL affiche une sonde de performance (fps de la page, fps de la scène, appels de dessin, nombre de points, résolution).

Stack

Vite · React 19 · TypeScript · Tailwind CSS 4 · Framer Motion · Three.js via React Three Fiber.

La scène de braises

Quatre couches de particules rendues en un appel de dessin chacune, en mélange additif — donc indépendant de l'ordre de tri, sans tri par profondeur à payer.

Couche	Rôle
Brouillard gris	Le milieu froid. La fumée de bois est neutre ; ce sont les braises qui la réchauffent.
Fumée chaude	La zone réchauffée, entre le brouillard et le feu.
Braises	Le sujet. Ascendantes, palpitantes, étirées en traînées avec la vitesse.
Étincelles	Minuscules, quasi blanches, clignotement rapide. Rendues en dernier pour scintiller par-dessus.

Les deux couches de fumée utilisent une texture générée en mémoire par bruit fractal : une particule à dégradé radial est un disque, ce qui se lit comme du bokeh et non comme de la fumée.

Le placement des particules est déterministe, dérivé d'une graine fixe : tous les visiteurs voient la même composition. Changer COMPOSITION_SEED dans src/components/ember/random.ts en explore d'autres.

Dramaturgie

La traversée suit un arc — installation, montée, pic incandescent, dégagement, calme. Un rideau de densité fait apparaître et disparaître les particules selon la progression du scroll, la caméra accélère au milieu, et les braises virent au blanc au sommet. Les textes se placent dans les creux de cet arc, ce qui les garde lisibles.

Notes de performance

• Les particules éteintes par le brouillard sont écartées à l'étage vertex, avant toute génération de fragment. Sur un GPU intégré, où le remplissage est le facteur limitant, c'est le poste d'économie principal.
• La boucle de rendu s'arrête entièrement dès que la scène quitte l'écran.
• Le nombre de particules et le pixel ratio sont réduits sur petit écran ou faible concurrence CPU.
• Mappage tonal filmique en post-traitement : l'accumulation additive dépasse 1.0 au pic et écrêterait à plat sur du blanc grisâtre.
• La cadence de la scène est plafonnée à 30 images par seconde : requestAnimationFrame suit la fréquence de l'écran, et sur un moniteur 144 Hz le budget tombe à 6,9 ms.

La scène n'est pas montée du tout dans trois cas, remplacée par un hero en image fixe : prefers-reduced-motion demandé par le système, WebGL rendu par le processeur (détecté en lisant la chaîne du moteur), ou cadence mesurée sous 14 images par seconde sur les premières secondes. Le deuxième cas n'est pas une panne — WebGL fonctionne, il est seulement dix à vingt fois trop lent — et demande donc sa propre détection.

Contenu

Textes et identité : fiction. Photographies : Unsplash, licence libre — voir CREDITS.md.

Le design system (palette, typographie, structure) est documenté dans docs/superpowers/specs.