← Back to Experimental

# ✨ Holographic Card Effects

Pokemon TCG-inspired holographic effects for Bengal components.
Move your cursor over the cards to see the effects!

## Demo Cards

💧
Rainbow Holo Conic gradient

Move your cursor around to see the rainbow foil shimmer effect! The holo rotates based on cursor position.

🔮
Cosmos Ultra Rare

Cosmic nebula effect with layered radial gradients. Features pink and cyan energy bursts.

⚡
Sunburst Gold Secret Rare

Gold frame with radiating light rays. Maximum premium! The rays follow your cursor.

## Energy Orbs

ℹInfo
✓Success
!Warning
✕Error
🔥Fire
🔮Psychic
⚡Electric

## Holographic Admonitions

Note

Holographic Note — Move your cursor around to see the rainbow foil shimmer!

Tip

Pro Tip — The effect uses CSS custom properties updated by JavaScript for smooth tracking.

Warning

Caution — Warning gets an orange-shifted holo effect through hue rotation.

Danger

Critical — Danger shifts the holo effect red-ward for extra urgency!

## How It Works

The holographic effect combines several CSS techniques:

- Rainbow gradient — A repeating linear gradient with all spectrum colors
- `mix-blend-mode: color-dodge` — Creates the metallic shine effect
- Radial mask — Focuses the effect around the cursor position
- 3D transform — Cards tilt based on cursor position for depth
- CSS custom properties — JS updates `--pointer-x` and `--pointer-y`