Component

Card Reveal Effect

The Card Reveal Effect Component offers an immersive experience by mimicking a book-opening animation on hover. This component is designed to reveal additional information in a visually appealing way, ideal for story-based content or product details, providing a dynamic and engaging user experience.

Features

  • ▸Book-Opening Animation: The component uses a 3D hinge animation to give a realistic book-opening effect, allowing users to reveal content as if turning a page.
  • ▸Rich Content Display: Perfect for detailed cards, it offers space for multimedia elements like text, images, and icons, making it ideal for storytelling or product showcases
  • ▸Customizable Styling: Easily customize colors, fonts, and animation speed to match the visual style of your brand, allowing seamless integration.
  • ▸Smooth Transitions: Built with Framer Motion or similar animation libraries, the component transitions smoothly between states, enhancing the interactive feel.
  • ▸Responsive Design: Optimized for various devices and screen sizes, ensuring that the reveal effect is accessible on desktops, tablets, and mobile devices.

Don't know the drill?

Don't Worry just Hover on the Card

Designed By SparkUI

Got the drill?

Loved it?

Do follow me on X

@Knight_s18
Source Code

'use client';
import React from 'react';
import Image from 'next/image';
import bg from 'path-to-your-background-image';

function CardReveal({content}){
  const [hovered, setHovered] = React.useState(false);

  return (
    <div className="relative w-64 max-w-[95%] min-h-80 rounded-lg bg-gray-100 shadow-md shadow-black flex items-center justify-center text-yellow text-center [transform:preserve-3d] [perspective:2000px]"
          onMouseEnter={()=>setHovered(true)}
          onMouseLeave={()=>setHovered(false)}
        >
          <div className={`absolute overflow-hidden top-0 h-full w-full shadow-md shadow-black origin-left rounded-lg flex flex-col items-center justify-between cursor-pointer transition-all duration-500 p-4 ${(hovered)?"[transform:rotateY(-80deg)]":""}`}>
            <Image src={bg} height={1080} width={1440} className='absolute top-0 h-full w-full'/>
            <div className='h-full w-full z-[1] flex flex-col justify-between'>
              <div className='flex flex-col gap-y-3'>
                <p className='text-xl font-semibold text-white'>{content.title}</p>
                <p className='text-sm text-white'>{content.subtitle}</p>
              </div>
              <p className='text-sm text-yellow-500 font-semibold'>Designed By SparkUI</p>
            </div>
          </div>
          <div className="flex flex-col gap-y-8 justify-center w-full items-center text-black">
            <span className='w-auto mx-10'>{content.description}</span>
          </div>
    </div>
  )
}
export default CardReveal;
sparkui