webgl-card-effects
webgl-card-effects brings hardware-accelerated graphics to your React card components through WebGL rendering. Build fluid, visually rich interactions without sacrificing performance, leveraging the GPU to handle complex animations and effects that would otherwise strain the CPU. Perfect for creating polished, modern card-based interfaces.
webgl-card-effects brings hardware-accelerated graphics to your React card components through WebGL rendering. It leverages the GPU to handle complex animations and effects that would otherwise strain the CPU, enabling fluid, visually rich interactions without sacrificing performance. Perfect for creating polished, modern card-based interfaces.
AI-generated summary based on this skill's SKILL.md
Install
notque/vexjoy-agent/webgl-card-effects · repository language: Python
git clone https://github.com/notque/vexjoy-agent
cp -r vexjoy-agent/skills/frontend/webgl-card-effects ~/.claude/skills/webgl-card-effectsFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What is webgl-card-effects and how does it work with React?
webgl-card-effects brings hardware-accelerated graphics to your React card components through WebGL rendering. It leverages the GPU to handle complex animations and effects that would otherwise strain the CPU, enabling fluid, visually rich interactions without sacrificing performance. Perfect for creating polished, modern card-based interfaces.
Can webgl-card-effects create holographic foil shader effects?
Yes. webgl-card-effects supports creating rarity-tier specific shader effects for card UI, including holographic foil and shimmer overlays. You can build fragment shaders that generate premium visual effects like metallic shimmer bands and rainbow foil patterns tailored to different card rarity levels.
How do I add GPU accelerated card visuals to my project?
webgl-card-effects provides WebGL-based rendering for React card components. You can add GPU-accelerated visual effects by leveraging its WebGL2 canvas overlay capabilities and fragment shader system. The library handles WebGL context optimization for multiple card rendering, so you can deploy effects across entire card collections efficiently.
Does webgl-card-effects support mouse-reactive card effects?
Yes. webgl-card-effects enables you to build mouse-reactive tilt-shine interactions for interactive cards. The library supports dynamic shader updates based on mouse position, allowing you to create engaging effects like card tilt shine and energy pulse glows that respond to user input in real time.
What license does webgl-card-effects use?
webgl-card-effects is released under the MIT license, making it free to use, modify, and distribute in both open-source and commercial projects with minimal restrictions.
Can I use webgl-card-effects for deckbuilder card visuals?
Absolutely. webgl-card-effects is designed for deckbuilder and card game interfaces. It supports legendary card holographic effects, card rarity tier visuals, and standalone WebGL fragment shaders that integrate seamlessly into React card animation workflows.
SKILL.md
rendered from the published skill — quoted content, verbatim
WebGL Card Effects Skill
Overview
This skill adds GPU-accelerated visual effects to React card components using standalone WebGL2 fragment shaders — no Three.js, no R3F, no external library required. It targets deckbuilder games and card UIs where rarity tiers should feel visually distinct, not just differentiated by a CSS box-shadow value.
Scope: Holographic foil overlays, metallic shimmer bands, rarity-driven energy pulses, and interactive tilt-shine effects mounted directly on React card components. The
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 4 files
skills/frontend/webgl-card-effects/SKILL.md
skills/frontend/webgl-card-effects/references/balatro-shader-breakdown.md
skills/frontend/webgl-card-effects/references/card-shader-patterns.md
skills/frontend/webgl-card-effects/references/shader-integration-react.md