🌟 Holo Card

A React component library for creating stunning holographic card effects with 3D transforms, advanced CSS effects, and smooth animations.

Features

• 🎨 20+ Holographic Effects - Regular holo, cosmos, rainbow, radiant, amazing rare, and more
• 🎮 Interactive 3D - Mouse tracking with realistic 3D rotation
• 📱 Device Orientation - Gyroscope support for mobile devices
• ⚡ Smooth Animations - Powered by Framer Motion
• 🎯 TypeScript Support - Full type definitions included
• 🪶 Lightweight - Optimized for performance
• 🎭 Customizable - Easy to extend with custom effects

Installation

npm install react-holo framer-motion react react-dom

or

yarn add react-holo framer-motion react react-dom

Quick Start

import { HoloCard, HoloCardProvider } from 'react-holo';
import 'react-holo/dist/style.css';

function App() {
  return (
    <HoloCardProvider>
      <HoloCard
        id="card-1"
        name="Zeus"
        image="https://example.com/zeus.webp"
        effect="holo"
      />
    </HoloCardProvider>
  );
}

API Reference

HoloCard Component

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | id | string | "" | Unique identifier for the card | | name | string | "" | Name of the card (used for accessibility) | | image | string | "" | URL or path to the front image | | backImage | string | "" | URL or path to the back image | | effect | string | "holo" | The holographic effect type (see effects list below) | | foilMask | string | "" | Optional foil mask image URL | | showcase | boolean | false | Auto-animate on load | | customStyles | object | {} | Additional inline styles | | className | string | "" | Additional CSS classes |

Available Effects

• basic - Simple glare effect
• holo - Classic vertical beam holographic effect
• cosmos - Galaxy/cosmos effect with rainbow gradients
• rainbow - Glittery rainbow effect
• radiant - Cross-hatch radiant pattern
• amazing - Shiny glitter effect
• gold - Metallic gold shimmer
• reverse - Reverse holographic background
• v - Diagonal gradient effect
• v-full-art - Diagonal with texture pattern
• vmax - Subtle gradient with pronounced texture
• vstar - Bright pastel effect
• trainer-gallery - Metallic iridescent
• shiny - Silver foil effect

HoloCardProvider

Wraps your application to provide context for active card state and device orientation.

import { HoloCardProvider } from 'react-holo';

function App() {
  return (
    <HoloCardProvider>
      {/* Your cards here */}
    </HoloCardProvider>
  );
}

Hooks

useActiveCard

Access the currently active (zoomed) card.

import { useActiveCard } from 'react-holo';

function MyComponent() {
  const { activeCard, setActiveCard } = useActiveCard();

  return <div>Active: {activeCard ? 'Yes' : 'No'}</div>;
}

useOrientation

Access device orientation data for gyroscope effects.

import { useOrientation } from 'react-holo';

function MyComponent() {
  const { orientation, resetBaseOrientation } = useOrientation();

  return <div>Beta: {orientation.relative.beta}</div>;
}

Advanced Usage

Custom Effects

You can create custom holographic effects using CSS custom properties:

<HoloCard
  id="custom-card"
  image="/my-image.jpg"
  effect="holo"
  customStyles={{
    '--card-glow': 'rgb(255, 100, 200)',
    '--sunpillar-1': 'hsl(280, 100%, 70%)'
  }}
  className="my-custom-effect"
/>

CSS Variables

The component exposes numerous CSS custom properties for customization:

:root {
  --card-aspect: 0.718;          /* Card aspect ratio */
  --card-radius: 4.55% / 3.5%;  /* Border radius */
  --card-glow: hsl(175, 100%, 90%);  /* Glow color */
  --pointer-x: 50%;              /* Mouse X position */
  --pointer-y: 50%;              /* Mouse Y position */
  --card-opacity: 0;             /* Holographic effect opacity */
  --rotate-x: 0deg;              /* 3D rotation X */
  --rotate-y: 0deg;              /* 3D rotation Y */
  /* ... and many more */
}

Without Provider (Standalone)

You can use HoloCard without the provider if you don't need shared state:

import { HoloCard } from 'react-holo';
import { ActiveCardProvider, OrientationProvider } from 'react-holo';

// Each card with its own isolated context
function StandaloneCard() {
  return (
    <ActiveCardProvider>
      <OrientationProvider>
        <HoloCard
          id="standalone"
          image="/image.jpg"
          effect="rainbow"
        />
      </OrientationProvider>
    </ActiveCardProvider>
  );
}

Examples

Gallery of Cards

import { HoloCard, HoloCardProvider } from 'react-holo';
import 'react-holo/dist/style.css';

const cards = [
  { id: '1', name: 'Zeus', image: '/zeus.webp', effect: 'cosmos' },
  { id: '2', name: 'Poseidon', image: '/poseidon.webp', effect: 'rainbow' },
  { id: '3', name: 'Hades', image: '/hades.webp', effect: 'holo' },
];

function Gallery() {
  return (
    <HoloCardProvider>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '2rem' }}>
        {cards.map(card => (
          <HoloCard key={card.id} {...card} />
        ))}
      </div>
    </HoloCardProvider>
  );
}

Showcase Card

<HoloCard
  id="hero"
  name="Featured Card"
  image="/featured.jpg"
  effect="cosmos"
  showcase={true}  // Auto-animates on load
/>

Browser Support

• Chrome/Edge: ✅ Full support
• Firefox: ✅ Full support
• Safari: ✅ Full support
• Mobile: ✅ Includes gyroscope support

Performance Tips

1. Use loading="lazy" for images outside viewport
2. Limit the number of active cards with effects
3. Disable showcase mode for multiple cards
4. Consider using basic effect for list views

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT © 2025 Holo Card Contributors

Based on original work by Simon Goellner (@simeydotme)

Credits

• Original Pokemon Cards CSS by @simeydotme
• Powered by Framer Motion
• Built with React

Links

• Demo & Documentation
• GitHub Repository
• NPM Package
• Report Issues