Skip to content

component

Smart Card Timeline

By Minjoo Kim

Details

Summary

Fully customizable media timeline

Description

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!

Introduction

Fully customizable media timeline

Rank history

Daily rank per list, from the first snapshot — lower is better.

120014001600162798/148/228/309/79/15
  • All · #5795