3D cards Slider

Cards 43

About

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

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

Code

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

Usage.tsx

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>
  );
}