Getting Started
Templates
Components
A scroll-driven timeline component that reveals text as you scroll, with a sticky navigation panel showing your progress. Features a draggable scrubber, marker tooltips, and beautiful text opacity animations.
Key Features:
import { ScrollFXTimeline } from "@/components/ui/scroll-fx-timeline"
const highlights = [
{
id: "intro",
heading: "01",
title: "Introduction",
paragraphs: [
"Welcome to our journey through innovation.",
"Every great product starts with a simple idea.",
],
preview: "A brief overview of our mission and vision.",
},
{
id: "process",
heading: "02",
title: "Our Process",
paragraphs: [
"We follow a rigorous design and development process.",
"Each step is carefully considered and executed.",
],
},
]
export default function Example() {
return (
<ScrollFXTimeline
highlights={highlights}
label="Timeline"
revealType="letter"
revealOpacity="soft"
/>
)
}| Prop | Type | Default | Description |
|---|---|---|---|
highlights | ScrollFXTimelineItem[] | required | Array of timeline sections |
scrollOffset | number | 96 | Scroll offset when jumping to sections |
tickCount | number | 64 | Number of tick marks on the timeline |
revealType | "word" | "letter" | "letter" | Text reveal animation granularity |
revealOpacity | "none" | "soft" | "medium" | "soft" | Opacity of unrevealed text |
timelineWidthClass | string | "lg:w-[360px]" | Width class for the timeline panel |
label | string | "Highlights" | Label shown in the timeline panel |
className | string | undefined | Additional CSS classes |
| Property | Type | Description |
|---|---|---|
id | string | Unique identifier (used as anchor) |
heading | string | Section number or short heading |
title | string | Section title |
paragraphs | string[] | Array of paragraph text |
preview | string | Optional tooltip preview text |
The TextGradientScroll component calculates each text element's position relative to the viewport center. As you scroll:
The revealOpacity prop controls the visibility of unrevealed text:
"none": Hidden until revealed"soft": 10% opacity (recommended)"medium": 30% opacityThe sticky timeline panel provides:
The panel uses sticky positioning to remain visible as you scroll through the content.