proNew105 lines · framer-motion

Card Tilt 3D

Cards that lean into the cursor, not just toward it. A row of cards with a true 3D tilt driven by pointer position, springing back to flat on release, with an optional moving glare layer for extra depth.

Use it for: A short list of product pillars or runtime guarantees right under a hero, where a bit of physical depth helps the section feel premium instead of flat text in boxes.
Themes: Light + dark
License: Commercial use

Live

Under the hood

Cards that lean toward you

Runtime

Cold start under 200ms

Agents resume mid-thought instead of re-reading the whole transcript.

Memory

Scoped, not shared

Every run gets its own slice of memory, never another user's.

Tools

Typed at the edge

Bad arguments are rejected before a tool call ever runs.

tsx

"use client";

import * as React from "react";
import { motion, useMotionTemplate, useMotionValue, useReducedMotion, useSpring } from "framer-motion";
import { cn } from "@/lib/utils";

function useReducedMotionSafe() {
  const prefersReduced = useReducedMotion();
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => setMounted(true), []);
  return mounted ? !!prefersReduced : false;
}

export interface TiltCardItem {
  tag: string;
  title: string;
  description: string;
}

export interface CardTilt3DProps {
  eyebrow?: string;
  title?: string;

The rest is in Pro.

Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.

Get Pro

How it behaves

→Pointer position inside each card drives rotateX/rotateY through a spring, so the tilt has real inertia instead of snapping.
→Content is lifted on its own translateZ layer so it reads as sitting above the card surface during the tilt.
→An optional radial glare follows the cursor on top of the tilt for a glassy highlight; toggled off with glare.
→maxTilt scales how far the card can rotate; tilt and glare both reset smoothly on pointer leave.
→All pointer-driven motion is skipped under prefers-reduced-motion, leaving flat static cards.

Accessibility

✓Tilt and glare layers are purely visual and `aria-hidden`/`pointer-events-none` where applicable; they never block the card's real content.
✓Card copy keeps normal reading order and contrast regardless of tilt angle.
✓Honours prefers-reduced-motion.