Loading effect…
Loading preview…
cards · react · free
A card that tilts in 3D toward the pointer on hover.
"use client";
import {
useCallback,
useEffect,
useRef,
useState,
type CSSProperties,
type PointerEvent,
type ReactNode,
} from "react";
type TiltCardProps = {
children?: ReactNode;
className?: string;
maxTilt?: number;
};
export function TiltCard({
children,A card that tilts in 3D toward the pointer on hover.
Copy src/TiltCard.tsx into your React project. No extra dependencies.
import { TiltCard } from "./TiltCard";
export function Example() {
return (
<TiltCard>
<h3>Hover me</h3>
<p>Subtle perspective tilt follows the pointer.</p>
</TiltCard>
);
}"use client")perspective + rotateX / rotateY from pointer positionprefers-reduced-motion (no tilt)