> ## Documentation Index
> Fetch the complete documentation index at: https://docs.gitascii.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Pokémon Card Widget

> Interactive 3D holographic Pokémon card generator with tilt, holographic glare, and cosmic shine effects

# Pokémon Card Widget (`pokemon-card`)

The Pokémon Card widget renders an interactive collectible trading card with 3D perspective matrix transforms, holographic rainbow gradients (`mix-blend-mode: color-dodge`), radial glare reflections, and a retro Pokéball loading animation.

## Configuration Schema

```typescript theme={null}
export interface PokemonCardConfig {
  imageUrl?: string        // Remote high-res card art URL
  isLoading?: boolean      // Displays animated cyber Pokéball scanning graphic
  rotateX?: number         // Perspective tilt X (-30 to +30 degrees)
  rotateY?: number         // Perspective tilt Y (-30 to +30 degrees)
  glareX?: number          // Glare reflection center X (0-100%)
  glareY?: number          // Glare reflection center Y (0-100%)
  shineX?: number          // Holographic shine origin X (0-100%)
  shineY?: number          // Holographic shine origin Y (0-100%)
  intensity?: number       // Holographic opacity multiplier (0 to 2, default: 1)
  scale?: number           // Transform scale multiplier (default: 1)
}
```

<ParamField body="imageUrl" type="string" required>
  High-resolution card art image URL (e.g. from TCGdex API).
</ParamField>

<ParamField body="rotateX" type="number" default="0">
  Pitch rotation in 3D degrees mapped via SVG affine matrix transform.
</ParamField>

<ParamField body="rotateY" type="number" default="0">
  Yaw rotation in 3D degrees with dynamic drop shadow projection.
</ParamField>

***

## Real Code Example

```typescript theme={null}
import { renderWidgetSvg, WidgetInstance } from '@/engine'

const pokemonWidget: WidgetInstance = {
  instanceId: 'pokemon_01',
  widgetId: 'pokemon-card',
  name: 'Pokémon Card',
  position: { x: 0, y: 0 },
  size: { width: 300, height: 418 },
  config: {
    imageUrl: 'https://assets.tcgdex.net/en/swsh/swsh4/188/high.png',
    rotateX: -10,
    rotateY: 15,
    glareX: 40,
    glareY: 30,
    intensity: 1.2,
  },
  locked: false,
  visible: true,
  zIndex: 1,
}

const svgOutput = renderWidgetSvg(pokemonWidget, profileData, globalStyles)
```