odoro 0.3.4 → 1.0.1

package/templates/react-ts/src/composants/Marque.tsx

@@ -0,0 +1,50 @@
+/**
+ * La marque : le signe et le mot.
+ *
+ * ## Pourquoi le signe est dessine ici, et non charge
+ *
+ * Un fichier dans `public/` serait une image de plus a telecharger, et surtout
+ * une image d'une seule couleur. Le signe est dessine en SVG dans le flux, avec
+ * `currentColor` : il prend la couleur de son parent, donc la teinte de marque
+ * en clair comme en sombre, sans qu'on ait deux fichiers a tenir.
+ *
+ * @module
+ */
+
+import type { ReactElement } from 'react'
+
+/** Le signe seul, a la taille de la police qui l'entoure. */
+export function Signe({ className = '' }: { readonly className?: string }): ReactElement {
+  return (
+    <svg
+      viewBox="0 0 100 100"
+      fill="none"
+      aria-hidden="true"
+      className={className}
+      // La taille est en style, et non en classe : elle suit la police qui
+      // entoure le signe, et une classe utilitaire a valeur arbitraire n'est
+      // emise que si le compilateur l'a vue passer. Absente, elle laisserait
+      // un SVG sans dimensions — donc invisible, sans rien pour le signaler.
+      style={{ width: '1.15em', height: '1.15em', flexShrink: 0 }}
+    >
+      <path
+        d="M20.25 20.25H50a29.75 29.75 0 1 1-29.75 29.75Z"
+        stroke="currentColor"
+        strokeWidth="10.5"
+        strokeLinejoin="miter"
+      />
+    </svg>
+  )
+}
+
+/** Le signe et le mot, tels qu'ils vont dans une barre de navigation. */
+export function Marque(): ReactElement {
+  return (
+    <span className="o-inline-flex o-items-center o-gap-2 o-font-semibold o-tracking-tight">
+      <span className="o-text-brand-500">
+        <Signe />
+      </span>
+      Odoro
+    </span>
+  )
+}

package/templates/react-ts/src/routes/About.tsx

@@ -1,19 +1,43 @@
+/**
+ * Une seconde page, pour montrer le routeur a l'oeuvre.
+ *
+ * @module
+ */
+
 import { Reveal } from '@odoro-cli/libs/motion'
-import { Link } from '@odoro-cli/libs/router'
+import type { ReactElement } from 'react'
+
+/** Ce que le projet embarque, tel qu'il a ete cree. */
+const REPERES: readonly { readonly cle: string; readonly valeur: string }[] = [
+  { cle: 'Moteur', valeur: 'odoro — serveur de developpement et compilation' },
+  { cle: 'Styles', valeur: '@odoro-cli/libs — jetons, utilitaires, composants' },
+  { cle: 'Registre', valeur: 'register.odoro.dev — copie dans votre projet' },
+]
 
