component
Depth Carousel
By hagenplug
Details
- hagenplugAuthor
- componentType
- 2026-07-05Published
- 2026-07-05Updated
- 2026-07-05Added
- CarouselsCategories
Summary
Depth Carousel — Cinematic 3D image carousel Turn a plain row of images into a cinematic 3D cover-flow.
Description
Depth Carousel — Cinematic 3D image carousel Turn a plain row of images into a cinematic 3D cover-flow. The focused image sits sharp and forward while the rest curve back into space with real perspective, depth blur and soft edge fades — the kind of motion that makes a landing page feel expensive. It's driven the way people expect: scroll the wheel or drag to move through the deck. Spring physics smooth every transition, and cards snap into place with natural momentum when you let go. One shared motion value powers all slides, so it stays buttery even with large images. Features True 3D depth — rotateY , translateZ and adjustable perspective Scroll-, wheel- and drag-driven, with spring snapping & momentum Progressive depth blur + soft backdrop-blur edges Editorial index counter and per-slide captions Fully responsive, works on any section width Respects prefers-reduced-motion ; clean static preview on the canvas Fully customizable Card size, spacing, side scale, depth, curve angle, perspective, spring stiffness & damping, blur amount, edge fade, corner radius, colors and label font — all from the property panel. No code required. Perfect for Portfolios, photography, product showcases, hero galleries, case studies and agency sites. How to use Drop it on any page, open the Slides control, add your images — done. Preview or publish to interact (drag & scroll run live, not on the static canvas).
Introduction
Scroll-driven 3D coverflow
Rank history
Daily rank per list, from the first snapshot — lower is better.
- All · #463