Timeline: Chapter Scrubber

=== ARCHITECTURE & VISION ===
A self-contained timeline component. A vertical tick rail that magnifies toward the pointer, like a dock, driving a preview card. Every tick is one step. Magnification uses a gaussian falloff over about three ticks either side, and each tick eases toward its target every frame rather than snapping, which is what makes it feel physical. The crest tick drives a preview card with a progress bar and a timecode. Rotates to a horizontal rail under 680px. 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: Every tick is one step. Magnification uses a gaussian falloff over about three ticks either side, and each tick eases toward its target every frame rather than snapping, which is what makes it feel physical. The crest tick drives a preview card with a progress bar and a timecode. Rotates to a horizontal rail under 680px.
• prompts: [{"part":"Component","prompt":"Every tick is one step. Magnification uses a gaussian falloff over about three ticks either side, and each tick eases toward its target every frame rather than snapping, which is what makes it feel physical. The crest tick drives a preview card with a progress bar and a timecode. Rotates to a horizontal rail under 680px."},{"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 tick rail that magnifies toward the pointer, like a dock, driving a preview card.
• 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. Ease each tick toward its target rather than setting it directly; an instant hover state reads as a menu, not a dock. The rAF loop must stop when nothing is moving and the pointer has left. 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.