A testimonial deck that keeps every quote on screen instead of hiding all but one. The cards sit on a single row at a fixed step, and each one is nudged up or down and tilted by a small angle whose sign follows its parity, so the row reads as a hand-dealt zig-zag rather than a ruler-straight strip. The card in the middle breaks the pattern: it lifts, loses its tilt and flips to the ink surface, which is what tells the eye where to read without a caption saying so. Click any card and the order rotates until that card is the centre one -- every card animates to its new slot at once, except the one that wraps around the end of the row, which jumps to its new side with the transition suppressed for exactly that node so it never slides backwards through its own neighbours. The geometry is one formula shared by the preview and the export, so what is configured is what is downloaded. The attributions draw their own monogram tiles, so no headshot is fetched and no remote image can go missing, and the arrows are inline SVG rather than an icon package. The deck scales itself to whatever box it is dropped into through a ResizeObserver, keeping the navigation buttons at a full touch target while the cards shrink. Card count, size, step, lift, stagger and tilt are editable, as are corner style -- rounded for the HorizonX design system, notched for the neo-brutalist original -- radius, notch depth, padding, border, shadow, all six colours, quote and caption typography, the monogram tile and the transition length. The stage is transparent by default so the deck composites onto any surface.
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