Letter Grid Carousel
A carousel whose title is a fixed grid of letter cells, not a word. Each slide supplies two rows of seven characters with gaps left deliberately blank, so the type stays on the same skeleton while the letters that occupy it change, and the whole title re-enters from the side you are travelling toward. The progress rail is the other half of it: the active tick claims five times the flex of its neighbours, so selecting one widens its slot and squeezes the rest on the same CSS transition. Every change also picks a random colour, which tints the backdrop and every letter together, so no two visits look the same.
npx shadcn@latest add https://ui.aryank.space/r/letter-grid-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 |
|---|---|---|---|
| images | string[] | 30 BLANK slides | Slide count drives the track width and the number of ticks on the rail. |
| titles | LetterGridTitle[] | 30 BLANK grids | Two rows of seven cells per slide; an empty string leaves that cell blank. Must be at least as long as images. |
brandtextWordmark at the top left.
footerLefttextLeft footer line.
gsap