PRO

Diagonal Plate Carousel

Two tall photographic plates leaning twenty degrees in opposite directions with the title set between them. Advancing does not move the current slide: a whole new slide is stacked on top with its clip-path collapsed to the bottom edge and unfurled upward, so the incoming frame is revealed rather than slid. Inside it the two plates ride from a hundred percent to fifty while the outgoing slide's plates continue to zero, which is what makes the images look like they are being pulled through the cut. The heading arrives pre-scaled at 1.5 and settles to 1 on the same ease, slides alternate a light and dark theme, and the stack is trimmed to five per transition.

Component

Echoes

Install
npx shadcn@latest add https://ui.aryank.space/r/diagonal-plate-carousel.json

Installs from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.

Files

API
PropTypeDefaultDescription
slidesDiagonalPlateSlide[]6 BLANK slidesTitle plus exactly two plate images per slide. Themes alternate light and dark by index.
Customize
backgroundcolor

Colour behind the slide stack.

Dependencies
gsap