Timeline Animation
A vertical timeline whose line fills as the page scrolls, with entries that settle in once as they arrive.
Examples
Release history
Quillnote release history
Two years of notes, newest first
- v2.4October 2026
Shared notebooks
Invite people to a notebook and see where they are typing. Comments stay in the margin.
- v2.0June 2026
A new editor
Tables, checklists and code blocks in the same note. Older notes open exactly as they were.
- v1.6February 2026
Offline first
Notes save on the device and sync when the connection comes back, even after a week.
- v1.2September 2025
Search inside images
The text in photos of whiteboards and receipts can now be searched like any other note.
- v1.0April 2025
First public release
Notebooks, tags and a quick capture window that opens from anywhere on the desktop.
- v0.4November 2024
Private beta
Two hundred people used Quillnote every day for a month and told us what was missing.
Changelog with authors
Changelog
What shipped in Quillnote this autumn
- Oct 28
Faster sync on large notebooks
- Notebooks with more than 5,000 notes open in under a second
- Sync resumes where it stopped after a lost connection
LMLéa Martin - Oct 14
Templates for meeting notes
- Agenda, decisions and follow-ups in one template
- Attendees are filled in from the calendar event
KMKofi Mensah - Sep 30
Keyboard shortcuts you can change
- Every command can take a shortcut of your choice
- Conflicts are shown before you save
- Shortcuts sync between the desktop and the web
ADAna Duarte - Sep 12
Dark mode for printed notes
- Exports keep light colours, whatever the theme on screen
TRTomás Reyes
Installation
npx shadcn@latest add https://ui.ndekocode.dev/r/motion-timeline-animation.jsonComponent API
TimelineAnimation
The line fills up to the middle of the scrolling area, and each dot takes the primary colour when the line reaches it. Entries rise 8px and fade in over 300ms the first time they enter the view, then stay. With reduced motion, the line is full and every entry is in place from the start.
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | The TimelineAnimationItem elements, in reading order. | |
| containerRef | RefObject<HTMLElement | null> | The scrolling element, when it is not the page. It needs a non-static position. | |
| className | string | undefined | Optional CSS class for the list. |
TimelineAnimationItem
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | The content of the entry. Its first line sits next to the dot. | |
| className | string | undefined | Classes of the entry, merged over relative ps-8 pb-10. The bottom padding is the gap. |