Parallax Depth Cards

A highly engaging layout component where cards don't just scroll normally, but instead fly in from the background, rotate in 3D space (rotateX), and stack on top of each other while fading out slightly to create a deep, parallax depth-of-field effect.

Live Preview

parallax-depth-cards-demo

Default3 Items4 Items

Playground

PreviewUsageInstallation

Sticky Card Stack

Scroll down to stack ↓

Photography01 — 04

The Silent Forest

Deep in the heart of the ancient woods, nature reclaims what was once lost. The silence here is heavy, broken only by the wind.

Architecture02 — 04

Urban Geometry

Concrete mountains and glass valleys. The city breathes through its structured grid, a testament to modern human engineering.

Cyberpunk03 — 04

Neon Nights

When the sun goes down, the electric glow takes over. A symphony of artificial lights painting the wet pavement in vibrant hues.

Nature04 — 04

Ocean's Edge

Where the unstoppable force meets the immovable object. The eternal dance between the roaring waves and the silent cliffs.

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { ParallaxDepthCards } from "@/components/creative/parallax-depth-cards";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { ParallaxDepthCards } from "@/components/creative/parallax-depth-cards";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <ParallaxDepthCards
        items{/* value */}
      />
    </div>
  );
}