Parallax Card

PreviewCode

Copy

Mountain Adventure

Explore breathtaking mountain landscapes and discover hidden trails that lead to spectacular viewpoints.

NatureAdventurePhotography

Ocean Waves

Experience the calming rhythm of ocean waves and the endless horizon where sky meets sea.

OceanPeacefulBlue

Parallax Card

The Parallax Card component creates an immersive 3D experience with mouse-tracking parallax effects. Perfect for showcasing projects, products, or any content that deserves special attention.

Features

• 3D Parallax Effect: Mouse movement creates realistic depth perception
• Smooth Animations: Spring-based motion values for natural movement
• Hover Interactions: Scale and color transitions on hover
• Layered Design: Multiple depth layers for rich visual hierarchy
• Responsive: Works across different screen sizes
• Customizable: Easy to modify colors, content, and effects

Basic Usage

import { ParallaxCard } from "@/components/snippets/parallax-card/code";

const cards = [
  {
    title: "Mountain Adventure",
    description:
      "Explore breathtaking mountain landscapes and discover hidden trails that lead to spectacular viewpoints.",
    image:
      "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=300&fit=crop",
    tags: ["Nature", "Adventure", "Photography"],
  },
  {
    title: "Ocean Waves",
    description:
      "Experience the calming rhythm of ocean waves and the endless horizon where sky meets sea.",
    image:
      "https://images.unsplash.com/photo-1439066615861-d1af74d74000?w=400&h=300&fit=crop",
    tags: ["Ocean", "Peaceful", "Blue"],
  },
];

Props

Customization

Changing Colors

Modify the gradient colors by updating the background classes:

// Change the shadow gradient
className = "bg-gradient-to-br from-blue-500/20 via-cyan-500/20 to-teal-500/20";

// Change the card overlay gradient
className = "bg-gradient-to-br from-blue-500/10 via-cyan-500/10 to-teal-500/10";

Adjusting 3D Depth

Modify the translateZ values to change the depth effect:

// Deeper shadow
transform: "translateZ(-100px)";

// Higher card elevation
transform: "translateZ(75px)";

// More prominent content
transform: "translateZ(100px)";

Changing Rotation Sensitivity

Adjust the rotation sensitivity by modifying the transform ranges:

// More sensitive rotation
const rotateX = useTransform(mouseYSpring, [-0.5, 0.5], ["25deg", "-25deg"]);
const rotateY = useTransform(mouseXSpring, [-0.5, 0.5], ["-25deg", "25deg"]);

// Less sensitive rotation
const rotateX = useTransform(mouseYSpring, [-0.5, 0.5], ["10deg", "-10deg"]);
const rotateY = useTransform(mouseXSpring, [-0.5, 0.5], ["-10deg", "10deg"]);

Custom Spring Configuration

Adjust the spring animation for different feels:

const mouseXSpring = useSpring(x, {
  stiffness: 100,
  damping: 10,
});
const mouseYSpring = useSpring(y, {
  stiffness: 100,
  damping: 10,
});

Animation Details

Motion Values

The component uses Framer Motion's motion values for smooth, performant animations:

• useMotionValue: Tracks mouse position
• useSpring: Creates smooth spring animations
• useTransform: Maps mouse position to rotation values

3D Transforms

The card uses CSS 3D transforms to create depth:

• transformStyle: "preserve-3d": Enables 3D transformations
• translateZ: Creates depth layers
• rotateX/rotateY: Creates the parallax effect

Performance

The component is optimized for performance:

• Spring animations are hardware accelerated
• Motion values update efficiently
• Minimal re-renders during mouse movement

Accessibility

The component includes accessibility considerations:

• Proper alt text for images
• Semantic HTML structure
• Keyboard navigation support
• Screen reader friendly content

Dependencies

• motion/react: For animations and motion values
• tailwindcss: For styling
• react: For component logic