Components
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.
npx @21st-dev/cli add dhileepkumargm/3d-perspective-cardLoading preview...
import React from 'react';
import PerspectiveCardCarousel from '@/components/ui/3d-perspective-card';
// Sample data for the carousel
const cardsData = [
{
id: 1,
title: "Alpine Adventure",
description: "Explore the majestic mountains and breathtaking views with our guided hiking tours designed for all experience levels.",
imageUrl: "https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80",
category: "Outdoors",
rating: 5
},
{
id: 2,
title: "Coastal Retreat",
description: "Unwind with the soothing sounds of waves at our exclusive beachfront properties featuring panoramic ocean views.",
imageUrl: "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1473&q=80",
category: "Relaxation",
rating: 4
},
{
id: 3,
title: "Urban Discovery",
description: "Immerse yourself in vibrant city culture with guided tours of architectural wonders, local cuisine, and hidden gems.",
imageUrl: "https://images.unsplash.com/photo-1480714378408-67cf0d13bc1b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80",
category: "City Life",
rating: 4
},
{
id: 4,
title: "Desert Safari",
description: "Experience the magical silence and stunning landscapes of vast desert dunes with our overnight camping adventures.",
imageUrl: "https://images.unsplash.com/photo-1509316785289-025f5b846b35?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1476&q=80",
category: "Adventure",
rating: 5
},
{
id: 5,
title: "Forest Hideaway",
description: "Reconnect with nature in our eco-friendly cabins nestled among ancient trees with private hiking trails.",
imageUrl: "https://images.unsplash.com/photo-1448375240586-882707db888b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80",
category: "Nature",
rating: 3
}
];
function DemoOne() {
return (
<div className="min-h-screen bg-gradient-to-r from-slate-900 to-slate-800 py-16 px-4">
<div className="max-w-5xl mx-auto">
<h1 className="text-4xl font-bold text-center text-white mb-8">
<span className="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 via-purple-500 to-pink-500">
Immersive 3D Card Experience
</span>
</h1>
<PerspectiveCardCarousel cards={cardsData} />
<div className="mt-16 text-center text-gray-400">
<p>Interactive 3D carousel with perspective effects</p>
<p className="text-sm mt-2">Built with React, Tailwind CSS & Framer Motion</p>
</div>
</div>
</div>
);
}
export default DemoOne;