Special offer for startups: 0% Off!••••••••

Lightswind UI

BlocksTemplates Pricing

0

Scroll Timeline

An animated timeline component that reveals entries as the user scrolls down the page.

How to Import

Add this import to your component file

app/page.tsx

1import { ScrollTimeline } from "@/components/lightswind/scroll-timeline"

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

events	TimelineEvent[]	-	Array of timeline events to display	Required
title	string	-	Title displayed at the top of the timeline	Required
subtitle	string	-	Subtitle displayed below the title	Required
animationOrder	"sequential" \| "staggered" \| "simultaneous"	-	Controls how items animate in when scrolling	Required
cardAlignment	"alternating" \| "left" \| "right"	-	Controls the alignment of timeline cards	Optional
lineColor	string	-	CSS class for the timeline line color	Optional
activeColor	string	-	CSS class for the active progress indicator	Optional
progressIndicator	boolean	-	Whether to show the scrolling progress line	Optional
cardVariant	"default" \| "elevated" \| "outlined" \| "filled"	-	Visual style variant for the timeline cards	Optional
cardEffect	"none" \| "glow" \| "shadow" \| "bounce"	-	Interactive effect for cards on hover	Optional
parallaxIntensity	number	-	Amount of parallax scroll effect (0 to disable)	Optional
progressLineWidth	number	-	Width of the progress line in pixels	Optional
progressLineCap	"round" \| "square"	-	Shape of the progress line cap	Optional
dateFormat	"text" \| "badge"	-	How to display dates/years in the timeline	Optional
className	string	-	Additional CSS classes to apply to the timeline	Optional
revealAnimation	"fade" \| "slide" \| "scale" \| "flip" \| "none"	-	Animation style when revealing items	Optional
connectorStyle	"line" \| "dots" \| "dashed"	-	Style of the connecting line between events	Optional
perspective	boolean	-	Enable 3D perspective effects on cards	Optional
darkMode	boolean	-	Use dark mode styling for the timeline	Optional
smoothScroll	boolean	-	Enable smooth scrolling animations	Optional
id	string	-	Unique identifier for the timeline event	Optional
year	string	-	Year or timeframe of the event	Required
title	string	-	Main title of the timeline event	Required
subtitle	string	-	Optional subtitle (e.g. company or institution)	Optional
description	string	-	Detailed description of the timeline event	Required
icon	React.ReactNode	-	Custom icon to display with the event	Optional
color	string	-	Custom color for the event (Tailwind class)	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1import { ScrollTimeline } from "@/components/lightswind/scroll-timeline"
2
3// Define your timeline events
4const events = [
5  {
6    year: "2023",
7    title: "Major Achievement",
8    subtitle: "Organization Name",
9    description: "Description of the achievement."
10  },
11  {
12    year: "2022",
13    title: "Important Milestone",
14    subtitle: "Organization Name",
15    description: "Details about the milestone."
16  },
17]
18
19export function ScrollTimelineExample() {
20  return (
21    <ScrollTimeline 
22      events={events}
23      title="My Journey"
24      subtitle="Scroll to explore the timeline"
25      progressIndicator={true}
26      cardAlignment="alternating"
27      revealAnimation="fade"
28    />
29  )
30}

Variants

Different visual and behavioral variants of the component

Default Variant

Standard timeline with centered cards

Preview not available for this example.

Previousscroll-list

Nextseasonal-hover-cards

A product byＭＵＨＩＬＡＮ and Team❤️.

On This Page

Contribute