← Back to Documentation

## Demo Cards

💧
Rainbow Holo Conic gradient

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

🔮
Cosmos Ultra Rare

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

⚡
Sunburst Gold Secret Rare

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

## Energy Orbs

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

ℹInfo
✓Success
!Warning
✕Error
★Primary
◆Accent
●Secondary

## Holographic Admonitions

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.

## How It Works

- 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`