3D Tilt Card CTA

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button, media-slot dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/cta/cta45.tsx instead.

Usage

The file also exports cta45Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Cta45, cta45Demo } from "@/components/blocks/cta/cta45";

export default function Page() {
  return <Cta45 {...cta45Demo} />;
}

Props

Behavior notes

• The 3D tilt is a real, mouse-driven effect: an onMouseMove handler computes the cursor's position relative to the card's bounding box and derives rotateX/rotateY (up to ±8deg), applied via an inline perspective/rotate transform. onMouseLeave resets the tilt back to flat.
• The background image's zoom-on-hover (group-hover:scale-105) and the diagonal shine sweep (a pure-CSS @keyframes animation triggered by :hover) are both decorative: neither responds to cursor position, only to whether the pointer is anywhere over the card.
• The call-to-action button is decorative: it renders as a real Next.js Link via the button's render prop, but defaults to "#" and doesn't perform a real navigation of its own.