Building a chronological event display from scratch requires reinventing layout logic, scroll-reveal animation, color theming across light/dark modes, and responsive behavior for three orientations. Without Timeline, you'd duplicate borders, paddings, and dot styling every time you need to show a sequence of milestones, releases, or process steps.

Timeline is a controlled compound component with three layout variants — stacked (vertical, left-aligned), alternating (vertical, zigzag on desktop), and horizontal (scrollable row). Build event sequences via children using Timeline.Item (date label, custom icon or emoji dot, colored accent, active state), Timeline.Block (rich card wrapper around an item), or the events prop for JSON-friendly data-driven rendering. Every item has a stable data-react-fancy-timeline-item handle for agent querying and optional scroll-reveal animation via the animated prop.

Import from @particle-academy/react-fancy, then use either the compound pattern — <Timeline variant="alternating"><Timeline.Item icon={icon} date="Jan 2025">...</Timeline.Item></Timeline> — or pass an events array with title, description, date, icon/emoji, and color fields. Set animated={false} to skip scroll-reveal, or set heading and description to label the entire sequence.