brand-showcase's rolling wall with the blur put back. The frame never moves and only the marks do: each cell is a window over a column holding every mark that cell will ever show, and a page change translates that column by exactly one cell height, which is transitions.dev's text-states-swap geometry, old mark leaving upward and new mark arriving from below, written as one transform on one element. The difference is where the blur sits. On the sharp version there is none, because two marks physically travelling do not need bridging the way a crossfade does; here it is per mark rather than per page, so the arriving mark sharpens as it lands and the leaving one dissolves as it goes, and two wordmarks passing through one window read as a single thing changing rather than as two objects. It costs no state and no keyframe: every mark already knows whether it is the active one, so the blur is a plain A-to-B transition riding the same curve and the same per-cell delay as the roll, interruptible, with nothing to keep in sync with the transform. The stagger is what makes it read as a wall repainting rather than a slide changing: 45ms per cell, so the change crosses the row as a wave, since six cells turning at once is a cut. Every mark is exactly one cell tall by grid row sizing rather than a measured pixel offset, so nothing has to be recomputed on resize. Pages are always full, wrapping back to the start rather than leaving a short last row, so any number of logos fills a six-column grid. No rules between the cells: the marks sit on the page's own ground, so the only thing bounding a logo is the space around it, and the window each column rolls through is still there, just no longer drawn. The marks are brand-showcase's, inlined and painted in currentColor, because a logo cloud that waits on a dozen network round trips shows twelve empty cells first. Reduced motion stops the rotation outright, read in JS rather than guarded in CSS, because a stopped transition on a running timer would still change the logo and only make it a hard cut.
pnpm dlx shadcn@latest add "https://ui.d2studio.dev/r/logo-cascade.json"