-/** Page « a propos », qui demontre la navigation entre routes. */
-export function About() {
+/** Page « A propos ». */
+export function About(): ReactElement {
   return (
-    <Reveal className="o-flex o-flex-col o-gap-6">
-      <h1 className="o-text-3xl o-font-bold o-tracking-tight">A propos</h1>
-      <p className="o-text-zinc-500 dark:o-text-zinc-400 o-max-w-prose">
-        Cette page est servie par le routeur d Odoro. La navigation ne recharge pas le
-        document : elle passe par l historique du navigateur, restaure la position de
-        defilement et joue une transition de page quand le navigateur la prend en charge.
-      </p>
-      <p>
-        <Link to="/">Retour a l accueil</Link>
-      </p>
-    </Reveal>
+    <section className="o-px-6 o-py-24">
+      <div className="o-mx-auto o-w-full o-max-w-3xl">
+        <Reveal>
+          <h1 className="o-text-4xl o-font-bold o-tracking-tight">A propos</h1>
+          <p className="o-mt-4 o-text-zinc-500 dark:o-text-zinc-400">
+            Cette page existe pour montrer le routeur : la navigation ne recharge
+            rien, et la transition est celle du navigateur.
+          </p>
+
+          <dl className="o-mt-10 o-divide-y o-divide-zinc-200 dark:o-divide-zinc-800 o-border-t o-border-zinc-200 dark:o-border-zinc-800">
+            {REPERES.map((repere) => (
+              <div key={repere.cle} className="o-flex o-flex-col md:o-flex-row o-gap-1 md:o-gap-6 o-py-4">
+                <dt className="o-w-32 o-shrink-0 o-text-sm o-font-medium">{repere.cle}</dt>
+                <dd className="o-m-0 o-text-sm o-text-zinc-500 dark:o-text-zinc-400">
+                  {repere.valeur}
+                </dd>
+              </div>
+            ))}
+          </dl>
+        </Reveal>
+      </div>
+    </section>
   )
 }

package/templates/react-ts/src/routes/Home.tsx

@@ -1,80 +1,28 @@
-import { useState } from 'react'
+/**
+ * La page d'accueil : le fond, puis les sections.
+ *
+ * Elle ne fait que les mettre bout a bout. Chaque section vit dans son propre
+ * fichier, si bien qu'en retirer une, en ajouter une ou en changer l'ordre se
+ * lit ici en une ligne.
+ *
+ * @module
+ */
 
-import { Reveal, Stagger, useAnimate } from '@odoro-cli/libs/motion'
-import { Link } from '@odoro-cli/libs/router'
-import { Button } from '@odoro-cli/libs/ui'
+import type { ReactElement } from 'react'
 
-/** Trois arguments mis en avant sur la page d'accueil. */
-const FEATURES = [
-  {
-    title: 'Routeur',
-    body: 'Segments dynamiques, routes imbriquees, chargement paresseux et transitions de page.',
-  },
-  {
-    title: 'Animations',
-    body: "Une couche mince sur le moteur du navigateur. Les animations reduites sont respectees d'office.",
-  },
-  {
-    title: 'Styles',
-    body: 'Des tokens en source de verite, une feuille statique, aucun scan a l execution.',
-  },
-]
+import { Cloture } from '@/sections/Cloture'
+import { Fond } from '@/sections/Fond'
+import { Hero } from '@/sections/Hero'
+import { Piliers } from '@/sections/Piliers'
 
 /** Page d'accueil. */
-export function Home() {
-  const [ref, controls] = useAnimate<HTMLSpanElement>()
-  const [count, setCount] = useState(0)
-
+export function Home(): ReactElement {
   return (
-    <div className="o-flex o-flex-col o-gap-12">
-      <Reveal>
-        <h1 className="o-text-4xl o-font-bold o-tracking-tight">
-          Un point de depart maitrise.
-        </h1>
-        <p className="o-mt-4 o-text-lg o-text-zinc-500 dark:o-text-zinc-400 o-max-w-prose">
-          Ce projet a ete genere par <code className="o-font-mono">odoro create</code>. Le
-          routeur, le moteur d animation et le systeme de style viennent tous de la meme
-          librairie.
-        </p>
-      </Reveal>
-
-      <Stagger step={80} className="o-grid o-grid-cols-1 md:o-grid-cols-3 o-gap-4">
-        {FEATURES.map((feature) => (
-          <article
-            key={feature.title}
-            className="o-rounded-lg o-border-w-1 o-border-zinc-200 dark:o-border-zinc-800 o-bg-white dark:o-bg-zinc-900 o-p-5"
-          >
-            <h2 className="o-font-semibold">{feature.title}</h2>
-            <p className="o-mt-2 o-text-sm o-text-zinc-500 dark:o-text-zinc-400">
-              {feature.body}
-            </p>
-          </article>
-        ))}
-      </Stagger>
-
-      <div className="o-flex o-items-center o-gap-4">
-        <Button
-          onClick={() => {
-            setCount((value) => value + 1)
-            void controls.play(
-              [
-                { transform: 'translateY(0)' },
-                { transform: 'translateY(-0.4rem)' },
-                { transform: 'translateY(0)' },
-              ],
-              { duration: 'fast', easing: 'emphasized' },
-            )
-          }}
-        >
-          Compter
-        </Button>
-        <span ref={ref} className="o-inline-block o-text-lg o-tabular-nums">
-          {count}
-        </span>
-        <Link to="/a-propos" className="o-text-sm">
-          En savoir plus
-        </Link>
-      </div>
-    </div>
+    <>
+      <Fond />
+      <Hero />
+      <Piliers />
+      <Cloture />
+    </>
   )
 }

package/templates/react-ts/src/sections/Cloture.tsx

@@ -0,0 +1,69 @@
+/**
+ * La cloture : une commande, et la porte de sortie vers la documentation.
+ *
+ * Une page d'accueil qui s'arrete sur sa derniere carte laisse le visiteur
+ * sans geste suivant. Celle-ci se termine par ce qu'il y a a taper.
+ *
+ * @module
+ */
+
+import { Reveal } from '@odoro-cli/libs/motion'
+import { buttonClasses } from '@odoro-cli/libs/ui'
+import { useState, type ReactElement } from 'react'
+
+/** La commande que l'on copie le plus souvent. */
+const COMMANDE = 'odoro add text/count-up'
+
+/** La section de cloture. */
+export function Cloture(): ReactElement {
+  const [copie, setCopie] = useState(false)
+
+  return (
+    <section className="o-border-t o-border-zinc-200 dark:o-border-zinc-800 o-px-6 o-py-24">
+      <div className="o-mx-auto o-w-full o-max-w-3xl o-text-center">
+        <Reveal>
+          <h2 className="o-text-3xl o-font-bold o-tracking-tight md:o-text-4xl">
+            Ajoutez un composant, sans quitter le terminal.
+          </h2>
+          <p className="o-mx-auto o-mt-4 o-max-w-prose o-text-zinc-500 dark:o-text-zinc-400">
+            Le registre copie le code dans votre projet. Il vous appartient : on le
+            lit, on le modifie, il ne se met pas a jour dans votre dos.
+          </p>
+
+          <div className="o-mx-auto o-mt-8 o-flex o-max-w-md o-items-center o-gap-2 o-rounded-xl o-border-w-1 o-border-zinc-200 dark:o-border-zinc-800 o-bg-zinc-50 dark:o-bg-zinc-900 o-p-2 o-pl-4">
+            <code className="o-flex-1 o-text-left o-font-mono o-text-sm">{COMMANDE}</code>
+            <button
+              type="button"
+              className={buttonClasses({ tone: 'ghost', size: 'sm' })}
+              onClick={() => {
+                // Le presse-papiers peut etre refuse — hors contexte sur, ou
+                // permission retiree. L'echec ne doit pas casser la page : le
+                // libelle ne change simplement pas.
+                void navigator.clipboard
+                  ?.writeText(COMMANDE)
+                  .then(() => {
+                    setCopie(true)
+                    setTimeout(() => {
+                      setCopie(false)
+                    }, 1600)
+                  })
+                  .catch(() => undefined)
+              }}
+            >
+              {copie ? 'Copie' : 'Copier'}
+            </button>
+          </div>
+
+          <a
+            href="https://odoro.dev/docs/registry"
+            target="_blank"
+            rel="noreferrer"
+            className="o-mt-6 o-inline-block o-text-sm o-text-zinc-500 dark:o-text-zinc-400 hover:o-text-brand-500"
+          >
+            Parcourir le catalogue
+          </a>
+        </Reveal>
+      </div>
+    </section>
+  )
+}

package/templates/react-ts/src/sections/Fond.tsx

@@ -0,0 +1,42 @@
+/**
+ * Le fond decoratif de la page.
+ *
+ * ## Ce qu'il est, et ce qu'il remplace
+ *
+ * Deux nappes de couleur de marque, tres diluees, posees en haut de page. Rien
+ * ne bouge : c'est un degrade, pas une animation — il ne coute aucune image par
+ * seconde et se dessine avant le premier octet de JavaScript.
+ *
+ * Si le moteur a ete retenu a la creation, ce fichier est remplace par une
+ * version qui ouvre une surface WebGL animee. Le reste de la page ne sait pas
+ * d'ou vient son fond : elle place `<Fond />` et n'en demande pas plus.
+ *
+ * @module
+ */
+
+import type { ReactElement } from 'react'
+
+/** Deux nappes de marque, diluees, derriere le contenu. */
+export function Fond(): ReactElement {
+  return (
+    <div
+      aria-hidden="true"
+      className="o-pointer-events-none o-absolute o-inset-x-0 o-top-0 o-h-[42rem] o-overflow-hidden"
+    >
+      <div
+        className="o-absolute o-left-1/2 o-top-[-18rem] o-size-[46rem] o--translate-x-1/2 o-rounded-full o-blur-3xl o-opacity-30 dark:o-opacity-25"
+        style={{
+          background:
+            'radial-gradient(closest-side, var(--o-palette-brand-500), transparent)',
+        }}
+      />
+      <div
+        className="o-absolute o-right-[-10rem] o-top-[6rem] o-size-[30rem] o-rounded-full o-blur-3xl o-opacity-20 dark:o-opacity-20"
+        style={{
+          background:
+            'radial-gradient(closest-side, var(--o-palette-brand-400), transparent)',
+        }}
+      />
+    </div>
+  )
+}

package/templates/react-ts/src/sections/Hero.tsx

@@ -0,0 +1,119 @@
+/**
+ * Le hero : la promesse, l'installation, et la fenetre du produit.
+ *
+ * ## Le dessin est celui d'odoro.dev
+ *
+ * Meme typographie — un titre serre, une phrase de soutien plus claire —,
+ * memes pastilles de faits, meme fenetre de navigateur posee sous le pli. Un
+ * projet qui demarre ressemble donc a ce qu'il peut devenir, au lieu de partir
+ * d'une page blanche qu'il faudra jeter.
+ *
+ * ## Ce qui n'y est pas
+ *
+ * Aucun composant du registre. Le hero se contente de ce que les bibliotheques
+ * apportent : les classes, `Reveal` et `Stagger`. C'est ce qui lui permet
+ * d'exister quel que soit ce qui a ete coche a la creation.
+ *
+ * @module
+ */
+
+import { Reveal, Stagger } from '@odoro-cli/libs/motion'
+import { buttonClasses } from '@odoro-cli/libs/ui'
+import type { ReactElement } from 'react'
+
+import { Signe } from '@/composants/Marque'
+
+/** Quatre faits, pas quatre slogans. */
+const FAITS = ['Zero configuration', 'Theme clair et sombre', 'Mouvement reduit respecte']
+
+/** Ce que la fenetre montre : une page en quelques lignes. */
+const EXTRAIT = `export function Accueil() {
+  return (
+    <Reveal>
+      <h1 className="o-text-6xl o-font-bold">
+        Votre premiere page.
+      </h1>
+    </Reveal>
+  )
+}`
+
+/**
+ * Une fenetre de navigateur miniature.
+ *
+ * Les trois pastilles sont decoratives : elles disent « navigateur » sans rien
+ * ajouter a ce qu'un lecteur d'ecran doit entendre.
+ */
+function Fenetre(): ReactElement {
+  return (
+    <div className="o-overflow-hidden o-rounded-2xl o-border-w-1 o-border-zinc-200 dark:o-border-zinc-800 o-bg-zinc-50 dark:o-bg-zinc-900 o-shadow-2xl">
+      <div className="o-flex o-items-center o-gap-2 o-border-b o-border-zinc-200 dark:o-border-zinc-800 o-px-4 o-py-2.5">
+        <span className="o-flex o-gap-1.5" aria-hidden="true">
+          <span className="o-size-2.5 o-rounded-full o-bg-zinc-300 dark:o-bg-zinc-700" />
+          <span className="o-size-2.5 o-rounded-full o-bg-zinc-300 dark:o-bg-zinc-700" />
+          <span className="o-size-2.5 o-rounded-full o-bg-zinc-300 dark:o-bg-zinc-700" />
+        </span>
+        <span className="o-ml-2 o-font-mono o-text-xs o-text-zinc-400">src/routes/Home.tsx</span>
+      </div>
+      <pre className="o-m-0 o-overflow-x-auto o-p-5 o-font-mono o-text-xs o-leading-relaxed o-text-zinc-600 dark:o-text-zinc-300">
+        {EXTRAIT}
+      </pre>
+    </div>
+  )
+}
+
+/** Le hero de la page d'accueil. */
+export function Hero(): ReactElement {
+  return (
+    <section className="o-relative o-px-6 o-pb-20 o-pt-24 md:o-pt-32">
+      <div className="o-mx-auto o-w-full o-max-w-5xl">
+        <Reveal>
+          <span className="o-inline-flex o-items-center o-gap-2 o-whitespace-nowrap o-rounded-full o-border-w-1 o-border-brand-500/30 o-bg-brand-500/10 o-px-3 o-py-1 o-text-xs o-font-medium o-text-brand-600 dark:o-text-brand-400">
+            <Signe />
+            Genere par odoro create
+          </span>
+
+          <h1 className="o-mt-6 o-max-w-3xl o-text-5xl o-font-bold o-tracking-tight md:o-text-6xl">
+            Votre premiere page,{' '}
+            <span className="o-text-brand-500">deja vivante</span>.
+          </h1>
+
+          <p className="o-mt-5 o-max-w-xl o-text-lg o-text-zinc-500 dark:o-text-zinc-400">
+            Le routeur, les animations et le systeme de style viennent de la meme
+            librairie. Modifiez cette page : elle se recharge sans perdre son etat.
+          </p>
+        </Reveal>
+
+        <Stagger step={70} className="o-mt-8 o-flex o-flex-wrap o-items-center o-gap-3">
+          <a href="#piliers" className={`o-no-underline ${buttonClasses({ tone: 'primary' })}`}>
+            Voir ce qui est inclus
+          </a>
+          <a
+            href="https://odoro.dev/docs"
+            className={`o-no-underline ${buttonClasses({ tone: 'secondary' })}`}
+            target="_blank"
+            rel="noreferrer"
+          >
+            Documentation
+          </a>
+        </Stagger>
+
+        <Stagger step={60} className="o-mt-6 o-flex o-flex-wrap o-gap-2">
+          {FAITS.map((fait) => (
+            <span
+              key={fait}
+              className="o-rounded-full o-border-w-1 o-border-zinc-200 dark:o-border-zinc-800 o-px-3 o-py-1 o-text-xs o-text-zinc-500 dark:o-text-zinc-400"
+            >
+              {fait}
+            </span>
+          ))}
+        </Stagger>
+
+        <Reveal>
+          <div className="o-mt-14">
+            <Fenetre />
+          </div>
+        </Reveal>
+      </div>
+    </section>
+  )
+}

package/templates/react-ts/src/sections/Piliers.tsx

@@ -0,0 +1,68 @@
+/**
+ * Trois piliers : ce que le projet a deja sous la main.
+ *
+ * Les cartes s'ecrivent avec la meme grammaire que sur odoro.dev — bordure
+ * fine, coin arrondi, titre serre, phrase en gris — pour qu'ajouter une section
+ * plus tard ne demande pas d'inventer un style.
+ *
+ * @module
+ */
+
+import { Stagger } from '@odoro-cli/libs/motion'
+import type { ReactElement } from 'react'
+
+/** Un pilier : un numero, un titre, une phrase. */
+interface Pilier {
+  readonly titre: string
+  readonly texte: string
+}
+
+const PILIERS: readonly Pilier[] = [
+  {
+    titre: 'Routeur',
+    texte:
+      'Segments dynamiques, routes imbriquees, chargement paresseux et transitions de page.',
+  },
+  {
+    titre: 'Animations',
+    texte:
+      "Une couche mince sur le moteur du navigateur. Le mouvement reduit est respecte d'office.",
+  },
+  {
+    titre: 'Styles',
+    texte:
+      'Des jetons en source de verite, une feuille statique, aucun scan a l execution.',
+  },
+]
+
+/** La section des piliers. */
+export function Piliers(): ReactElement {
+  return (
+    <section id="piliers" className="o-border-t o-border-zinc-200 dark:o-border-zinc-800 o-px-6 o-py-20">
+      <div className="o-mx-auto o-w-full o-max-w-5xl">
+        <h2 className="o-text-sm o-font-semibold o-uppercase o-tracking-widest o-text-zinc-400">
+          Ce qui est deja la
+        </h2>
+
+        <Stagger step={90} className="o-mt-8 o-grid o-gap-4 md:o-grid-cols-3">
+          {PILIERS.map((pilier, index) => (
+            <article
+              key={pilier.titre}
+              className="o-rounded-xl o-border-w-1 o-border-zinc-200 dark:o-border-zinc-800 o-bg-white dark:o-bg-zinc-900 o-p-6"
+            >
+              <span className="o-font-mono o-text-xs o-text-brand-500">
+                {String(index + 1).padStart(2, '0')}
+              </span>
+              <h3 className="o-mt-3 o-text-lg o-font-semibold o-tracking-tight">
+                {pilier.titre}
+              </h3>
+              <p className="o-mt-2 o-text-sm o-text-zinc-500 dark:o-text-zinc-400">
+                {pilier.texte}
+              </p>
+            </article>
+          ))}
+        </Stagger>
+      </div>
+    </section>
+  )
+}

package/templates/react-ts/src/styles.css

@@ -1,10 +1,9 @@
 /* Styles propres a l'application.
-   Tout le reste vient des tokens Odoro : surcharger une variable ci-dessous
-   suffit a rethemer l'ensemble, composants de la librairie compris. */
 
-:root {
-  --o-color-primary: oklch(52.4% 0.212 275);
-}
+   Tout le reste vient des jetons Odoro : surcharger une variable ci-dessous
+   retheme l'ensemble, composants de la librairie compris. La teinte de marque
+   est `--o-palette-brand-500` ; la remplacer suffit a changer la couleur de la
+   page, du signe et des boutons d'un seul coup. */
 
 .app-shell {
   min-height: 100dvh;

package/templates/react-ts-server/_variantes/avec-moteur/client/src/sections/Fond.tsx

@@ -0,0 +1,118 @@
+/**
+ * Le fond decoratif, en surface WebGL.
+ *
+ * Cette version remplace le degre statique parce que le moteur a ete retenu a
+ * la creation. Le reste de la page est inchange : elle place `<Fond />` et ne
+ * sait pas ce qu'il y a derriere.
+ *
+ * ## Ce que le moteur apporte, et qu'un degrade ne peut pas
+ *
+ * **Un arbitre.** La surface est demandee au gestionnaire du moteur, qui la
+ * refuse si le navigateur n'a pas WebGL, si trop de contextes sont deja
+ * ouverts, ou si l'appareil ne suivrait pas. Le refus est une valeur, pas une
+ * exception : on affiche alors le degrade, et la page tient.
+ *
+ * **Le mouvement reduit.** Sous cette preference, rien n'est monte du tout :
+ * le fond n'apportait que son mouvement, et la carte graphique n'a pas a
+ * s'allumer pour un visiteur qui a demande le calme.
+ *
+ * **Les couleurs du theme.** Les teintes sont lues dans les jetons, pas
+ * ecrites dans le nuanceur. Une bascule clair / sombre les relit, et changer
+ * `--o-palette-brand-500` repeint le fond sans toucher a ce fichier.
+ *
+ * ## Pourquoi des styles en ligne
+ *
+ * Ce fichier est pose quel que soit le reste : un projet qui a decoche les
+ * bibliotheques n'a pas les classes `o-*`, et une classe absente ne peint
+ * rien — le fond aurait alors une hauteur nulle, sans que rien ne le signale.
+ * Les quelques regles de placement sont donc ecrites ou elles sont sures.
+ *
+ * @module
+ */
+
+import {
+  AURORA_FRAGMENT,
+  readTokenColour,
+  useMotionState,
+  useShaderSurface,
+  type ShaderColour,
+} from '@odoro-cli/engine'
+import { useEffect, useMemo, useState, type ReactElement } from 'react'
+
+/** Les jetons lus pour teinter la nappe. */
+const TEINTES = ['--o-palette-brand-500', '--o-palette-brand-300', '--o-theme-bg'] as const
+
+/** Le degrade servi tant que la surface n'est pas la — ou pour toujours. */
+function Degrade(): ReactElement {
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        inset: 0,
+        opacity: 0.28,
+        filter: 'blur(64px)',
+        background:
+          'radial-gradient(60% 60% at 50% 0%, var(--o-palette-brand-500, #f97316), transparent)',
+      }}
+    />
+  )
+}
+
+/** Une nappe animee derriere le haut de la page. */
+export function Fond(): ReactElement {
+  const { quality, reduced } = useMotionState()
+  const [hote, setHote] = useState<HTMLElement | null>(null)
+  const [teintes, setTeintes] = useState<readonly ShaderColour[]>([])
+
+  // Relues quand l'hote apparait et quand le theme bascule — ce dernier cas
+  // passe par la politique de mouvement, qui se renouvelle a chaque etat.
+  useEffect(() => {
+    if (hote === null) return
+    setTeintes(TEINTES.map((jeton) => readTokenColour(jeton, hote)))
+  }, [hote, reduced, quality])
+
+  const uniforms = useMemo(() => {
+    const [a, b, c] = teintes
+    if (a === undefined || b === undefined || c === undefined) return undefined
+    // Le fond du theme domine, la marque n'est qu'un reflet : ces trois
+    // couleurs vont dans un melange, et deux teintes de marque sur trois
+    // donneraient une nappe orange en pleine page plutot qu'un halo.
+    return { uColorA: c, uColorB: c, uColorC: a, uSpeed: 0.1, uScale: 1.4, uOctaves: 3 }
+  }, [teintes])
+
+  const { ref, ready, refused } = useShaderSurface<HTMLDivElement>({
+    fragment: AURORA_FRAGMENT,
+    uniforms: uniforms ?? {},
+    name: 'fond-accueil',
+  })
+
+  const repli = !ready || refused !== undefined || uniforms === undefined
+
+  return (
+    <div
+      aria-hidden="true"
+      ref={(element) => {
+        setHote(element)
+        ref.current = element
+      }}
+      style={{
+        position: 'absolute',
+        insetInline: 0,
+        top: 0,
+        height: '42rem',
+        overflow: 'hidden',
+        pointerEvents: 'none',
+        // Un fond decoratif se remarque quand on le cherche, pas avant. A
+        // pleine intensite la nappe passe devant le titre qu'elle est censee
+        // porter ; a un cinquieme, elle le souligne.
+        opacity: 0.2,
+        // Le bas se dissout dans la page : une surface qui s'arrete net
+        // dessine une ligne horizontale que rien ne justifie.
+        maskImage: 'linear-gradient(to bottom, black 45%, transparent)',
+        WebkitMaskImage: 'linear-gradient(to bottom, black 45%, transparent)',
+      }}
+    >
+      {repli ? <Degrade /> : null}
+    </div>
+  )
+}