THREEUI : des composants et shaders Three.js prêts à copier, pour des sites qui bougent
⏱️ Temps de lecture estimé : 3 minutes
📌 THREEUI est un catalogue open source de composants Three.js à copier-coller : composants de base, templates de sites complets, fonds WebGL, sections hero et effets d’interface. Édition Community gratuite sans login, avec rendu live et code source. 4962 étoiles, MIT.
Ce que j’aime immédiatement, c’est le format. Pas un bac à sable intriguant où on pianote sans repartir avec un résultat. ThreeUI présente un composant, le rend en direct dans le navigateur, et vous donne le code source complet à côté. Vous choisissez une variante, vous configurez les contrôles, vous copiez. Fin de l’histoire. Zarre.
La bibliothèque Community couvre 50 composants parent, 111 routes et 141 variantes libres, plus 23 composants singletons — soit 164 résultats de recherche. Des fonds WebGL animés, des hero sections interactives, des effets d’interface, des templates de sites entiers. Des thèmes (mono, sepia, azure, moss, mauve) et un mode sombre/clair intégrés au catalogue lui-même.
Pour le développer, l’installation passe par npm : npm install @designcodeio/threeui. Vous importez un composant en une ligne — import { AtTheHorizon } from "@designcodeio/threeui" — puis le style partagé. Les composants qui rendent des documents HTML complets attendent leurs fichiers runtime dans le dossier public de votre app, ou une prop sourceUrl pour les rediriger.
La partie Pro est une extension commerciale : les implémentations Pro et Beta ne sont pas publiées sur npm. Un CLI propriétaire (npx @designcodeio/threeui-cli add cross-beam) les télécharge pour les membres après authentification OAuth PKCE. Le gratuit reste vérifiable indépendamment dans le repo public.
Le projet est signé par Meng To, connu pour Design+Code — une formation design qui a marqué pas mal de monde. Là, il applique cette pédagogie au WebGL : montrer, rendre, donner le code. La licence MIT couvre le code applicatif et les composants Community.
Ce que je note comme limite : c’est surtout des composants « impressionnants ». Pour un site de production orienté performance ou accessibilité, le WebGL lourd demande un regard critique — ce n’est pas pour chaque hero de chaque site. Mais pour un portfolio, une landing de produit ou une démo, c’est un gain de temps énorme.
- 🧩 164 composants et variantes Three.js prêts à copier
- 👁️ Rendu live + sélecteur de variantes + onglet source
- 🎨 Thèmes intégrés : mono, sepia, azure, moss, mauve
- 📦 Package npm React :
@designcodeio/threeui - 🔓 Édition Community gratuite, sans login, MIT
- 🧱 Templates de sites complets et fonds WebGL inclus
Sources
