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 @compronents/diagonal-plate-carouselInstalls from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.
| 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
