Testimonial: Marquee

=== ARCHITECTURE & VISION ===
A self-contained testimonial component. Two rows of compact cards scrolling in opposite directions, edge-faded, pausing on hover. Each row duplicates its card set so a translateX of -50% loops seamlessly, with the copy marked aria-hidden. The edge fade is a mask so it works over any background rather than being a gradient overlay matched to one. The page contains the component and nothing else, so it can be lifted straight into a section.

=== STYLE & DIRECTION ARTISTIQUE ===
• description: Light shadcn section register: a near-white ground, white cards, 1px hairline borders, 12 to 16px radii, one indigo accent, and Inter at 400 to 700. No shadows beyond a 1px lift, no gradients used as decoration, no photography.
• prompt: Ground #FAFAFA, card #FFFFFF, ink #09090B, muted #71717A, border #E4E4E7, accent #4F46E5. Inter 400 for body, 600 for names and titles, 700 for the heading. Radii 12 to 16px, borders 1px, and a single 0 1px 2px rgba(9,9,11,.04) lift on cards. Draw avatars from initials on a coloured disc rather than loading images, so the component has no asset dependency. Ease everything with cubic-bezier(.16,1,.3,1).

=== STRUCTURE & SECTIONS ===
• description: Each row duplicates its card set so a translateX of -50% loops seamlessly, with the copy marked aria-hidden. The edge fade is a mask so it works over any background rather than being a gradient overlay matched to one.
• prompts: [{"part":"Component","prompt":"Each row duplicates its card set so a translateX of -50% loops seamlessly, with the copy marked aria-hidden. The edge fade is a mask so it works over any background rather than being a gradient overlay matched to one."},{"part":"Responsive","prompt":"Reflow rather than shrink: horizontal rails become vertical rails, multi-column grids drop columns progressively, and nothing is allowed to overflow the viewport at 390px."},{"part":"Reduced motion","prompt":"Under prefers-reduced-motion, remove the motion mechanic entirely and show a plain readable equivalent. A magnifying rail or a rotating ring frozen mid-animation is unusable; a list is not."}]

=== COMPOSANTS CLÉS ===
• Two rows of compact cards scrolling in opposite directions, edge-faded, pausing on hover.
• Initial-based avatars with no image dependency
• Reduced-motion fallback that changes the layout, not just the timing

=== NOTES TECHNIQUES ===
Single self-contained HTML file; one Google Fonts link is the only external request. The lane is width:max-content, so overflow:hidden alone will not contain it: a grid track sizes to its max-content child. Set grid-template-columns to minmax(0,1fr) or the whole document scrolls sideways. Verify horizontal overflow at 1440, 768 and 390 by comparing documentElement.scrollWidth against innerWidth, because a clipped child can look correct while the document scrolls sideways.

Superdesign UI · Texte publié par la source. Les références et réglages peuvent être nécessaires ; le résultat identique n’est pas garanti.