3D Image Slider

A 3-D, perspective-stacked image slider. Cards layer in depth; navigating forward or backward animates them with cinematic “fall” and “push-back” transitions.

Behavior

• NEXT — the active card falls out of view while the next card rises to center; the stack behind shifts upward and slightly shrinks.
• PREV — a temporary ghost of the active card is pushed one depth back (rewind effect), then the previous card becomes active.
• Stack rendering — several cards are kept behind the active one, each smaller and higher with increasing depth.
• Debounce — navigation is briefly locked during transitions to prevent mid-flight tearing.
• Visuals — each slide can tint the stage using its backgroundHex; images render via next/image with a soft vignette.

Props

• items: { src: string; backgroundHex: string }[] — required list of slides (image URL + stage background color per slide).

---

This component use a subtle noise texture for depth and realism.
To make it render correctly, you need to download and place the following image into your project’s public/ folder with the exact filename noise.webp.

💡 Why?
This texture is layered via CSS (backgroundImage: url(/noise.webp)) in this component to create a film-grain style background. Without it, you’ll see missing backgrounds or fallback colors instead.