Components
This advanced 3D interactive card gallery includes:
3D Perspective Effects:
Dynamic rotation based on mouse position Perspective transformations that respond to user interaction Parallax depth effects between card elements Advanced Animations:
Smooth transitions between cards with cubic-bezier easing Card scaling and position animations Floating particles in the background Pulse animations on interactive elements Glassmorphism & Modern UI:
Backdrop blur effects Semi-transparent overlays Dynamic gradient backgrounds that follow mouse movement Noise texture overlay for added depth Responsive Design:
Adapts between horizontal carousel on desktop Vertical stacking on mobile devices Fluid typography and spacing Interactive Elements:
Navigation controls with visual feedback Progress indicators Hover state animations Click interactions to change the active card Visual Polish:
Custom gradient overlays unique to each card Dynamic depth-of-field effect (blur on inactive cards) Atmospheric lighting that responds to mouse position Category badges with glassmorphism effect
npx @21st-dev/cli add dhileepkumargm/3d-cards-sliderLoading preview...
import React from 'react';
import ParallaxCardCarousel from '@/components/ui/3d-cards-slider';
const DemoOne = () => {
const cards = [
{
id: 1,
title: "Cosmic Exploration",
subtitle: "Journey Through Deep Space",
description: "Discover the mysteries of distant galaxies and nebulae in this immersive visual experience.",
imageUrl: "https://images.unsplash.com/photo-1462331940025-496dfbfc7564",
actionLabel: "Explore Space",
onAction: () => console.log("Exploring space")
},
{
id: 2,
title: "Ocean Depths",
subtitle: "Underwater Discoveries",
description: "Dive into the fascinating world beneath the waves and encounter extraordinary marine life.",
imageUrl: "https://images.unsplash.com/photo-1551244072-5d12893278ab",
actionLabel: "Dive In",
onAction: () => console.log("Diving in")
},
{
id: 3,
title: "Mountain Vistas",
subtitle: "Epic Landscapes",
description: "Experience breathtaking panoramic views from the highest peaks around the world.",
imageUrl: "https://images.unsplash.com/photo-1519681393784-d120267933ba",
actionLabel: "Begin Ascent",
onAction: () => console.log("Ascending mountains")
},
{
id: 4,
title: "Urban Architecture",
subtitle: "Modern Cityscape Design",
description: "Explore innovative architectural marvels that define the skylines of tomorrow.",
imageUrl: "https://images.unsplash.com/photo-1486325212027-8081e485255e",
actionLabel: "Tour Buildings",
onAction: () => console.log("Touring architecture")
},
{
id: 5,
title: "Digital Realms",
subtitle: "Virtual Landscapes",
description: "Step into computer-generated worlds that push the boundaries of imagination.",
imageUrl: "https://images.unsplash.com/photo-1545987796-200677ee1011",
actionLabel: "Enter VR",
onAction: () => console.log("Entering virtual reality")
}
];
return (
<div className="app">
<ParallaxCardCarousel
cards={cards}
autoplaySpeed={3000}
perspective={1500}
backgroundColor="bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900"
/>
</div>
);
};
export default DemoOne;