Scroll Timeline

New

A timeline that draws itself as you scroll

$ npx @hritik-sharmaa/repeat-ui add grid-scroll-timeline
Category
Grid
Added
Nov 1, 2026
Version
1.0.0
Packages
motion
Flavors
TS · JS · Tailwind · CSS
Live preview

  1. Aug 2025

    The first button

    Repeat UI starts with ten hover buttons and a copy button.

  2. Sep 2025

    Cards and carousels

    3D cards, pricing tables and three kinds of carousel join in.

  3. Oct 2025

    A CLI

    One command adds any component to your project, in TS or JS.

  4. Nov 2026

    Customize everything

    Every component gets a live panel of props to play with.

  5. Next

    Your turn

    Copy one, paste it in, and make it yours.

Customize
48px
import GridScrollTimeline from "@/components/repeat-ui/grid-scroll-timeline/preview";

<GridScrollTimeline items={items} />

Installation

  1. Run the command

    Adds the files and installs any packages they need. Works with npm, pnpm, yarn and bun.

    $ npx @hritik-sharmaa/repeat-ui add grid-scroll-timeline --variant ts-tailwind

  2. Use it

    The files are in components/repeat-ui/grid-scroll-timeline/.

    import GridScrollTimeline from "@/components/repeat-ui/grid-scroll-timeline/preview";

export default function Page() {
  return <GridScrollTimeline />;
}

Props

PropTypeDefaultDescription
itemsTimelineItem[]-{ date, title, description? }.
accentColorstring"#fa5f1b"Line, dot and date colour.
lineColorstring"rgba(255, 255, 255, 0.12)"Colour of the undrawn line.
dotColorstring"#0a0a0a"Dot fill before it lights up.
gapnumber48Space between milestones, in pixels.
classNamestring""Extra classes for the root element.

More grid

See all
2 Column Bento GridDynamic grid layout with animated items
3 Column Bento GridMasonry style grid with variable item heights
Pinterest GridPhoto gallery grid with lightbox effect