[V0_FILE]typescriptreact:file="components/3d-card-demo.tsx" "use client" import Image from "next/image" import { CardBody, CardContainer, CardItem } from "@/components/ui/3d-card" import Link from "next/link" export default function ThreeDCardDemo() { return ( Make things float in air Hover over this card to unleash the power of CSS perspective thumbnail

Try now → Sign up

) } [V0_FILE]typescriptreact:file="components/ui/3d-card.tsx" "use client" import { cn } from "@/lib/utils" import type React from "react" import { createContext, useState, useContext, useRef, useEffect } from "react" const MouseEnterContext = createContext<[boolean, React.Dispatch>] | undefined>(undefined) export const CardContainer = ({ children, className, containerClassName, }: { children?: React.ReactNode className?: string containerClassName?: string }) => { const containerRef = useRef(null) const [isMouseEntered, setIsMouseEntered] = useState(false) const handleMouseMove = (e: React.MouseEvent) => { if (!containerRef.current) return const { left, top, width, height } = containerRef.current.getBoundingClientRect() const x = (e.clientX - left - width / 2) / 25 const y = (e.clientY - top - height / 2) / 25 containerRef.current.style.transform = `rotateY(${x}deg) rotateX(${y}deg)` } const handleMouseEnter = (e: React.MouseEvent) => { setIsMouseEntered(true) if (!containerRef.current) return } const handleMouseLeave = (e: React.MouseEvent) => { if (!containerRef.current) return setIsMouseEntered(false) containerRef.current.style.transform = `rotateY(0deg) rotateX(0deg)` } return (

{children}

) } export const CardBody = ({ children, className, }: { children: React.ReactNode className?: string }) => { return (

*]:[transform-style:preserve-3d]", className)}> {children}

) } export const CardItem = ({ as: Tag = "div", children, className, translateX = 0, translateY = 0, translateZ = 0, rotateX = 0, rotateY = 0, rotateZ = 0, ...rest }: { as?: React.ElementType children: React.ReactNode className?: string translateX?: number | string translateY?: number | string translateZ?: number | string rotateX?: number | string rotateY?: number | string rotateZ?: number | string [key: string]: any }) => { const ref = useRef(null) const [isMouseEntered] = useMouseEnter() useEffect(() => { handleAnimations() }, [isMouseEntered]) const handleAnimations = () => { if (!ref.current) return if (isMouseEntered) { ref.current.style.transform = `translateX(${translateX}px) translateY(${translateY}px) translateZ(${translateZ}px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotateZ(${rotateZ}deg)` } else { ref.current.style.transform = `translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg)` } } return ( {children} ) } // Create a hook to use the context export const useMouseEnter = () => { const context = useContext(MouseEnterContext) if (context === undefined) { throw new Error("useMouseEnter must be used within a MouseEnterProvider") } return context }

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This