3D Perspective Card

Cards 11

About

Features & Technical Highlights Advanced 3D Transformations: Uses CSS 3D transforms with perspective for realistic depth Custom positioning based on card index relative to active card Smooth transitions between states with cubic-bezier easing Interactive User Experience: Touch swipe support for mobile devices Auto-play functionality with pause/play toggle Intuitive navigation with dots and arrow controls Hover effects on cards and buttons Visual Design Elements: Gradient backgrounds with subtle blur effects Decorative floating elements with animation Glass-morphism UI styling for modern aesthetic Responsive design that works on different screen sizes Performance Optimizations: Uses React's useRef for DOM references Proper cleanup of intervals to prevent memory leaks Conditional rendering for efficient DOM updates Optimized motion transitions Accessibility Features: Proper aria labels on interactive elements Keyboard navigable interface Sufficient color contrast for text readability Focus states for keyboard users This component combines beautiful visual design with advanced interaction patterns to create an immersive 3D card carousel experience that will impress users and elevate your application's UI.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds 3D Perspective Card to your project and fits it to your theme.

Code

How 3D Perspective Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import PerspectiveCardCarousel from "@/components/ui/3d-perspective-card";

const settings = {
  cards: [
    {
      id: 1,
      title: "Mountain Retreat",
      category: "Nature",
      description:
        "Escape to the serene beauty of the mountains with breathtaking views and fresh air.",
      rating: 5,
      imageUrl: "https://cdn.21st.dev/assets/stock/photo/1015.jpg",
    },
    {
      id: 2,
      title: "Coastal Paradise",
      category: "Beach",
      description:
        "Relax by the ocean with golden sands, gentle waves and endless horizons.",
      rating: 4,
      imageUrl: "https://cdn.21st.dev/assets/stock/photo/1039.jpg",
    },
    {
      id: 3,
      title: "Urban Explorer",
      category: "City",
      description:
        "Discover the vibrant energy of the city with its lights, culture and nightlife.",
      rating: 5,
      imageUrl: "https://cdn.21st.dev/assets/stock/photo/1056.jpg",
    },
    {
      id: 4,
      title: "Forest Escape",
      category: "Nature",
      description:
        "Wander through ancient woodlands surrounded by towering trees and quiet trails.",
      rating: 4,
      imageUrl: "https://cdn.21st.dev/assets/stock/photo/1074.jpg",
    },
    {
      id: 5,
      title: "Desert Journey",
      category: "Adventure",
      description:
        "Experience the vast stillness of the dunes under a wide, open sky.",
      rating: 5,
      imageUrl: "https://cdn.21st.dev/assets/stock/photo/180.jpg",
    },
  ],
};

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  return (
    <div className="h-screen w-screen">
      <PerspectiveCardCarousel cards={s.cards} />
    </div>
  );
}