WebGL Card Effects Skill

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 canonical target is FramedCard.tsx in a React 19 / Vite / Tailwind project with a rarity system (starter → common → uncommon → rare → legendary).

Not in scope: 3D transformations, texture loading, post-processing pipelines, or any Three.js scene management. For those, use threejs-builder.

Key constraint: Browsers cap WebGL contexts at roughly 8–16 total per page. This skill uses a single shared WebGL2 context with blit-to-2D-canvas output per card, avoiding the per-card context problem entirely. See references/shader-integration-react.md for the full singleton pattern.

Instructions

Phase 1: ASSESS

Goal: Understand which effects are needed and confirm the card component structure before writing any code.

Step 1: Read the card component

Read these files before writing anything:

• src/components/cards/FramedCard.tsx — component structure, hover state, rarity prop flow
• src/components/cards/cardStyles.ts — CARD_SIZE_CONFIG for pixel dimensions, rarity string values

Confirm:

• How rarity reaches the component (prop name, TypeScript type, exact string values)
• Whether isHovered state already exists in the component
• Which sizes are rendered in contexts that justify shader cost (xl/lg only — xs/sm are too small)
• Whether showShine / card-shine CSS exists and needs coordination

Step 2: Select effect tier per rarity