Tilted Card

A highly responsive 3D card utilizing Framer Motion spring physics. It dynamically calculates cursor offsets to apply localized 3D rotations, complete with an attached tooltip that flows with cursor velocity.

Live Preview

Installation

CLI

npx @modus-ui/cli add tilted-card

Manual

Copy the code from the component tab.
Create a file at components/ui/tilted-card.tsx.
Paste the code.

Usage

tsx

import { TiltedCard } from "@/components/ui/tilted-card";

export default function Example() {
  return (
    <TiltedCard
      imageSrc="/path/to/image.jpg"
      altText="Description"
      captionText="Tooltip Content"
      containerHeight={400}
      containerWidth={300}
      imageHeight={400}
      imageWidth={300}
      rotateAmplitude={12}
      scaleOnHover={1.1}
      showTooltip={true}
      displayOverlayContent={true}
      overlayContent={
        <div className="flex h-[400px] w-[300px] flex-col justify-end rounded-xl p-6">
          <p className="text-2xl font-bold text-white">Overlay Text</p>
        </div>
      }
    />
  );
}

Props

Prop	Type	Default	Description
`imageSrc`	`string`	-	Image URL.
`altText`	`string`	`"Tilted card image"`	Alt text for the image.
`captionText`	`string`	`""`	Tooltip text that follows the cursor.
`containerHeight`	`string \| number`	`"300px"`	Height of the container.
`containerWidth`	`string \| number`	`"100%"`	Width of the container.
`imageHeight`	`string \| number`	`"300px"`	Height of the image.
`imageWidth`	`string \| number`	`"300px"`	Width of the image.
`scaleOnHover`	`number`	`1.1`	Scale applied while hovered.
`rotateAmplitude`	`number`	`14`	Maximum tilt in degrees.
`showMobileWarning`	`boolean`	`false`	Shows a note that the effect needs a pointer.
`showTooltip`	`boolean`	`true`	Shows the caption tooltip.
`overlayContent`	`React.ReactNode`	`null`	Content layered over the image.
`displayOverlayContent`	`boolean`	`false`	Shows `overlayContent`.

Tilted Card

Installation

CLI

Manual

Usage

Props

Comments