Sample content

Bring your own card

Wrap the tilt primitive around pricing cards, feature panels, dashboards, or any surface you already have.

Cards3D

3D Tilt

A responsive tilt interaction that adds depth to cards and preview panels.

"use client";

import { useEffect, useRef } from "react";

function TiltCard({ children }) {
  const cardRef = useRef(null);
  const stateRef = useRef({
    rotateX: 0,
    rotateY: 0,
    glareX: 50,
    glareY: 50,
    targetX: 0,
    targetY: 0,
    targetGlareX: 50,
    targetGlareY: 50,
    active: 0,
    targetActive: 0
  });

useEffect(() => {
    const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduceMotion) return;
    const card = cardRef.current;
    if (!card) return;

const config = {
      maxTilt: 18,
      perspective: 900,
      scale: 1.04,
      smoothing: 0.14
    };

const onMove = (event) => {
      const rect = card.getBoundingClientRect();
      const px = (event.clientX - rect.left) / rect.width;
      const py = (event.clientY - rect.top) / rect.height;
      const state = stateRef.current;
      state.targetX = (0.5 - py) * config.maxTilt;
      state.targetY = (px - 0.5) * config.maxTilt;
      state.targetGlareX = px * 100;
      state.targetGlareY = py * 100;
      state.targetActive = 1;
    };

const onLeave = () => {
      const state = stateRef.current;
      state.targetX = 0;
      state.targetY = 0;
      state.targetGlareX = 50;
      state.targetGlareY = 50;
      state.targetActive = 0;
    };

card.addEventListener("pointermove", onMove);
    card.addEventListener("pointerleave", onLeave);
    let frame = requestAnimationFrame(animate);

return () => {
      cancelAnimationFrame(frame);
      card.removeEventListener("pointermove", onMove);
      card.removeEventListener("pointerleave", onLeave);
    };
  }, []);

return (
    <div
      ref={cardRef}
      style={{
        background: "#111827",
        borderRadius: 18,
        color: "#ffffff",
        minHeight: 280,
        overflow: "hidden",
        padding: 32,
        position: "relative",
        willChange: "transform"
      }}
    >
      <div style={{
        background: `linear-gradient(135deg, transparent 28%, #60a5fa40 50%, transparent 72%)`,
        inset: 0,
        opacity: "var(--glare-opacity, 0)",
        pointerEvents: "none",
        position: "absolute"
      }} />
      <div style={{ position: "relative" }}>{children}</div>
    </div>
  );
}

export default function Preview() {
  const content = {
    eyebrow: "Sample content",
    title: "Bring your own card",
    description: "Wrap the tilt primitive around pricing cards, feature panels, dashboards, or any surface you already have."
  };

return (
    <TiltCard>
      <p style={{ margin: 0, font: "600 12px system-ui", letterSpacing: "0.18em", opacity: 0.55, textTransform: "uppercase" }}>
        {content.eyebrow}
      </p>
      <h3 style={{ margin: "12px 0 0", font: "700 32px system-ui", letterSpacing: "-0.03em" }}>
        {content.title}
      </h3>
      <p style={{ margin: "12px 0 0", maxWidth: 320, color: "rgba(255,255,255,0.62)", font: "400 14px/1.6 system-ui" }}>
        {content.description}
      </p>
    </TiltCard>
  );
}