Présentation
Le dépôt shaders (MIT licence) expose plus de 200 effets graphiques implémentés avec WebGPU. Chaque effet est empaqueté comme un composant compatible avec les principaux frameworks front‑end : React, Vue, Svelte, Solid et un API JavaScript natif. Le package s’installe via npm install shaders et se veut production‑ready : il est écrit en TypeScript, optimise les shaders au moment de la compilation et supporte le rendu côté serveur (SSR).
Architecture et fonctionnement
Le cœur du système repose sur le composant <Shader>, qui crée un canvas WebGPU. Les effets sont déclarés comme enfants de ce canvas et sont blended séquentiellement, du haut vers le bas, directement sur le GPU. Cette approche évite les passages CPU‑GPU multiples et garantit un débit constant même avec plusieurs calques actifs. Le rendu réactif s’appuie sur les props typées ; toute modification de prop déclenche une recompilation du shader sans recharger le canvas.
import { Shader, LinearGradient, CursorTrail } from 'shaders/react';
Le même schéma s’applique aux autres frameworks, avec des imports respectifs (shaders/vue, shaders/svelte, etc.). En JavaScript pur, la fonction createShader accepte une configuration JSON décrivant les composants et leurs propriétés, offrant ainsi une API uniforme.
Analyse de performance et limites
WebGPU, standardisé par le W3C, fournit un accès bas‑niveau aux unités de traitement graphique, ce qui réduit la latence comparée à WebGL. Les shaders de la bibliothèque sont pré‑optimisés : le code source est minifié et les pipelines sont réutilisés lorsqu’une séquence d’effets identique apparaît. Cependant, la dépendance à WebGPU implique que les effets ne fonctionnent que sur les navigateurs qui implémentent le standard (Chrome ≥ 113, Edge ≥ 113, Safari ≥ 16.4). Les environnements sans support GPU (ex. navigateurs mobiles anciens) tombent en mode fallback, généralement en désactivant le rendu ou en affichant un canvas vide.
Le rendu SSR, bien que déclaré sûr, nécessite que le serveur possède un environnement capable d’émuler WebGPU ou que le rendu soit différé côté client. Aucun benchmark officiel n’est fourni dans le dépôt, ce qui rend difficile l’évaluation quantitative du gain de FPS ou de la consommation mémoire.
Écosystème et adoption
Le projet compte 1,7 k étoiles et 57 forks sur GitHub, signe d’une communauté active. Plus de 16 000 design engineers utilisent les composants, selon le README, et la plateforme shaders.com propose un éditeur visuel où les utilisateurs créent des effets sur une toile infinie, puis exportent le code exact du composant. Le CLI intégré synchronise le projet local avec le compte Shaders, automatisant le téléchargement des effets conçus. Cette chaîne de création‑à‑déploiement réduit le temps de prototypage, mais repose sur la disponibilité d’un compte en ligne et d’une connexion internet.
