@aufe/card-animation-react

A React library for creating beautiful holographic card animations inspired by Pokémon trading cards. ✨

Create stunning, interactive card effects with mouse-tracking 3D rotations and holographic shine effects.

🎨 Features

• 🌈 10+ Holographic Effects - Various holographic card styles (Rainbow, Cosmos, Shiny, etc.)
• 🎯 Mouse Tracking - Smooth 3D rotation following cursor movement
• 🔧 Customizable - Control individual effect layers
• 📦 TypeScript Support - Full type definitions included
• 🎭 Zero Dependencies - Only requires React (peer dependency)
• ⚡ Lightweight - Optimized bundle size
• 🎪 Storybook - Interactive component documentation

📦 Installation

npm install @aufe/card-animation-react

or

yarn add @aufe/card-animation-react

🚀 Quick Start

import { RegularHolo } from '@aufe/card-animation-react';
import '@aufe/card-animation-react/styles';

function App() {
  return (
    <RegularHolo>
      <div
        style={{
          width: '320px',
          height: '400px',
          borderRadius: '20px',
          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
        }}
      >
        <h1>Your Content Here</h1>
      </div>
    </RegularHolo>
  );
}

🎭 Available Components

Animation Components

All animation components wrap your content and add holographic effects:

RegularHolo

Basic holographic effect with rainbow bars

<RegularHolo rainbow={true} mask={true} shine={true}>
  {/* Your content */}
</RegularHolo>

RainbowHolo

Rainbow gradient holographic effect

<RainbowHolo rainbow={true} glitter={true} holo={true}>
  {/* Your content */}
</RainbowHolo>

RainbowAlt

Alternative rainbow style with foil effect

<RainbowAlt rainbow={true} glitter={true} foil={true}>
  {/* Your content */}
</RainbowAlt>

CosmosHolo

Cosmic space-themed holographic effect

<CosmosHolo shine={true} grad={true} holo={true}>
  {/* Your content */}
</CosmosHolo>

AmazingRare

Premium card effect with multiple layers

<AmazingRare shine={true} grad={true} holo={true}>
  {/* Your content */}
</AmazingRare>

ShinyRare

Shiny metallic holographic effect

<ShinyRare shine={true} grad={true} holo={true}>
  {/* Your content */}
</ShinyRare>

RadiantHolo

Radiant glow holographic effect

<RadiantHolo radiant={true} holo={true}>
  {/* Your content */}
</RadiantHolo>

Pikachu

Special Pikachu-style effect

<Pikachu shine={true} grad={true} holo={true}>
  {/* Your content */}
</Pikachu>

Utility Components

Rotator

Adds 3D rotation with smooth spring animation

import { Rotator } from '@aufe/card-animation-react';

<Rotator>{/* Your content */}</Rotator>;

Shine

Adds a moving shine effect

import { Shine } from '@aufe/card-animation-react';

<Shine>{/* Your content */}</Shine>;

Holo

Base holographic effect layer

import { Holo } from '@aufe/card-animation-react';

<Holo>{/* Your content */}</Holo>;

🎨 Combining Effects

You can combine multiple components for complex effects:

import { Rotator, Shine, RegularHolo } from '@aufe/card-animation-react';

<Rotator>
  <Shine>
    <RegularHolo>
      <div className='my-card'>
        <h1>Amazing Card</h1>
      </div>
    </RegularHolo>
  </Shine>
</Rotator>;

🔧 Custom Hook

useMouse

Track mouse position and get animation values:

import { useMouse } from '@aufe/card-animation-react';

function MyComponent() {
  const {
    rotation, // { x: number, y: number }
    position, // { x: number, y: number }
    positionPercent, // { x: number, y: number }
    styleVar, // CSS variables object
    handleMouseMove,
    handleMouseLeave,
  } = useMouse();

  return (
    <div onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave} style={styleVar}>
      {/* Your content */}
    </div>
  );
}

🎯 TypeScript Support

Full TypeScript support with comprehensive type definitions:

import type { RegularHoloProps, RainbowHoloProps, UseMouseReturn, StyleVariables } from '@aufe/card-animation-react';

🎪 Storybook

Explore all components interactively:

git clone https://github.com/fito-cheol/Card-Animation-React.git
cd Card-Animation-React
npm install
npm run storybook

📚 API Reference

Common Props

Most animation components share these props:

| Prop | Type | Default | Description | | --------------- | ---------------- | --------- | --------------------------- | | children | ReactNode | required | Content to wrap with effect | | styleVarProps | StyleVariables | undefined | Override CSS variables |

Effect-Specific Props

Each component has toggles for individual effect layers. Check TypeScript definitions for details.

🎨 Styling

Import the CSS file in your app:

import '@aufe/card-animation-react/styles';

Or import in your CSS:

@import '@aufe/card-animation-react/styles';

🤝 Contributing

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

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📝 License

MIT © fito-cheol

🙏 Acknowledgments

• Inspired by Pokémon Trading Card Game holographic effects
• Built with React, TypeScript, and Vite
• Uses tiny-spring for smooth animations

📧 Contact

• GitHub: @fito-cheol
• Issues: GitHub Issues

Made with ❤️ by fito-cheol