PRO

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.

Component
Install
npx shadcn@latest add https://ui.aryank.space/r/letter-grid-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
imagesstring[]30 BLANK slidesSlide count drives the track width and the number of ticks on the rail.
titlesLetterGridTitle[]30 BLANK gridsTwo rows of seven cells per slide; an empty string leaves that cell blank. Must be at least as long as images.
Customize
brandtext

Wordmark at the top left.

footerLefttext

Left footer line.

Dependencies
gsap