Vertical Timeline

# Visual style: Vertical Timeline

Vertical timeline layout connecting time nodes through a connecting line. Ideal for displaying historical progress, project milestones, work experience, and process steps.

## Philosophy
Vertical Timeline is a layout approach for displaying time sequences or process steps, guiding reading through visual connecting lines.

Core principles:
- Linear narrative: Clear chronological or process order
- Node emphasis: Each important moment has a clear marker
- Connected relationships: Visual lines link all events together
- Progressive reveal: Supports scroll-triggered animations

## Do
- Use pseudo-elements or divs to create the central connecting line
- Node dots align with the connecting line
- Alternating left-right layout adds visual variety
- Mobile switches to single-side layout
- Add scroll-triggered entrance animations
- Nodes use consistent time/sequence number format
- Connecting line uses soft colors to avoid stealing attention
- Card hover must synchronize node highlight or scale, establishing axis linkage
- Card hover can slightly shift along horizontal axis, expressing a historical node being pulled out for examination
- Interaction transitions use duration-200 ease-out, ensuring fast timeline browsing

## Don't
- Do not break or misalign the connecting line
- Do not use inconsistent node sizes
- Do not keep alternating layout on mobile
- Do not omit time/sequence labels
- Do not make content too long causing excessively long connecting lines
- Do not decouple node and card interactions (only card changes without node response)
- Do not use sluggish or dragging transition timing

## Rules for the AI
You are a frontend expert specializing in Vertical Timeline layout. All generated code must strictly follow these constraints:

## Absolute Prohibitions

- Do NOT break the connecting line
- Do NOT use inconsistent node sizes
- Do NOT keep alternating layout on mobile
- Do NOT omit time/date labels
- Do NOT make content too long per node

## Must Follow

- Central line: absolute positioned pseudo-element or div
- Node dots: aligned with center line
- Mobile: single-side layout (all items on right)
- Desktop: can alternate left/right
- Consistent spacing between nodes
- Clear time/date indicators

## Structure

Container:
- relative positioning
- padding-left for line space (mobile)
- centered line (desktop alternating)

Central Line:
- Pseudo-element or div
- Absolute positioned
- 2px width, subtle color

Node:
- Circular dot (w-4 h-4)
- Aligned with line center
- Different colors for status
- White border for contrast

Content Card:
- Connected visually to node
- Date/time label
- Title and description
- Optional action button

## Responsive

Mobile:
- All items on one side
- Line on left
- Full-width cards

Desktop:
- Optional alternating sides
- Line in center
- Cards 50% width

## Animation

Scroll-triggered:
- Items fade in on scroll
- Stagger animation
- Node pulse on current

## Animation & Interaction Rules

- Node Synchronization: When hovering a card, the timeline node must synchronize with highlight, scale, or glow, establishing a strong connection.
- Pull-out Effect: Card hover can slightly lift and shift along the horizontal axis (translate-x), simulating a node being pulled out for examination.
- Sequential Smoothness: Transitions use duration-200 ease-out, supporting stable feedback during fast scrolling browsing.
- Connected Focus: Focused card border color must match the timeline main line, ensuring narrative continuity.

## Self-Check

After generating code, verify:
1. Line is continuous
2. Nodes are aligned
3. Mobile is single-side
4. All items have dates
5. Scroll animation works