Back to components
Marketing component
Alternating Timeline
Vertical timeline with left/right alternating entries and scroll-driven opacity/scale.
Install
$ Run in your project root
pnpm dlx shadcn@latest add https://vibekit.desishub.com/r/alternating-timeline.jsonWhat it does
- Auto-alternating left/right layout per entry
- Scroll-driven opacity + scale on each item
- Optional image, meta line (date/role), title, description
- Center timeline rail with dot markers (desktop)
- Stacked single-column on mobile
When to use
Use it
About pages, company history, roadmap timelines, product evolution stories.
Skip it
Linear feed lists or comment threads — use a simple list instead.
Prerequisites
- framer-motion (installed automatically)