webgl-card-effects
CommunityAdd premium WebGL shimmer to card UIs.
System Documentation
What problem does it solve?
This skill solves the problem of making card rarity visuals feel premium and distinct without resorting to slow or misleading “CSS-only” effects that don’t scale across rarity tiers.
Core Features & Use Cases
It renders holographic foil, metallic shimmer, rarity-driven glow, and hover-reactive tilt-shine using standalone WebGL2 fragment shaders mounted directly on React card components.
It targets deckbuilder-style UIs where effect tiers must map cleanly to rarity values (starter/common/uncommon/rare/legendary) and typically integrates with a FramedCard.tsx + rarity prop flow.
It uses a shared WebGL2 context singleton (with IntersectionObserver visibility gating and a 30fps throttle) so multiple cards can animate without hitting browser WebGL context limits.
Quick Start
Use the command /card-effects to implement WebGL2 fragment-shader holographic effects for uncommon, rare, and legendary cards on your existing React card component.
Dependency Matrix
Required Modules
None requiredComponents
💻 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: webgl-card-effects Download link: https://github.com/notque/vexjoy-agent/archive/main.zip#webgl-card-effects 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 471,000+ vetted skills library on demand.