Full source code (.tsx), ready to paste
Framer remix link with the demo project
README with step-by-step setup
Free lifetime updates
Support within 24 hours
Chapters: title, subtitle, year, quote, background image, overlay color (add as many chapters as you like)
Colors: heading, body text, pill background, arrow button background, pill text, active progress line, muted progress line
Typography: separate font controls for heading, body, year, and pill label
Animation: transition type, easing, duration, and delay for the image reveal and progress line fill
Layout: container padding, quote max width, mobile breakpoint, mobile item gap, pill radius, pill inner gap, icon size, pill offset, and 4-side padding for both the pill and arrow buttons
Remix or paste the code into Framer
Drag the component onto your canvas
Edit your chapters, images, and visual styles directly in the properties panel
Code component for Framer, not a standalone download
No external libraries to install
Navigate with the arrow buttons or the left and right arrow keys
The pill label resizes smoothly to fit each chapter title
Fully responsive: subtitle, quote, and year sit in one row on desktop and stack on mobile at your chosen breakpoint
Fits the full viewport height on the published site and fills the frame on the canvas
Animations and interactions run in Preview and on the published site (the canvas shows a static renderer view)