FlipFlow

1'use client';
2import { cn } from '@/lib/utils';
3import { motion } from 'motion/react';
4import { useState } from 'react';
5 
6interface CardData {
7  name: string;
8}
9 
10interface FlowProps extends React.HTMLAttributes<HTMLDivElement> {
11  vertical?: boolean;
12  repeat?: number;
13  reverse?: boolean;
14  pauseOnHover?: boolean;
15  applyMask?: boolean;
16}
17 
18const Flow = ({
19  children,
20  vertical = false,
21  repeat = 4,
22  pauseOnHover = false,
23  reverse = false,
24  className,
25  applyMask = true,
26  ...props
27}: FlowProps) => (
28  <div
29    {...props}
30    className={cn(
31      'group relative flex h-full w-full overflow-hidden p-1 [--duration:10s] [--gap:12px] gap-(--gap)',
32      vertical ? 'flex-col' : 'flex-row',
33      className,
34    )}
35  >
36    {Array.from({ length: repeat }).map((_, index) => (
37      <div
38        key={`item-${index}`}
39        className={cn('flex shrink-0 gap-(--gap)', {
40          'group-hover:paused': pauseOnHover,
41          'direction-reverse': reverse,
42          'animate-canopy-horizontal flex-row': !vertical,
43          'animate-canopy-vertical flex-col': vertical,
44        })}
45      >
46        {children}
47      </div>
48    ))}
49    {applyMask && (
50      <div
51        className={cn(
52          'pointer-events-none absolute inset-0 z-10 h-full w-full',
53          vertical
54            ? 'bg-linear-to-b from-background via-transparent to-background'
55            : 'bg-linear-to-r from-background via-transparent to-background',
56        )}
57      />
58    )}
59  </div>
60);
61 
62const Card = ({
63  card,
64  className,
65  colorClass,
66  backColorClass,
67}: {
68  card: CardData;
69  className?: string;
70  colorClass: string;
71  backColorClass: string;
72}) => {
73  const [flip, setFlip] = useState(false);
74 
75  return (
76    <div
77      className={cn('h-20 w-48 shrink-0 cursor-pointer', className)}
78      onMouseEnter={() => setFlip(true)}
79      onMouseLeave={() => setFlip(false)}
80      style={{ perspective: '1000px' }}
81    >
82      <motion.div
83        className='relative h-full w-full'
84        animate={{ rotateX: flip ? 180 : 0 }}
85        transition={{ duration: 0.6, type: 'spring', stiffness: 100 }}
86        style={{ transformStyle: 'preserve-3d' }}
87      >
88        <motion.div
89          className='absolute inset-0 rounded-2xl overflow-hidden'
90          style={{ backfaceVisibility: 'hidden' }}
91        >
92          <div
93            className={cn(
94              'h-full w-full border-4 border-black dark:border-white rounded-2xl flex items-center justify-center px-4',
95              colorClass,
96            )}
97// … truncated