Getting Started
Templates
Blocks
Components
For solo developers, indie hackers, and freelancers shipping their own products. Pay once, keep everything forever.
Instant download · No subscription · Lifetime access
For small teams, agencies, and freelancers shipping multiple client products. Lifetime access for everyone on your team.
Instant CLI token for 5 seats · Onboarding included · Invoice on request
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:
| 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.