Timeline: Horizontal Roadmap

=== ARCHITECTURE & VISION ===
A self-contained timeline component. A horizontal roadmap rail with pill badges and three states: shipped, in progress and planned. Dots sit on a single rule, each with a pill badge, a title and a short line. The fill animates in once when the rail enters view and then holds at the live step; it reports a state about the product, so tracking scroll position would make a progress bar that lies. Collapses to a left-rail vertical list under 760px. 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: Dots sit on a single rule, each with a pill badge, a title and a short line. The fill animates in once when the rail enters view and then holds at the live step; it reports a state about the product, so tracking scroll position would make a progress bar that lies. Collapses to a left-rail vertical list under 760px.
• prompts: [{"part":"Component","prompt":"Dots sit on a single rule, each with a pill badge, a title and a short line. The fill animates in once when the rail enters view and then holds at the live step; it reports a state about the product, so tracking scroll position would make a progress bar that lies. Collapses to a left-rail vertical list under 760px."},{"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 horizontal roadmap rail with pill badges and three states: shipped, in progress and planned.
• 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 rail fill must NOT follow scroll. A roadmap communicates shipped / in flight / planned, which is a fact about the product rather than about where the reader is on the page. 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.