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

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)
}

imageUrl · string · required

High-resolution card art image URL (e.g. from TCGdex API).

rotateX · number · default: "0"

Pitch rotation in 3D degrees mapped via SVG affine matrix transform.

rotateY · number · default: "0"

Yaw rotation in 3D degrees with dynamic drop shadow projection.

---

Real Code Example

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)