Frosted Plate Carousel
A wrapping diagonal of thin image plates. Each plate is a 0.0175-thick box whose cover-fit UVs mix a sharp texture into a 64px blur across a 0.15 UV-edge smoothstep, which is the glass. X wraps on a single scroll number. Z is -X times the depth multiplier, so the row recedes on a diagonal at -PI/6. Wheel and drag shift that scroll number; hover slides the inner group; click eases rotation Y to 0, recenters X, dollies the camera from z=35 to 30, and hides the other plates. Escape or a second click reverses the same tweens. Three.js with GSAP.
npx shadcn@latest add @compronents/frosted-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 |
|---|---|---|---|
| tiles | { src, title, slug? }[] | Twelve BLANK editorial stills, duplicated past 20 | Plate images and hover titles. Sets shorter than 20 are concatenated with themselves so the wrap never runs dry. |
| background | string | "#fafafa" | Renderer clear colour. |
| onSelect | (tile) => void | undefined | Fired after the click rotation completes. The original navigated to the slug; this is the hook. |
tilesasset-urlPlate images and the title shown on hover.
backgroundcolorClear colour behind the plates and the corner vignette.
threegsap