Testimonial: Tilted Deck

=== ARCHITECTURE & VISION ===
A self-contained testimonial component. A stack of notched cards where the active one is dark and the rest fan behind it. Offsets, rotation, scale and opacity are all derived from each card's distance from the active index, so the deck reads as depth and adding a card needs no new positions. The notched corner is a clip-path so it survives any card size. Prev and next wrap in both directions. 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: Offsets, rotation, scale and opacity are all derived from each card's distance from the active index, so the deck reads as depth and adding a card needs no new positions. The notched corner is a clip-path so it survives any card size. Prev and next wrap in both directions.
• prompts: [{"part":"Component","prompt":"Offsets, rotation, scale and opacity are all derived from each card's distance from the active index, so the deck reads as depth and adding a card needs no new positions. The notched corner is a clip-path so it survives any card size. Prev and next wrap in both directions."},{"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 ===
• A stack of notched cards where the active one is dark and the rest fan behind it.
• 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. Derive every transform from distance-to-active rather than hard-coding a position per card. Scale the horizontal offset down on narrow screens or the fanned cards push past the viewport. 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.