3D Card

Interactive 3D card that follows mouse movement

3D Card

Move your mouse around to tilt the card. Smooth spring animations create a modern interactive effect.

3D Card

An immersive 3D card component that responds to mouse movement, creating a realistic depth effect. Perfect for showcasing products, profiles, or any content that benefits from interactive 3D presentation.

Features

Mouse Tracking: Follows cursor movement for realistic 3D effect
Smooth Animations: Fluid transitions and responsive interactions
Depth Perception: Realistic lighting and shadow effects
Customizable: Easy to modify colors, depth, and animation sensitivity
Responsive: Works perfectly on all screen sizes
Performance Optimized: Efficient mouse tracking and rendering

Installation

npm install motion/react lucide-react

Basic Usage

import { ThreeDTiltCard } from "@/components/3d-card";

function MyComponent() {
  return (
    <ThreeDCard>
      <div className="p-6">
        <h3>3D Card Title</h3>
        <p>This card responds to mouse movement!</p>
      </div>
    </ThreeDCard>
  );
}

Props

Prop	Type	Default	Description
children	ReactNode	-	Content to display inside the card
className	string	-	Additional CSS classes

Examples

Basic 3D Card

<ThreeDTiltCard>
  <div className="p-8 text-center">
    <h3 className="mb-4 text-2xl font-bold">Product Name</h3>
    <p className="text-neutral-600">Amazing product description</p>
    <Button className="mt-4">Learn More</Button>
  </div>
</ThreeDTiltCard>

Profile Card

<ThreeDTiltCard>
  <div className="p-6 text-center">
    <img
      src="/avatar.jpg"
      alt="Profile"
      className="mx-auto mb-4 h-24 w-24 rounded-full"
    />
    <h3 className="text-xl font-bold">John Doe</h3>
    <p className="text-neutral-600">Software Developer</p>
    <div className="mt-4 flex justify-center gap-2">
      <Button variant="outline" size="sm">
        Follow
      </Button>
      <Button size="sm">Message</Button>
    </div>
  </div>
</ThreeDTiltCard>

Product Showcase

<ThreeDTiltCard>
  <div className="relative overflow-hidden rounded-xl">
    <img
      src="/product.jpg"
      alt="Product"
      className="h-48 w-full object-cover"
    />
    <div className="p-6">
      <h3 className="text-xl font-bold">Product</h3>
      <p className="mt-2 text-neutral-600">
        High-quality product with amazing features
      </p>
      <div className="mt-4 flex items-center justify-between">
        <span className="text-2xl font-bold">$99.99</span>
        <Button>Add to Cart</Button>
      </div>
    </div>
  </div>
</ThreeDTiltCard>

Custom Styling

<ThreeDCard className="bg-gradient-to-br from-purple-500 to-pink-500 text-white">
  <div className="p-6">
    <h3>Gradient 3D Card</h3>
    <p>This card has a beautiful gradient background.</p>
  </div>
</ThreeDCard>

Advanced Usage

Multiple 3D Cards

<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
  <ThreeDCard>
    <div className="p-6">
      <h3>Card 1</h3>
      <p>First 3D card</p>
    </div>
  </ThreeDCard>
  <ThreeDCard>
    <div className="p-6">
      <h3>Card 2</h3>
      <p>Second 3D card</p>
    </div>
  </ThreeDCard>
  <ThreeDCard>
    <div className="p-6">
      <h3>Card 3</h3>
      <p>Third 3D card</p>
    </div>
  </ThreeDCard>
</div>

Best Practices

Appropriate Content: Use for content that benefits from 3D presentation
Performance: Avoid heavy content that might affect performance
Accessibility: Ensure content is accessible when 3D effects are disabled
Mobile Consideration: Test on touch devices for optimal experience
Depth Balance: Don't use excessive depth that might cause motion sickness

Accessibility

Reduced Motion: Respects prefers-reduced-motion media query
Keyboard Navigation: Works with keyboard navigation
Screen Readers: Proper ARIA labels and semantic structure
Focus Management: Clear focus indicators

Performance Tips

Debounced Mouse Events: Use debounced mouse tracking for better performance
CSS Transforms: Leverage hardware acceleration with CSS transforms
Optimized Rendering: Avoid unnecessary re-renders
Touch Optimization: Optimize for touch devices

Troubleshooting

Card not responding to mouse?

Check if the mouse tracking is properly implemented and the component is mounted.

Performance issues?

Consider reducing the sensitivity or depth for better performance on low-end devices.

Styling conflicts?

Ensure no conflicting CSS is affecting the 3D transforms.

Mobile issues?

Test touch interactions and consider adding touch-specific optimizations.

NextButtons