Timeline: Vertical Journey

=== ARCHITECTURE & VISION ===
A self-contained timeline component. A vertical spine where each entry reveals on scroll and the spine fills to match. Year, title and a bordered body card per entry, with a dot on the spine. Entries reveal through one IntersectionObserver and the spine fill is computed from how many have revealed, so the fill can never disagree with what is actually on screen. 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: Year, title and a bordered body card per entry, with a dot on the spine. Entries reveal through one IntersectionObserver and the spine fill is computed from how many have revealed, so the fill can never disagree with what is actually on screen.
• prompts: [{"part":"Component","prompt":"Year, title and a bordered body card per entry, with a dot on the spine. Entries reveal through one IntersectionObserver and the spine fill is computed from how many have revealed, so the fill can never disagree with what is actually on screen."},{"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 vertical spine where each entry reveals on scroll and the spine fills to match.
• 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 the spine fill from the count of revealed entries rather than from scroll position, or the line and the cards drift apart on fast scrolls. 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.