Card Flip

1"use client";
2 
3/**
4 * @author: @dorianbaffier
5 * @description: Card Flip
6 * @version: 1.0.0
7 * @date: 2025-06-26
8 * @license: MIT
9 * @website: https://kokonutui.com
10 * @github: https://github.com/kokonut-labs/kokonutui
11 */
12 
13import { ArrowRight, Repeat2 } from "lucide-react";
14import { useState } from "react";
15import { cn } from "@/lib/utils";
16 
17export interface CardFlipProps {
18  title?: string;
19  subtitle?: string;
20  description?: string;
21  features?: string[];
22}
23 
24export default function CardFlip({
25  title = "Design Systems",
26  subtitle = "Explore the fundamentals",
27  description = "Dive deep into the world of modern UI/UX design.",
28  features = ["UI/UX", "Modern Design", "Tailwind CSS", "Kokonut UI"],
29}: CardFlipProps) {
30  const [isFlipped, setIsFlipped] = useState(false);
31 
32  return (
33    <div
34      className="group relative h-[320px] w-full max-w-[280px] [perspective:2000px]"
35      onMouseEnter={() => setIsFlipped(true)}
36      onMouseLeave={() => setIsFlipped(false)}
37    >
38      <div
39        className={cn(
40          "relative h-full w-full",
41          "[transform-style:preserve-3d]",
42          "transition-[transform] duration-500 ease-[cubic-bezier(0.77,0,0.175,1)]",
43          "motion-reduce:transition-none",
44          isFlipped
45            ? "[transform:rotateY(180deg)]"
46            : "[transform:rotateY(0deg)]"
47        )}
48      >
49        <div
50          className={cn(
51            "absolute inset-0 h-full w-full",
52            "[backface-visibility:hidden] [transform:rotateY(0deg)]",
53            "overflow-hidden rounded-2xl",
54            "bg-zinc-50 dark:bg-zinc-900",
55            "border border-zinc-200 dark:border-zinc-800/50",
56            "shadow-xs dark:shadow-lg",
57            "transition-shadow duration-500",
58            "group-hover:shadow-lg dark:group-hover:shadow-xl"
59          )}
60        >
61          <div className="relative h-full overflow-hidden bg-gradient-to-b from-zinc-100 to-white dark:from-zinc-900 dark:to-black">
62            <div
63              aria-hidden="true"
64              className="absolute inset-0 flex items-start justify-center pt-24"
65            >
66              <div className="relative flex h-[100px] w-[200px] items-center justify-center">
67                {[...Array(10)].map((_, i) => (
68                  <div
69                    className={cn(
70                      "absolute h-[50px] w-[50px]",
71                      "rounded-[140px]",
72                      "animate-[scale_3s_linear_infinite]",
73// … truncated