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.
npx shadcn@latest add https://ui.aryank.space/r/diagonal-plate-carousel.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| slides | DiagonalPlateSlide[] | 6 BLANK slides | Title plus exactly two plate images per slide. Themes alternate light and dark by index. |
backgroundcolorColour behind the slide stack.
gsap
