StackBits - React UI & Full-Stack Code Library

Cards > Flip Reveal Card

Flip Reveal Card

Meet the FlipReveal Card, a sleek and interactive card that flips on hover, revealing hidden details with a smooth 3D effect. Whether it's product specs, fun facts, or secret messages, this card adds a touch of magic to any UI. Give your content a flip-tastic twist! 🚀🔥

Preview

Sony WHCH720N

Crystal clear sound,
40-hour battery life

$115.99

Key Features:

🎧 Active Noise Cancellation

🔋 40-hour battery with fast charging

🌊 IPX7 Waterproof & Sweatproof

📱 Bluetooth 5.3 with ultra-low latency

Follow below steps 👇🏻

Install dependencies

1npm i framer-motion

Styles

Add these styles in your .css file

1.flip-back {
2  transform: rotateY(180deg);
3}

Component

Create a file flip-reveal-card.tsx in your components folder and paste this code

1import React from 'react';
2import { motion } from 'framer-motion';
3
4const FlipRevealCard = ({
5    frontContent,
6    backContent
7}: {
8    // * Remove these data types for javascript
9    frontContent?: string | React.ReactNode;
10    backContent?: string | React.ReactNode;
11    // * ----
12}) => {
13    const [isHovered, setIsHovered] = React.useState(false);
14
15    return (
16    <div
17        onMouseEnter={() => setIsHovered(true)}
18        onMouseLeave={() => setIsHovered(false)}
19        style={{ perspective: '1000px' }}
20    >
21        <motion.div
22        initial={{ rotateY: 0 }}
23        animate={{
24            rotateY: isHovered ? 180 : 0,
25            scale: isHovered ? 1.1 : 1,
26            transition: { duration: 0.5 }
27        }}
28        style={{
29            transformStyle: 'preserve-3d'
30        }}
31        className="flex items-center justify-center"
32        >
33        {/* Front Side */}
34        <div
35            className="flex items-center justify-center"
36            style={{
37            backfaceVisibility: 'hidden'
38            }}
39        >
40            {frontContent}
41        </div>
42
43        {/* Back Side*/}
44        <div
45            className="absolute top-0 left-0 flex items-center justify-center flip-back"
46            style={{
47            backfaceVisibility: 'hidden'
48            }}
49        >
50            {backContent}
51        </div>
52        </motion.div>
53    </div>
54    );
55};
56
57export default FlipRevealCard;

Usage

1<FlipRevealCard
2    frontContent={
3        <div className="border-[1px] border-neutral-400 sm:h-[200px] h-[190px] w-[275px] sm:w-[350px] rounded-xl relative bg-gradient-to-tr from-neutral-500 to-blue-500 p-5 flex flex-col items-end justify-center">
4        <Image
5            src="/sony-headphones.png"
6            alt="Sony Headphones"
7            width={300}
8            height={200}
9        />
10        <p className="absolute bottom-0 left-0 p-2 text-xl font-extrabold">
11            Crystal clear sound,
12            <br />
13            40-hour battery life
14        </p>
15        <p className="absolute top-0 right-0 p-2 text-xl font-extrabold">$115.99</p>
16        </div>
17    }
18    backContent={
19        <div className="border-[1px] border-neutral-400 sm:h-[200px] sm:w-[350px] rounded-xl relative bg-gradient-to-tr from-neutral-500 to-blue-500 p-5 flex flex-col items-start justify-center">
20        <p className="font-bold">Key Features:</p>
21        <div className="grid grid-cols-1 mt-1 font-medium">
22            <p>🎧 Active Noise Cancellation</p>
23            <p>🔋 40-hour battery with fast charging</p>
24            <p> 🌊 IPX7 Waterproof & Sweatproof </p>
25            <p>📱 Bluetooth 5.3 with ultra-low latency</p>
26        </div>
27        </div>
28    }
29/>

⭐️ Got a question or feedback?
Feel free to reach out!