Docs
3D Reflective Card

3D Reflective Card

Displays a beautiful 3D card reflective flashing effect.

Loading...

Installation

Update tailwind.config.js

Add the following animations to your tailwind.config.js file:

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
       keyframes: {
        card: {
          "0%": { transform: "rotateX(0deg) rotateY(0deg)" },
          "25%": { transform: "rotateX(5deg) rotateY(-5deg)" },
          "50%": { transform: "rotateX(-2deg) rotateY(10deg)" },
          "75%": { transform: "rotateX(-5deg) rotateY(5deg)" },
          "100%": { transform: "rotateX(5deg) rotateY(-10deg)" },
        },
        sparkle: {
          "0%": {
            opacity: "0.3",
            backgroundPosition: "center",
          },
          "50%": {
            opacity: "0.7",
            backgroundPosition: "top left",
          },
          "100%": {
            opacity: "0.5",
            backgroundPosition: "bottom right",
          },
        },
        gradient: {
          "0%": {
            backgroundPosition: "0% 50%",
          },
          "50%": {
            backgroundPosition: "100% 50%",
          },
          "100%": {
            backgroundPosition: "0% 50%",
          },
        },
        },
       animation: {
        card: "card 6s infinite ease-in-out",
        sparkle: "sparkle 4s infinite ease-in-out",
        gradient: "gradient 8s ease infinite",
      },
    },
  },
}

Copy and paste the Event Calendar code into your project.

API Reference

Props

PropTypeDescriptionDefault
imageUrlstringURL of the card's background imageRequired
widthstringWidth of the card"250px"
heightstringHeight of the card"400px"
sparkleUrlstringURL of the sparkle effect image"https://img.buoucoding.com/image/sparkles.gif"
gradientColors[string, string, string]Array of gradient colors for the holographic effect["#06e8ff", "#ffab2e", "#ff2212"]
sensitivitynumberSensitivity of the 3D rotation effect (lower = more sensitive)10
classNamestringAdditional CSS classes to apply to the card container""
imageClassNamestringAdditional CSS classes to apply to the card image""
autoAnimatebooleanWhether to enable auto-animation when not hoveredfalse
onHover() => voidCallback function when card is hoveredundefined
onHoverEnd() => voidCallback function when card hover endsundefined

Usage Examples

Basic Usage

import HolographicCard from "@/components/holographic-card"
 
export default function MyComponent() {
  return (
    <HolographicCard imageUrl="https://example.com/my-image.jpg" />
  )
}

Custom Styling

<HolographicCard 
  imageUrl="https://example.com/my-image.jpg"
  width="300px"
  height="450px"
  gradientColors={["#ff00cc", "#3333ff", "#00ffcc"]}
  className="shadow-xl rounded-xl"
  imageClassName="grayscale hover:grayscale-0"
/>

With Animation and Events

<HolographicCard 
  imageUrl="https://example.com/my-image.jpg"
  autoAnimate={true}
  sensitivity={15}
  onHover={() => console.log("Card hovered")}
  onHoverEnd={() => console.log("Hover ended")}
/>

In a Collection

The component works great in collections or grids. You can see a full implementation in the card-collection.tsx component.

Features

  • Responsive Design: Works on all screen sizes
  • Customizable Appearance: Adjust colors, dimensions, and effects
  • Auto-Animation: Optional animation when not being interacted with
  • Event Callbacks: Hook into hover events for additional interactivity
  • Accessibility: Fully keyboard navigable with proper focus states
  • Performance Optimized: Uses efficient CSS transitions and transforms

The component is built with Tailwind CSS and React, making it easy to integrate into any project.

Grid3D Visual Card