Animated Timeline

A highly dynamic, scroll-aware timeline engine featuring Intersection Observers and multiple 3D/2D entry animations.

Unlike standard static timelines, this AnimatedTimelineBlock uses native browser APIs (IntersectionObserver) to orchestrate complex animations only when the user scrolls the elements into view. As the user scrolls down your page, the vertical tracking line dynamically extends, the nodes glow, and the cards flip, blur, or slide into position.

Every preview scrolls internally — scroll down inside a preview and watch the tracking line extend as each node crosses the observer threshold.

Animated timeline

Passitems: as an array of { id, title, date } — description and a lucide icon component are optional.
layout"center": is the default: rail down the middle with cards alternating sides.
color: accents the active node, its glow and the extended rail — a named key or a hex string.

Active Focus Color

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Animated Timeline

npx shadcn@latest add @algorize-ui/animated-timeline

components/custom/blocks/AnimatedTimelineBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Nothing beyond the shared setup — Animated Timeline needs only the cn helper and lucide-react, which the installation guide already put in place.

Examples

Left layout

Uselayout"left": to pin the rail to one edge and stack every card beside it — the compact option for narrow columns and sidebars.

Right layout

Uselayout"right": to mirror it — useful when the timeline sits next to body copy on the left.

Fade up

Useanimation"fade-up": for the quietest entrance — a short rise with an opacity ramp. It is the default.

Zoom in

Useanimation"zoom-in": to scale each card up as its node lights.

Blur in

Useanimation"blur-in": to resolve the card out of a blur instead of moving it.

Features

Discover the key capabilities that make this component an excellent choice for modern, animated user interfaces.

Fluid Animations

Hardware-accelerated transitions that ensure smooth 60fps performance across devices.

Highly Customizable

Exposes intuitive props for tailoring colors, sizes, and animation speeds to fit your brand.

Responsive Design

Automatically adapts to mobile, tablet, and desktop viewports without horizontal scrolling issues.

Accessible

Built with semantic HTML and ARIA labels where necessary to support screen readers and keyboard navigation.

Best Practices & Guidelines

Usage Guidelines

Give the timeline room to breathe — the entrance only reads as an entrance when a node crosses the observer threshold mid-scroll, so avoid placing the whole list above the fold. On narrow columns prefer layout="left"; the centered rail needs roughly 640px to avoid cramped cards.

Props Reference

Prop	Type	Default	Description
`items`	`AnimatedTimelineItem[]`	Required	The events to render, in order. See the item shape below.
`layout`	`"left" \| "right" \| "center"`	`"center"`	Where the rail sits and whether cards alternate sides.
`animation`	`"fade-up" \| "slide-in" \| "zoom-in" \| "flip-up" \| "blur-in"`	`"fade-up"`	The entrance each card plays when its node scrolls into view.
`color`	`"primary" \| "indigo" \| "rose" \| "emerald" \| "blue" \| "zinc" \| (hex string)`	`"primary"`	Accent applied to the active node, its glow and the extended rail.

AnimatedTimelineItem Object

Property	Type	Default	Description
`id`	`string \| number`	Required	Stable React key for the event.
`title`	`string`	Required	Headline shown on the card.
`date`	`string`	Required	Free-form label beside the node — a quarter, month or "Present".
`description`	`string`	`undefined`	Optional supporting copy under the title.
`icon`	`React.ElementType`	`undefined`	Component rendered inside the node — any lucide icon works.