"use client"

import React, { useRef, useState, useCallback } from "react"
import {
  motion,
  useMotionValue,
  useMotionTemplate,
  useSpring,
  useTransform
} from "framer-motion"
import { cn } from "@/lib/utils"

interface ParallaxTiltCardProps {
  children: React.ReactNode
  className?: string
  containerClassName?: string
  tiltX?: number
  tiltY?: number
  perspective?: number
  scale?: number
}

export function ParallaxTiltCard({
  children,
  className,
  containerClassName,
  tiltX = 20,
  tiltY = 20,
  perspective = 1000,
  scale = 1.05,
}: ParallaxTiltCardProps) {
  const ref = useRef<HTMLDivElement>(null)
  const [isHovered, setIsHovered] = useState(false)

  const x = useMotionValue(0)
  const y = useMotionValue(0)

  const mouseX = useSpring(x, { stiffness: 150, damping: 20 })
  const mouseY = useSpring(y, { stiffness: 150, damping: 20 })

  const rotateX = useTransform(mouseY, [-0.5, 0.5], [tiltX, -tiltX])
  const rotateY = useTransform(mouseX, [-0.5, 0.5], [-tiltY, tiltY])
  const shineX = useTransform(mouseX, [-0.5, 0.5], ["0%", "100%"])
  const shineY = useTransform(mouseY, [-0.5, 0.5], ["0%", "100%"])
  const shineBackground = useMotionTemplate`
    radial-gradient(
      800px circle at ${shineX} ${shineY},
      rgba(255, 255, 255, 0.12),
      transparent 40%
    )
  `

  const handleMouseMove = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
    if (!ref.current) return

    const rect = ref.current.getBoundingClientRect()
    const width = rect.width
    const height = rect.height
    
    const mouseXPos = e.clientX - rect.left
    const mouseYPos = e.clientY - rect.top
    
    const xPct = (mouseXPos / width) - 0.5
    const yPct = (mouseYPos / height) - 0.5

    x.set(xPct)
    y.set(yPct)
  }, [x, y])

  const handleMouseLeave = useCallback(() => {
    setIsHovered(false)
    x.set(0)
    y.set(0)
  }, [x, y])

  const handleMouseEnter = useCallback(() => {
    setIsHovered(true)
  }, [])

  return (
    <div
      ref={ref}
      className={cn("relative flex items-center justify-center", containerClassName)}
      style={{
        perspective: perspective,
      }}
      onMouseEnter={handleMouseEnter}
      onMouseMove={handleMouseMove}
      onMouseLeave={handleMouseLeave}
    >
      <motion.div
        className={cn(
          "group relative flex flex-col items-center justify-center p-6 bg-card text-card-foreground shadow-xl rounded-xl border border-border/50",
          className
        )}
        style={{
          rotateX,
          rotateY,
          transformStyle: "preserve-3d",
        }}
        animate={{
          scale: isHovered ? scale : 1,
        }}
        transition={{
          duration: 0.2,
        }}
      >
        <div style={{ transform: "translateZ(50px)" }} className="absolute inset-0 pointer-events-none rounded-xl bg-gradient-to-br from-primary/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
        
        {children}
        
        {/* Shine effect */}
        <motion.div
          className="absolute inset-0 pointer-events-none rounded-xl"
          style={{
            background: shineBackground,
            zIndex: 10,
          }}
        />
      </motion.div>
    </div>
  )
}

interface ParallaxLayerProps {
  children: React.ReactNode
  className?: string
  depth?: number
}

export function ParallaxLayer({
  children,
  className,
  depth = 20,
}: ParallaxLayerProps) {
  return (
    <div
      className={cn("relative", className)}
      style={{
        transform: `translateZ(${depth}px)`,
        transformStyle: "preserve-3d",
      }}
    >
      {children}
    </div>
  )
}
Parallax Tilt Card

Dependencies

Files

Installation
