Drift Card

1"use client";
2import React, { useState } from "react";
3import { cn } from "@/lib/utils";
4 
5interface DriftCardProps extends React.HTMLAttributes<HTMLDivElement> {
6  children?: React.ReactNode;
7}
8 
9export default function DriftCard({
10  children,
11  className,
12  style,
13  ...props
14}: DriftCardProps) {
15  const [position, setPosition] = useState({ x: 0, y: 0 });
16 
17  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
18    const card = e.currentTarget;
19    const rect = card.getBoundingClientRect();
20    const x = e.clientX - rect.left;
21    const y = e.clientY - rect.top;
22    const centerX = rect.width / 2;
23    const centerY = rect.height / 2;
24    const offsetX = ((x - centerX) / centerX) * 12;
25    const offsetY = ((y - centerY) / centerY) * 12;
26    setPosition({ x: offsetX, y: offsetY });
27  };
28 
29  const handleMouseLeave = () => {
30    setPosition({ x: 0, y: 0 });
31  };
32 
33  return (
34    <div
35      className={cn(
36        "relative overflow-hidden rounded-2xl border border-border shadow-2xl p-3 bg-card",
37        className
38      )}
39      style={style}
40      {...props}
41    >
42      <div
43        className="relative flex-1 rounded-2xl border border-border p-2 h-full w-full"
44        onMouseMove={handleMouseMove}
45        onMouseLeave={handleMouseLeave}
46        style={{
47          background:
48            "repeating-linear-gradient(45deg, hsl(var(--muted) / 0.3) 0px, hsl(var(--muted) / 0.3) 10px, hsl(var(--border) / 1) 10px, hsl(var(--border) / 1) 11px)",
49        }}
50      >
51        <div
52          className="absolute inset-2 opacity-10 rounded-2xl pointer-events-none"
53          style={{
54            backgroundImage:
55              "repeating-linear-gradient(315deg, rgba(255,255,255,0.1) 0, rgba(255,255,255,0.1) 1px, transparent 0, transparent 50%)",
56            backgroundSize: "10px 10px",
57          }}
58        />
59 
60        <div
61          className="absolute inset-2 rounded-2xl bg-card shadow-lg flex items-center justify-center transition-all duration-300 ease-out"
62          style={{
63            transform: `translate(${position.x}px, ${position.y}px)`,
64          }}
65        >
66          {children}
67        </div>
68      </div>
69    </div>
70  );
71}