Card

v3cn/card

FreeBlock

A component for displaying Card.

Live preview

live · rendered by the registry

Rendered by v3cn on their own page — this is the component running, not a screenshot of it.

Install it

npx shadcn@latest add https://v3cn.vineet.pro/r/card.json

Source

registry/v3cn/card/card.tsxv3cn.vineet.pro/r/card.json

1"use client";
2 
3import React, {
4  createContext,
5  useContext,
6  useEffect,
7  useRef,
8  useState,
9} from "react";
10 
11import { cn } from "@/lib/utils";
12 
13const MouseEnterContext = createContext<
14  [boolean, React.Dispatch<React.SetStateAction<boolean>>] | undefined
15>(undefined);
16 
17export const CardContainer = ({
18  children,
19  className,
20  containerClassName,
21}: {
22  children?: React.ReactNode;
23  className?: string;
24  containerClassName?: string;
25}) => {
26  const containerRef = useRef<HTMLDivElement>(null);
27  const [isMouseEntered, setIsMouseEntered] = useState(false);
28 
29  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
30    if (!containerRef.current) return;
31    const { left, top, width, height } =
32      containerRef.current.getBoundingClientRect();
33    const x = (e.clientX - left - width / 2) / 25;
34    const y = (e.clientY - top - height / 2) / 25;
35    containerRef.current.style.transform = `rotateY(${x}deg) rotateX(${y}deg)`;
36  };
37 
38  const handleMouseEnter = () => {
39    setIsMouseEntered(true);
40    if (!containerRef.current) return;
41  };
42 
43  const handleMouseLeave = () => {
44    if (!containerRef.current) return;
45    setIsMouseEntered(false);
46    containerRef.current.style.transform = "rotateY(0deg) rotateX(0deg)";
47  };
48  return (
49    <MouseEnterContext.Provider value={[isMouseEntered, setIsMouseEntered]}>
50      <div
51        className={cn("flex items-center justify-center", containerClassName)}
52        style={{
53          perspective: "1000px",
54        }}
55      >
56        <div
57          ref={containerRef}
58          onMouseEnter={handleMouseEnter}
59          onMouseMove={handleMouseMove}
60          onMouseLeave={handleMouseLeave}
61          className={cn(
62            "flex items-center justify-center relative transition-all duration-200 ease-linear",
63            className
64          )}
65          style={{
66            transformStyle: "preserve-3d",
67          }}
68        >
69          {children}
70        </div>
71      </div>
72    </MouseEnterContext.Provider>
73  );
74};
75 
76export const CardItem = ({
77  children,
78  className,
79  translateX = 0,
80  translateY = 0,
81  translateZ = 0,
82  rotateX = 0,
83  rotateY = 0,
84  rotateZ = 0,
85  ...rest
86}: {
87  as?: React.ElementType;
88  children: React.ReactNode;
89  className?: string;
90  translateX?: number | string;
91  translateY?: number | string;
92  translateZ?: number | string;
93  rotateX?: number | string;
94  rotateY?: number | string;
95  rotateZ?: number | string;
96}) => {
97  const ref = useRef<HTMLDivElement>(null);
98// … truncated

Files it writes

registry/v3cn/card/card.tsx