skills.rest
alexkafer
alexkaferCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

pixijs-scene-dom-container

Align DOM HTML elements with PixiJS v8 canvas content using DOMContainer and CSS transforms.

Updated Mar 13, 2022
Search Tags:#pixijs#pointer events#scene graph#css transforms#html overlay#dom container#dompipe
One-click install
npx skills add https://github.com/alexkafer/alexkafer-web --skill pixijs-scene-dom-container-alexkafer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pixijs-scene-dom-container
Source: https://github.com/alexkafer/alexkafer-web/tree/main/.agents/skills/pixijs-scene-dom-container
Command: npx skills add https://github.com/alexkafer/alexkafer-web --skill pixijs-scene-dom-container-alexkafer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the challenge of aligning interactive HTML elements (inputs, iframes, videos, custom UI) with PixiJS objects as the canvas transforms and the scene graph moves.

Core Features & Use Cases

  • DOMContainer-based HTML overlays: Positions an HTMLElement over the PixiJS canvas and keeps it synchronized to a scene-graph display object's transform.
  • Anchor-driven placement and CSS transforms: Uses an anchor to define the element’s origin (top-left, center, bottom-right) and applies PixiJS transforms as CSS transform/opacity updates.
  • DOMPipe integration and pointer-events control: Registers the required pixi.js/dom side-effect (or combined import), syncs visibility, and supports correct click behavior by setting pointer-events appropriately.

Use case example: You need a rich in-canvas search box (or an embedded settings iframe) that moves, scales, and fades exactly with a PixiJS sprite while remaining a real DOM element for form submission and accessibility.

Quick Start

Create an input element, import pixi.js/dom, instantiate DOMContainer with the input and an anchor (e.g., 0.5), set its position to your desired scene coordinates, and add it to the PixiJS stage.

Frequently Asked Questions about pixijs-scene-dom-container

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I overlay interactive HTML elements on a PixiJS canvas scene?▼

Anchor-driven placement in PixiJS DOM overlays defines the HTML element's origin point, such as top-left or center, and automatically applies PixiJS scene transforms as CSS transform and opacity updates to keep the overlay aligned.

Can I use iframes and videos in a PixiJS scene graph?▼

Yes, you can use iframes and videos in a PixiJS scene graph by adding them as HTMLElements within a DOMContainer, allowing them to move, scale, and fade with PixiJS objects while remaining fully functional DOM elements for accessibility.

Do I need to import pixi.js/dom to handle pointer events on HTML overlays?▼

Yes, importing pixi.js/dom is required to register the DOMPipe side-effect, which ensures correct pointer-events behavior and synchronizes visibility for HTML overlays interacting with the PixiJS canvas.

Why does my HTML overlay misalign when the PixiJS canvas scales?▼

An HTML overlay misaligns when the canvas scales if it is not bound to a DOMContainer. Binding it via DOMContainerOptions applies PixiJS scene-graph transforms directly as CSS transforms, keeping the overlay synchronized during movement and scaling.

Related Skills

Explore More Software Engineering Skills→
adamhjkadamhjk
2

pixijs-scene-container

Group, position, and transform display objects in PixiJS v8 scenes.

Community
Intermediate
BintzGavinBintzGavin
94

example-pixi

Drive PixiJS display object properties from Helios subscription callbacks.

Community
Intermediate
matthewharwoodmatthewharwood
1

pixijs-scene-dom-container

Overlay HTML elements on a PixiJS canvas using DOMContainer with CSS transforms.

Community
Intermediate
encounterplusencounterplus
16

pixijs-scene-dom-container

Synchronize HTML element overlays with PixiJS scene graph transforms via DOMPipe.

Official
Intermediate