Components
Features 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 To use this component, make sure to install Framer Motion:
bash npm install framer-motion This component represents a highly polished, production-ready UI element that combines advanced CSS techniques with modern React patterns to create an immersive, interactive experience.
npx @21st-dev/cli add dhileepkumargm/3d-interactive-card-galleryLoading preview...
import React from 'react';
import InteractiveCardGallery from '@/components/ui/3d-interactive-card-gallery';
function DemoOne() {
return (
<div className="App">
<InteractiveCardGallery />
</div>
);
}
export default DemoOne;