A release log down a line that fills as you scroll, with each entry rising in and its dot filling as the line arrives.
Save your brand colours and every preview, snippet and install follows.
Stack sections, edit the words and export a finished page.tsx.
Galleries only run the previews you can see, so long pages stay smooth.
Every component now ships with a WCAG 2.2 audit.
Customize
Usage
import { ChangelogTimeline } from "@/components/motionkit/changelog-timeline";
import { SpotlightText } from "@/components/motionkit/spotlight-text";
import { RollingText } from "@/components/motionkit/rolling-text";
import { VelocityMarquee } from "@/components/motionkit/velocity-marquee";
import { DotWave } from "@/components/motionkit/dot-wave";
import { SilkLines } from "@/components/motionkit/silk-lines";
import { HexGrid } from "@/components/motionkit/hex-grid";
import { WaveText } from "@/components/motionkit/wave-text";
import { GlitchText } from "@/components/motionkit/glitch-text";
import { ConicGlow } from "@/components/motionkit/conic-glow";
import { Bokeh } from "@/components/motionkit/bokeh";
import { InkReveal } from "@/components/motionkit/ink-reveal";
import { ExtrudedText } from "@/components/motionkit/extruded-text";
import { FlowField } from "@/components/motionkit/flow-field";
import { GooeyBlobs } from "@/components/motionkit/gooey-blobs";
<ChangelogTimeline
entries={[
{ date: "2026-10-21", title: "Theme Studio", version: "v2.4", tag: "New", description: "Save your brand colours everywhere." },
{ date: "2026-10-14", title: "Page Builder", version: "v2.3", tag: "New", description: "Export a finished page.tsx." },
]}
/>Motion
The exact curves this component runs, plotted with Motion's own maths.
Line fill
Scroll position
Entry rise
Scrolls into view
Changelogs, release notes, company histories and roadmaps: any list of dated events people scroll through.
useScroll tracks the list from when its top reaches the middle of the screen to when its end does, and a spring smooths that into the scale of a line running down the track. Each entry rises in as it scrolls into view, and its dot fills with a small pop once it's well into view, which is about when the line arrives. Dates are real time elements formatted in the reader's locale, and on wide screens they move into their own column.
| Prop | Type | Default | Description |
|---|---|---|---|
| entries | ChangelogEntry[] | — | Each release's date, title, description, and optional version and tag. |
| accent | string | "#5FAEB4" | Colour of the line, dots and tags. |
| locale | string | "en-GB" | Locale used to format the dates. |
How we audit: the WCAG 2.2 animation checklist and respecting reduced motion in React.
Yes. The file starts with "use client", so you can import it straight into a Server Component page or layout. It works in Vite as is, and in Astro as a React island.
Only the motion package, beside React and Tailwind CSS v4. There is no MotionKit package and no Tailwind config to add.
Yes, with MotionKit Plus. Add the @motionkit registry and your personal token to components.json (the snippet is on your account page), then run npx shadcn@latest add @motionkit/changelog-timeline. It saves the file to components/motionkit and installs its dependencies.
Changelog Timeline is part of MotionKit Plus (£12 a month or £96 a year). The live preview and playground are free to explore; Plus unlocks its source code, every customisation control and commercial use.
With reduced motion on, the line is full, entries are in place and every dot is already filled.
Marquee
A seamless infinite scroller for logos and testimonials that pauses on hover.
Motion Path
A line that draws itself through your steps when the section scrolls into view, with a dot of light travelling along it.
Parallax Stack
Overlapping images that drift at different speeds and tidy into a stack as you scroll, for editorial storytelling.
Save your brand colours and every preview, snippet and install follows.
Stack sections, edit the words and export a finished page.tsx.
Galleries only run the previews you can see, so long pages stay smooth.
Every component now ships with a WCAG 2.2 audit.
Customize
Usage
import { ChangelogTimeline } from "@/components/motionkit/changelog-timeline";
import { SpotlightText } from "@/components/motionkit/spotlight-text";
import { RollingText } from "@/components/motionkit/rolling-text";
import { VelocityMarquee } from "@/components/motionkit/velocity-marquee";
import { DotWave } from "@/components/motionkit/dot-wave";
import { SilkLines } from "@/components/motionkit/silk-lines";
import { HexGrid } from "@/components/motionkit/hex-grid";
import { WaveText } from "@/components/motionkit/wave-text";
import { GlitchText } from "@/components/motionkit/glitch-text";
import { ConicGlow } from "@/components/motionkit/conic-glow";
import { Bokeh } from "@/components/motionkit/bokeh";
import { InkReveal } from "@/components/motionkit/ink-reveal";
import { ExtrudedText } from "@/components/motionkit/extruded-text";
import { FlowField } from "@/components/motionkit/flow-field";
import { GooeyBlobs } from "@/components/motionkit/gooey-blobs";
<ChangelogTimeline
entries={[
{ date: "2026-10-21", title: "Theme Studio", version: "v2.4", tag: "New", description: "Save your brand colours everywhere." },
{ date: "2026-10-14", title: "Page Builder", version: "v2.3", tag: "New", description: "Export a finished page.tsx." },
]}
/>Motion
The exact curves this component runs, plotted with Motion's own maths.
Line fill
Scroll position
Entry rise
Scrolls into view
The live preview is free to explore. Plus unlocks the source for Changelog Timeline and every other premium component.