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
import React from "react";
import ParallaxCardCarousel from "@/components/ui/3d-cards-slider";
const settings = {
autoplaySpeed: 5000,
enableAutoplay: true,
cardWidth: 320,
cardHeight: 450,
gap: 30,
perspective: 1200,
maxRotation: 25,
parallaxFactor: 0.2,
};
const cards = [
{
id: 1,
title: "Forest Trail",
subtitle: "Woodland Path",
description: "Wander through lush greenery and ancient trees.",
imageUrl: "https://cdn.21st.dev/assets/stock/photo/1039.jpg",
actionLabel: "Explore",
},
{
id: 2,
title: "Mountain Retreat",
subtitle: "Nature Escape",
description: "Discover serene landscapes and breathtaking mountain views.",
imageUrl: "https://cdn.21st.dev/assets/stock/photo/1015.jpg",
actionLabel: "Explore",
},
{
id: 3,
title: "Ocean Breeze",
subtitle: "Coastal Living",
description: "Relax by the shore with endless waves and golden sand.",
imageUrl: "https://cdn.21st.dev/assets/stock/photo/1056.jpg",
actionLabel: "Explore",
},
{
id: 4,
title: "Urban Lights",
subtitle: "City Vibes",
description: "Experience the vibrant energy of the city after dark.",
imageUrl: "https://cdn.21st.dev/assets/stock/photo/1074.jpg",
actionLabel: "Explore",
},
];
export default function Demo(props: Partial<typeof settings>) {
const s = { ...settings, ...props };
return (
<div className="h-screen w-screen">
<ParallaxCardCarousel cards={cards} {...s} />
</div>
);
}