Addon · Fluid Backdrop

Un fond qui lit le thème.

Un fluide GPU dont l'encre est votre --brand et votre --accent. Chaque constante que le solveur cachait est sur un curseur, et le réglage trouvé repart en JSON.

Le régler

Passez le pointeur sur le cadre pour brasser. Les pickers réécrivent les variables du thème plutôt qu'une palette à part : la page et le fluide restent d'accord. Mettez la plaque à zéro et la simulation se compose directement sur le fond de la page.

passez pour brasser

L’emporter

Enregistrer garde le réglage dans ce navigateur et le restitue à la visite suivante. Copier le JSON le met dans le presse-papiers ; Copier le snippet y met un bloc prêt à coller. Importer lit ce qui se trouve dans le champ — les clés inconnues tombent et chaque valeur est bornée, donc une configuration modifiée à la main ne peut pas casser le solveur.

Configuration

Dans un autre projet

Un script, un canvas. Le bundle embarque vgpu et les shaders — rien d’autre à installer.

<canvas id="backdrop"></canvas>
<script src="https://eva-css.xyz/assets/fluid-backdrop.js"></script>
<script>
  EvaFluid.mountFluid(document.getElementById("backdrop"), {
    settings: { plate: 0, filter: 1, filterCell: 16 },
  }).start();
</script>

Sans WebGPU, sous prefers-reduced-motion, ou si l'initialisation échoue, mountFluid le signale et ne peint rien : donnez un fond CSS au canvas et la page se dégrade toute seule. La simulation s'arrête aussi dès que le canvas quitte le viewport.

Sources et crédits

Le solveur et ses shaders viennent de l’exemple Interactive Fluid de vgpu, vercel-labs/vgpu, par Vercel Labs. Le wrapper React est la seule partie remplacée en entier.

Ce qui a été modifié — Le montage React est devenu du JS vanilla avec trois garde-fous : support WebGPU, pause hors-écran, prefers-reduced-motion. Chaque constante en dur des shaders est remontée en uniforme. Un étage de filtrage et un mode sans plaque de fond ont été ajoutés à la passe d'affichage.

Prérequis — WebGPU — Chrome et Edge, Safari 26+, Firefox récent. Un contexte sécurisé est exigé, donc localhost ou HTTPS.