Parallax Stack
Floating card stack with 3D parallax effect on hover.
Main Features of Parallax Stack
How to Use Parallax Stack in Next.js
Installation Guide for Parallax Stack
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
images | string[] | [] | Array of image URLs for the stack |
layerCount | number | 3 | Number of layers in the stack |
backgroundColor | string | bg-neutral-900 | Background color of the component |
cardWidth | string | w-72 | Width of each card |
cardHeight | string | h-96 | Height of each card |
perspective | string | perspective-[2000px] | CSS perspective value for 3D effect |
springStiffness | number | 200 | Spring animation stiffness |
springDamping | number | 20 | Spring animation damping |
hoverRotateX | number | 40 | X-axis rotation on hover in degrees |
className | string | Additional CSS classes |
Related Components
When to Use
Ideal for creative portfolios, SaaS landing pages, and enterprise-ready UIs that need to display stacked content like blog posts or testimonials. Use this React component when building hero sections that require a sense of depth and physical presence.
Best Practices
Optimize for performance in large-scale applications by limiting the `layerCount` to avoid rendering too many overlapping images. Maintain consistent spacing within your design system by using the `cardWidth` and `cardHeight` props. Follow React best practices by using the `springStiffness` and `springDamping` to create a natural, weighted feel for the cards.
Why This Component Matters in Modern UI Development
In modern frontend development, layering is a powerful tool for visual storytelling. This reusable React component provides a sophisticated way to manage overlapping elements in 3D space, which is essential for building scalable design systems that stand out.
Frequently Asked Questions
QHow many layers should I use?
While the component is flexible, using 3 to 5 layers usually provides the best parallax depth without cluttering the UI.
QCan I use text instead of images?
Yes, you can adapt the layers to hold any React content, including text, icons, or custom components.
QIs the spring animation adjustable?
Yes, you have full control over the spring physics to make the stack feel either light and bouncy or heavy and stable.