dom-plane
CommunityMap DOM to WebGL planes
Software Engineering#frontend development#shaders#webgl#three.js#interactive graphics#dom manipulation
AuthorBamoJ
Version1.0.0
Installs0
System Documentation
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'.
Dependency Matrix
Required Modules
None requiredComponents
scriptsreferencesassets
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: dom-plane Download link: https://github.com/BamoJ/playfight-2k26/archive/main.zip#dom-plane Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.