Timeline Scrubber
The page as an editing timeline you can scrub.
Features
- Scroll progress drawn as an editing timeline across the top
- Drag the playhead to scrub through the page
- Section clips sized to each section's real length
- Keyboard and reduced-motion friendly
Best for: A content-heavy page, case study or long-form article where readers want to see how far they are and jump to any part.
Installation
npm install motion @radix-ui/react-slot class-variance-authority clsx tailwind-mergeThen copy the files from the Code tab into the same paths in your project, in TypeScript or JavaScript.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| logo | ReactNode | - | Your logo. It inherits currentColor. |
| items | NavItem[] | - | One link per section, in page order: label and #id href. |
| cta | { label: string; href: string } | - | Optional call-to-action button. |
| className | string | - | Extra classes for the outer element. |
FAQ
Is the Timeline Scrubber navbar free to use?
Yes. Timeline Scrubber is free to copy into your own projects. Open the Code tab and paste the files into your app.
Does Timeline Scrubber work with Next.js and React?
Yes. It's a React client component made for the Next.js App Router, styled with Tailwind CSS and animated with Framer Motion (the motion package).
Can I use Timeline Scrubber in JavaScript instead of TypeScript?
Yes. Every file comes in TypeScript and JavaScript. Switch the language in the Code tab.
What does Timeline Scrubber need installed?
motion, @radix-ui/react-slot, class-variance-authority, clsx, tailwind-merge, plus the shared helpers from the Installation page.
Is Timeline Scrubber accessible?
Every link and button is reachable by keyboard with a visible focus ring, and the animation stays still for visitors who ask for reduced motion.