PixiJS DOMContainer: HTML overlays on the canvas
Superposer des éléments HTML (inputs, iframes, vidéos) sur un canvas PixiJS v8 — positionnement piloté par CSS transforms, ancres, pointer events, API EXPÉRIMENTALE
- Quoi
- Superposer des éléments HTML (inputs, iframes, vidéos) sur un canvas PixiJS v8 — positionnement piloté par CSS transforms, ancres, pointer events, API EXPÉRIMENTALE
- Coût
- Gratuit
- Prérequis
- un projet navigateur PixiJS v8 (paquet npm pixi.js) ; rien d'autre — le skill est un guide plus des patterns de code, aucun compte ni clé requis
- Installation
- Copiez le prompt d’installation ci-dessous dans votre Muse — votre agent fait le reste.
Sélectionné par Skill Harbor — le skill officiel de @pixijs pour `DOMContainer` en PixiJS v8 : positionner n'importe quel élément HTML par-dessus le canvas et piloter sa CSS transform depuis le graphe de scène — inputs natifs, iframes, vidéos, panneaux HTML riches qui suivent la position d'un objet d'affichage, avec options `element` et `anchor`, synchronisation de visibilité (cacher/retirer détache l'élément), gestion des pointer-events (racine partagée à z-index 1000, les overlays décoratifs devraient mettre `pointer-events: none`), et sémantique de `destroy()` qui préserve l'élément pour ré-attachement. Le bundle navigateur par défaut auto-enregistre le DOMPipe ; les builds personnalisés nécessitent l'import side-effect `import 'pixi.js/dom'`. Crédit : @pixijs. Bémols honnêtes : **marqué EXPÉRIMENTAL en PixiJS v8 — l'API peut changer entre versions mineures** ; les overlays DOM sont toujours rendus au-dessus du contenu canvas (pas d'entrelacement avec les draw calls) ; `tint`/`filters`/`mask`/`blendMode` n'ont aucun effet visuel sur les éléments DOM — styler avec CSS ; indisponible dans les Web Workers ; c'est une feuille — jamais de children PixiJS dedans ; licence MIT. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage. Découvert via skills.sh.
Version :
Installation
Prérequis : un projet navigateur PixiJS v8 (paquet npm pixi.js) ; rien d'autre — le skill est un guide plus des patterns de code, aucun compte ni clé requis Installe-moi « PixiJS DOMContainer : overlays HTML sur le canvas ». Il enseigne à un agent le DOMContainer officiel de @pixijs pour PixiJS v8 : superposer n'importe quel élément HTML (inputs, iframes, vidéos) sur le canvas avec des CSS transforms pilotées par le graphe de scène, options element/anchor, synchronisation de visibilité, gestion des pointer-events, sémantique de destroy qui préserve l'élément, et l'import side-effect pixi.js/dom pour les builds personnalisés — marqué EXPÉRIMENTAL en v8. Licence MIT. Dépôt : https://github.com/pixijs/pixijs-skills/blob/main/skills/pixijs-scene-dom-container/SKILL.md 1. Récupère le fichier SKILL.md (et les fichiers d'aide éventuels) depuis le chemin du dépôt dans un dossier temporaire et résume en une ou deux phrases ce qu'il fait. 2. Vérification de sécurité : examine le SKILL.md et les scripts pour tout contenu suspect (appels réseau inattendus, commandes shell, collecte d'identifiants). Ce dépôt ne devrait contenir aucun secret en dur, les identifiants uniquement via le coffre sécurisé, les hôtes autorisés déclarés dans le SKILL.md. Vérifie que c'est bien le cas ici ; STOP sur tout signal d'alerte et dis-le-moi. 3. Installe-le comme skill : copie le SKILL.md et ses fichiers d'aide dans le répertoire des skills de l'agent, dans un dossier nommé « pixijs-scene-dom-container ». 4. Vérifie sans appels réseau : frontmatter valide, fichiers en place. 5. Indique ce qui a été installé, où, et ce qu'il me reste à faire moi-même (p. ex. rien — c'est une référence d'overlays ; rappelez-vous que l'API est EXPÉRIMENTALE et que les overlays sont toujours au-dessus du contenu canvas). GitHub est optionnel : si j'ai un compte GitHub ou la CLI gh, tu peux l'utiliser ; sinon l'accès public suffit. Ne jamais l'exiger sauf s'il figure dans les prérequis ci-dessus. Règles : ne touche à rien en dehors du dossier temporaire et de la cible d'installation. Si quelque chose semble anormal, arrête-toi et demande-moi.
Questions
Comment installer une création ?
Chaque fiche produit contient un prompt d’installation à copier-coller. Collez-le dans votre Muse et il installe la création pour vous — sans configuration manuelle.
Où va mon argent ?
Directement au vendeur. Skill Harbor ne traite jamais les paiements : le paiement se fait sur la page du vendeur, généralement via Stripe.
Que signifie le ✓ à côté du nom d’un créateur ?
Il signifie que nous avons confirmé l’identité de la personne derrière la fiche. Il ne dit rien sur le code lui-même — vérifiez toujours une création avant de l’installer.