skills.rest
BamoJ
BamoJCOMMUNITY
Explore all skills by this author →
Website𝕏@bamojkGitHub

dom-plane

Map DOM elements to Three.js PlaneGeometry meshes with positioning and scroll synchronization.

Updated Feb 13, 2026
Search Tags:#frontend development#shaders#webgl#three.js#interactive graphics#dom manipulation
One-click install
npx skills add https://github.com/BamoJ/playfight-2k26 --skill dom-plane
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dom-plane
Source: https://github.com/BamoJ/playfight-2k26/tree/main/.claude/skills/dom-plane
Command: npx skills add https://github.com/BamoJ/playfight-2k26 --skill dom-plane

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill bridges the gap between DOM elements and WebGL rendering, allowing for dynamic, interactive 3D visualizations that precisely overlay and react to HTML content.

Core Features & Use Cases

  • WebGL Overlay: Renders Three.js planes that perfectly match the size and position of DOM elements.
  • Interactive Effects: Enables hover effects, scroll-based animations, and shader-driven visual transformations on these planes.
  • Use Case: Imagine a product page where images are replaced by interactive WebGL planes that animate on hover and transition smoothly to a detail view, all while staying perfectly aligned with their original DOM positions.

Quick Start

Use the dom-plane skill to create a WebGL plane that overlays the DOM element with the ID 'hero-image'.

Frequently Asked Questions about dom-plane

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

FAQPage Schema
How do I map DOM elements to WebGL planes in Three.js?▼

To map DOM elements to WebGL planes, this Skill matches Three.js PlaneGeometry meshes to the precise size and position of HTML elements for seamless overlay rendering.

Can I apply shader-driven hover effects to DOM elements using WebGL?▼

Yes, you can apply shader-driven visual distortions and per-frame hover effects to DOM elements using WebGL.

Does this Skill handle scroll and resize synchronization for DOM overlays?▼

Yes, this Skill handles scroll and resize synchronization for DOM overlays by continuously updating the WebGL plane geometry.

What is the best way to overlay Three.js planes on HTML content?▼

The best way to overlay Three.js planes on HTML content is by mapping DOM layout properties directly to PlaneGeometry meshes.

Do I need manual DOM manipulation to sync Three.js plane positions?▼

No, you do not need manual DOM manipulation to sync Three.js plane positions, as the Skill automatically tracks layout changes.

Related Skills

Explore More Software Engineering Skills→
guaderramaguaderrama

threejs-webgl

Create 3D scenes with Three.js for WebGL and WebGPU rendering.

Community
Advanced
IoT-VNIoT-VN

shader

Generate GLSL fragment shaders for procedural graphics and animations.

Community
Advanced
fyunusafyunusa

react-three-fiber

Render Three.js scenes declaratively as React components with JSX.

Community
Intermediate
abrahamgreysonabrahamgreyson

web-shader-extractor

Extract and replay WebGL, WebGPU, and Canvas effects from webpages.

Community
Advanced