Floating Card

cards

3D perspective card with dynamic mouse tilt matrix spatial response.

#card#floating#3d#tilt

Live Interactive Preview

Spatial Depth

3D Tilt Matrix Card

Move your cursor across this container to test real-time 3D perspective orientation.

Component Source Code

Select language in the dropdown

FloatingCard.tsx

1'use client';
2
3import React, { useState } from 'react';
4
5export default function FloatingCard() {
6  const [rotate, setRotate] = useState({ x: 0, y: 0 });
7
8  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
9    const rect = e.currentTarget.getBoundingClientRect();
10    const x = (e.clientY - (rect.top + rect.height / 2)) * -0.12;
11    const y = (e.clientX - (rect.left + rect.width / 2)) * 0.12;
12    setRotate({ x, y });
13  };
14
15  return (
16    <div
17      onMouseMove={handleMouseMove}
18      onMouseLeave={() => setRotate({ x: 0, y: 0 })}
19      style={{
20        transform: `perspective(1000px) rotateX(${rotate.x}deg) rotateY(${rotate.y}deg)`,
21        transition: rotate.x === 0 ? 'transform 0.5s ease-out' : 'transform 0.1s ease-out'
22      }}
23      className="w-full max-w-xs sm:max-w-sm rounded-2xl sm:rounded-3xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-5 sm:p-6 shadow-xl transition-colors"
24    >
25      <div className="h-28 sm:h-32 w-full rounded-xl sm:rounded-2xl bg-gradient-to-tr from-blue-600 to-indigo-600 mb-4 flex items-center justify-center text-white font-bold text-sm sm:text-base shadow-sm">
26        Spatial Depth
27      </div>
28      <h3 className="font-bold text-sm sm:text-base text-slate-900 dark:text-slate-100">3D Tilt Matrix Card</h3>
29      <p className="text-xs text-slate-500 dark:text-slate-400 mt-1">Move your cursor across this container to test real-time 3D perspective orientation.</p>
30    </div>
31  );
32}

Installation & Integration Guide

Step 1: Tailwind CSS v4 Setup

Tailwind Docs

If you do not have Tailwind installed yet, run this installation command:

Terminal

npm install tailwindcss @tailwindcss/postcss postcss

Then add the Tailwind directive to your main stylesheet (globals.css):

@import "tailwindcss";

Step 2: Install Icon Dependencies

npm install lucide-react react-icons

Step 3: Add Component File

Create a new file in your project at src/components/cards/FloatingCard.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

1import FloatingCard from '@/components/cards/FloatingCard';
2
3export default function ExamplePage() {
4  return (
5    <main className="p-8 flex items-center justify-center min-h-screen">
6      <FloatingCard />
7    </main>
8  );
9}