Smart Card Timeline
About this Component
Turn your static list into an engaging story.
The Interactive Hover Timeline is designed to make your history, roadmap, or career path pop. It’s built to be completely flexible, allowing you to match your brand’s look and feel perfectly without touching a line of code.
✨ Key Features
Smooth Hover Interaction: Cards elegantly reveal themselves when you hover over the timeline points.
100% Customizable: You have control over everything. Change colors, adjust gaps, resize dots, tweak border widths, and fine-tune typography to fit your design system.
Rich Media Support: Make it alive! Supports both static Images and auto-playing Videos (MP4/WebM) inside the cards.
Smart Layout: Easily position cards on the Left or Right side of the timeline.
Responsive & Clean: Optimized logic ensures it looks great and works smoothly.
⚙️ Customization Options
Global Styling: Backgrounds, Line Colors, Shadow Intensity.
Typography: Custom fonts, sizes, and colors for Years, Titles, and Descriptions.
Layout: Adjust Vertical Gaps, Card Widths, Padding, and Corner Radius.
Media: Toggle between "Original Ratio" or "Crop" mode for your images and videos.
⚠️ Important Note on Links
To ensure a smooth editing experience in Framer:
In Canvas & Preview: Links are disabled (silent) so you can edit and view without accidental navigation.
On Published Site: Links work perfectly. Just publish your site to test the navigation!
Minjoo Kim
