✨ Holographic Card Effects

Pokemon TCG-inspired holographic effects for Bengal documentation

Inspired by poke-holo.simey.me by @simeydotme

Move your cursor over the cards to see the holographic effect!

🃏 Holographic Cards

Full 3D tilt with rainbow foil, glare, and sparkle layers. Try tilting your cursor to different corners!

💧

Rainbow Holo

Conic gradient rainbow

Holo Rare
Classic rainbow foil effect using conic-gradient that rotates based on cursor position. The colors shift dynamically as you move.
.holo-card--rainbow
🔮

Cosmos

Nebula & stars

Ultra Rare
Cosmic nebula effect with layered radial gradients creating a space-like atmosphere. Perfect for mystical content.
.holo-card--cosmos
đŸ”Ĩ

Sunburst

Radiating rays

Holo Rare
Repeating conic gradient creates radiating light rays that follow your cursor position. High energy visual.
.holo-card--sunburst
⚡

Galaxy Secret

Gold frame treatment

Secret Rare
Gold border frame with enhanced sparkle. The premium treatment for your most important documentation callouts.
.holo-card--secret-rare

🔮 3D Energy Orbs

Spherical resource indicators with realistic 3D lighting and subtle float animation.

ℹ
Info
✓
Success
!
Warning
✕
Error
đŸ”Ĩ
Fire
🔮
Psychic
⚡
Electric

📋 Holographic Admonitions

Apply holographic effects directly to Bengal's admonition components with the .holo class.

ℹī¸ Holographic Note

This is a note admonition with holographic effects. Move your cursor around to see the rainbow shimmer and glare follow your movement. The effect is most visible at the edges!

💡 Pro Tip

The holographic effect uses CSS custom properties updated by JavaScript for smooth, performant animations. The effect respects prefers-reduced-motion for accessibility.

⚠ī¸ Caution

Warning admonitions get an orange-shifted holo effect to maintain semantic meaning while still being visually striking.

🛑 Critical

Danger/error admonitions shift the holo effect red-ward. Even with the flashy effects, the semantic color coding remains clear.

📝 Usage

Add holographic effects to your Bengal documentation:

<!-- Include the CSS and JS -->
<link rel="stylesheet" href="css/experimental/holo-cards-advanced.css">
<script src="js/holo-cards.js"></script>

<!-- Holographic Card -->
<div class="holo-card holo-card--rainbow holo-card--holo-rare">
  <div class="holo-card__inner">
    <div class="holo-card__shine"></div>
    <div class="holo-card__glare"></div>
    <div class="holo-card__sparkle"></div>
    <div class="holo-card__content">
      <!-- Your content here -->
    </div>
  </div>
</div>

<!-- Holographic Admonition (simpler!) -->
<div class="admonition holo note">
  <p class="admonition-title">Title</p>
  <p>Content...</p>
</div>

<!-- Energy Orb -->
<div class="energy-orb-3d fire">đŸ”Ĩ</div>

🎨 Available Classes

Effect Variants

.holo-card--rainbow    /* Conic gradient rainbow */
.holo-card--cosmos     /* Nebula/space effect */
.holo-card--sunburst   /* Radiating rays */
.holo-card--pixel      /* Digital/glitch grid */
.holo-card--galaxy     /* Enhanced sparkle */

Rarity Levels

.holo-card--common       /* Subtle, no holo */
.holo-card--uncommon     /* Light holo */
.holo-card--holo-rare    /* Standard holo (default) */
.holo-card--ultra-rare   /* Enhanced effects */
.holo-card--secret-rare  /* Gold frame + max effects */

Energy Orb Types

.energy-orb-3d.info      /* Blue */
.energy-orb-3d.success   /* Green */
.energy-orb-3d.warning   /* Amber */
.energy-orb-3d.error     /* Red */
.energy-orb-3d.fire      /* Orange */
.energy-orb-3d.psychic   /* Purple */
.energy-orb-3d.electric  /* Yellow */