Floating Card Gallery

Cards 176

About

Customization Options This component is highly customizable: Cards Data: Supply your own array of card objects with titles, descriptions, images, etc. Background: Change the backgroundColor prop to use a different Tailwind gradient Accent Color: Modify the accentColor prop to change the glow effect color Maximum Cards: Adjust how many cards to display with the maxCards prop Key Features Explained 3D Perspective Effects: The component uses mouse tracking to create realistic 3D perspective effects with CSS transforms Smooth Animations: Leverages Framer Motion for fluid transitions and animations Expandable Cards: Click on any card to see its expanded view with additional information Floating Particle Background: Creates an immersive atmosphere with subtle animated elements Accessibility: Includes keyboard navigation, ARIA attributes, and focus management Responsive Design: Works beautifully on all device sizes Performance Optimized: Uses React best practices to ensure smooth performance This component would make an excellent centerpiece for portfolios, feature showcases, blog homepages, or any content that deserves a premium visual presentation.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Floating Card Gallery to your project and fits it to your theme.

Code

How Floating Card Gallery is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import React from 'react';
import FloatingCardGallery from '@/components/ui/floating-card-gallery';

// Sample data
const cardData = [
  {
    title: "Immersive Virtual Reality",
    description: "Explore how VR is transforming the way we interact with digital environments.",
    fullDescription: "Virtual Reality technology is revolutionizing industries from gaming to healthcare. By creating fully immersive digital environments, VR enables users to experience scenarios that would otherwise be impossible, dangerous, or prohibitively expensive in the real world.",
    image: "https://cdn.21st.dev/assets/mirror/4e/4ef776ebe79898265b7722cee050a66806ed7bc6abff821eccdfe717646198f8.jpg",
    avatar: "https://cdn.21st.dev/assets/mirror/d8/d8dab29a5736d5c2b0084d720d3db02c785560071609be501541922928fdf831.jpg",
    author: "Sophia Chen",
    category: "Technology",
    tags: ["Virtual Reality", "Technology", "Innovation", "Digital Experience"]
  },
  {
    title: "Quantum Computing Breakthroughs",
    description: "Recent advances in quantum computing are promising to solve previously impossible problems.",
    fullDescription: "Quantum computers leverage the strange properties of quantum mechanics to process information in ways that classical computers cannot. Recent breakthroughs have brought us closer to quantum supremacy, where quantum computers can solve problems that classical computers practically cannot.",
    image: "https://cdn.21st.dev/assets/mirror/76/76258dabb58551e4c8e4f79d4e05c031e265e4f718d2f892a26af3cfd1be0add.jpg",
    avatar: "https://cdn.21st.dev/assets/mirror/a6/a634d4f02fe5b77804943c1d74b8d70e35ffe26454e0e9af9717432a2c72bfde.jpg",
    author: "Robert Jiang",
    category: "Science",
    tags: ["Quantum", "Computing", "Research", "Future Tech"]
  },
  {
    title: "Sustainable Architecture",
    description: "How eco-friendly building designs are shaping our urban landscapes.",
    fullDescription: "Sustainable architecture focuses on creating buildings that minimize environmental impact through energy efficiency, resource conservation, and harmony with the natural environment. From living walls to solar integration, these designs are revolutionizing how we think about urban spaces.",
    image: "https://cdn.21st.dev/assets/mirror/a4/a49016eadf7e1e53ad4b9c3e8b7a6588246576d289500487c81e73cd5bd11348.jpg",
    avatar: "https://cdn.21st.dev/assets/mirror/ee/ee794ad2b1016f820a8dffbfe5602d0ef612da197096715c1b200aac385c0017.jpg",
    author: "Emma Rodriguez",
    category: "Design",
    tags: ["Architecture", "Sustainability", "Urban Design", "Eco-friendly"]
  },
  {
    title: "Neuroscience of Creativity",
    description: "New research reveals how the brain generates innovative ideas.",
    fullDescription: "Scientists are uncovering the neural mechanisms behind creative thinking. Using advanced imaging techniques, researchers can observe how different brain regions collaborate during creative processes, offering insights into how we might enhance innovative thinking.",
    image: "https://cdn.21st.dev/assets/mirror/39/39d8e9b847d5345944d8ab7a1a4bc14200a99f98ab75ac4ffd6094a6fa4ee1b4.jpg",
    avatar: "https://cdn.21st.dev/assets/mirror/21/21d6722e3baa38cb075afdc599a60c8861440a6dea431e7a8ff43f86d05190b9.jpg",
    author: "Marcus Taylor",
    category: "Science",
    tags: ["Neuroscience", "Creativity", "Brain", "Research"]
  },
  {
    title: "Autonomous Transportation",
    description: "Self-driving vehicles are transforming how we think about mobility.",
    fullDescription: "Autonomous vehicles use a combination of sensors, cameras, radar, and artificial intelligence to navigate without human input. As this technology matures, it promises to reduce accidents, ease congestion, and provide mobility options for those who cannot drive.",
    image: "https://images.unsplash.com/photo-1562519819-016930ada31c?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80",
    avatar: "https://cdn.21st.dev/assets/mirror/6e/6ecccd31cdd8162ac4411c5a0061bcb68659d52644328be25cac6aac926dacbb.jpg",
    author: "Leila Johnson",
    category: "Technology",
    tags: ["Autonomous", "Transportation", "AI", "Future Mobility"]
  },
  {
    title: "Deep Ocean Discoveries",
    description: "Exploring the mysteries of Earth's final frontier.",
    fullDescription: "The deep ocean remains one of the least explored regions on Earth. Recent expeditions have discovered new species, underwater geological features, and insights into how life adapts to extreme conditions. These discoveries have implications for medicine, climate science, and our understanding of life itself.",
    image: "https://cdn.21st.dev/assets/mirror/60/60975b576a4845793d76baf06b9b9362b78bf6151cf00e285f3bee0a10d89439.jpg",
    avatar: "https://cdn.21st.dev/assets/mirror/d1/d1a3e08d4e37d6ee2b7de1db8df87c1dc7acd8ffb004caaf980917de518a60c9.jpg",
    author: "David Nakamura",
    category: "Environment",
    tags: ["Oceanography", "Marine Biology", "Exploration", "Discovery"]
  }
];

function App() {
  return (
    <div className="App">
      <FloatingCardGallery cards={cardData} />
    </div>
  );
}

export default App;