Contour Timeline
Give every milestone its moment
About this component
About
Contour Timeline is an interactive horizontal timeline for Framer, built for company histories, product milestones, and portfolio journeys. An animated line curves beneath the selected milestone, revealing an optional image-and-text card. Visitors can explore through hover, click, or a touch-friendly layout, with linked cards leading to related projects and stories. Keyboard controls and reduced-motion support are included.
What you can customize
Built as a Framer code component with easy property controls. Add up to 30 milestones and customize years, labels, titles, descriptions, images, links, typography, colors, and card styling. Adjust the curve, spacing, motion, starting item, hover or click behavior, navigation arrows, and compact layout breakpoint. Show or hide images and details without editing code.
Great for (examples)
Just a few ideas, use it anywhere you want to make a sequence easier to explore:
Company history, brand heritage, and founding stories
Product milestones and manually updated roadmaps
Career journeys, experience, and achievements
Portfolio projects and case-study navigation
Project phases and development stories
Agency growth and studio anniversaries
Research milestones and innovation histories
Personal journeys and creative retrospectives
Share your build
If you ship something cool with it, post it on X and tag me @Matthias_Oel, or send it over. I’d love to see what you create.
Need help?
Questions or feedback? Reach me anytime: matthias@lmvision.de or on X @Matthias_Oel.
Need a matching component?
Show more of your work with Real Folder or MacBook Reveal.
