Parallax Tilt Card

PreviousNext

Card with 3D parallax tilt effect and depth

Docs
animbitscomponent

Preview

Loading preview…
registry/new-york/animations/cards/parallax-tilt.tsx
"use client";
import * as React from "react";
import { motion, HTMLMotionProps } from "motion/react";
import { cn } from "@/lib/utils";
import {
  useParallaxTilt,
  type UseParallaxTiltOptions,
} from "@/lib/use-parallax-tilt";
export interface CardParallaxTiltProps
  extends Omit<HTMLMotionProps<"div">, "ref">,
    UseParallaxTiltOptions {}
export function CardParallaxTilt({
  children,
  className,
  maxTilt,
  duration,
  shadowIntensity,
  stiffness,
  damping,
  ...props
}: CardParallaxTiltProps) {
  const { tiltProps, ref } = useParallaxTilt({
    maxTilt,
    duration,
    shadowIntensity,
    stiffness,
    damping,
  });
  return (
    <motion.div
      ref={ref as any}
      {...tiltProps}
      className={cn("cursor-pointer", className)}
      {...props}
    >
      {children}
    </motion.div>
  );
}

Installation

npx shadcn@latest add @animbits/cards-parallax-tilt

Usage

import { CardsParallaxTilt } from "@/components/cards-parallax-tilt"
<CardsParallaxTilt />