✨ Holographic Card Effects

Pokemon TCG-inspired effects using Bengal's design tokens.
Move your cursor over the cards!

Demo Cards

The rainbow rotates based on cursor X position. Uses Bengal's semantic color tokens.

Nebula effect with layered radial gradients. Energy bursts in error and info colors.

Gold frame with radiating rays. The sunburst follows your cursor position.

Glossy orbs using Bengal's semantic color tokens. They automatically adapt to palette variants.

ℹInfo

✓Success

!Warning

✕Error

★Primary

◆Accent

●Secondary

These use the .holo class. Hover to see the effect.

Note

Holographic Note — The rainbow gradient uses Bengal's semantic tokens so it adapts to any palette!

Tip

Pro Tip — In dark mode, the blend mode switches to soft-light for better visibility.

Warning

Caution — Each admonition type gets a hue-shifted variant of the holographic effect.

Danger

Critical — Danger shifts the spectrum red-ward for visual emphasis.

Token-based colors — Uses --color-error, --color-warning, etc. for palette compatibility
Adaptive blend modes — color-dodge in light mode, soft-light in dark mode
Radial mask — Focuses the effect around cursor position
3D transform — Cards tilt based on cursor for depth perception
CSS custom properties — JS updates --holo-x and --holo-y