A testimonial block where picking an author is a crossfade, not a cut. Both quotes live on one normalised clock and every channel (the outgoing quote, the incoming quote, the two role lines and the height of the quote box) reads its own window of it, with the quote windows overlapping on purpose so there is never a frame where the reader is looking at nothing. Opacity and blur are eased with a smoothstep, because a spring on alpha overshoots past 1 and reads as a flash; the geometry is eased with the sampled unit step response of a real second-order system emitted as a CSS linear() list, so Bounce is a damping ratio that keeps its character when the duration changes. A swap can be interrupted: whichever half-finished layer the reader can actually see is kept as the outgoing one and its live alpha becomes the next transition ceiling, so picking a third author mid-swap continues from what is on screen instead of snapping or refusing the click. The quote box carries an explicit animated height measured off the live layer, so a longer quote grows into place rather than jolting the rail down a line, and a ResizeObserver re-measures when a narrower stage rewraps the text. The avatars are generated, never fetched: two HSL stops and one of four silhouettes are derived from a hash of the author name, so a face is stable across reloads and across the editor and export boundary with no asset, no network request and no random number generator. Each pill widens to reveal its name at exactly the width the name occupies (measured on a canvas in the live face and re-measured once web fonts land), which is pure CSS on hover, focus and the active state, so the reveal costs no JavaScript state at all. Autoplay draws its dwell as a ring closing around the active avatar and pauses on pointer and on keyboard focus, arrow, Home and End traverse the rail, the back layer is hidden from assistive tech so the quote is not announced twice, and the whole component stands down under prefers-reduced-motion. Edit the roster of up to eight quotes, the palette, geometry, type, avatar style, swap duration, bounce and dwell, then export one self-contained HTML file with no dependencies.
In collections: CSS Quotes & Testimonial Section Designs
Guide: SaaS Landing Page UI Kits: A Teardown of What Converts in 2026
UI/UX · HTML / CSS / JS · All tools