Project Timeline: Premium Sections Component by Aidan Looker

Visualise project progress with a polished, date-driven Gantt timeline. Drop it in, set your task dates and milestones, and have a production-ready roadmap section in minutes. Built for agencies, SaaS teams, and freelancers.

What is Project Timeline?

Project Timeline is a fully customisable Gantt-chart component that turns real dates into a polished visual roadmap. Each task bar renders with a progress fill, diagonal-stripe unfilled region, and overlapping team avatars — all positioned automatically from your start and end dates. A live "today" marker anchors the viewer in the current moment. Ideal for agency portfolios, SaaS product pages, startup pitch decks, and internal dashboards.

Core Features

Date-driven task bars that position and scale automatically from start/end dates, with progress fills, diagonal-stripe unfilled regions, and auto-contrast text
Overlapping avatar clusters (up to 3 per task).
Live "today" marker with vertical line and dot, calculated from the real date and visible whenever today falls within the timeline range
Four curated theme presets (Natural, Midnight, Corporate, Warm) plus a fully unlocked Custom mode with 12 individual colour controls
Responsive container-aware layout that scales typography, bar heights, padding, and avatars proportionally to fit any canvas width
Subtle entrance animations with staggered task bar reveals and hover micro-interactions, automatically disabled on canvas and export

Controls inside Framer

Content

Title
Button Text
Button Link (native Framer link)
Show Button toggle

Tasks (up to 8)

Task Name
Start Date (YYYY-MM-DD)
End Date (YYYY-MM-DD)
Progress (0–100%)
Bar Color (Primary / Secondary / Accent)
Avatar 1, Avatar 2, Avatar 3

Appearance

Theme (Natural, Midnight, Corporate, Warm, Custom)
Date Labels count (3–7)

Custom Colors (12 controls, visible in Custom theme)

Background, Card BG, Bar Primary, Bar Secondary, Bar Accent, Bar Text, Text, Text Muted, Button BG, Button Text, Today Line, Grid Lines

Card Style

Border Radius
Padding
Bar Height
Bar Radius
Avatar Size

Typography

Title Font
Body Font
Label Font

Best use cases

Agency and freelancer portfolio sites to showcase project workflows and delivery timelines to prospective clients
SaaS product pages and landing pages to illustrate development roadmaps, release schedules, or onboarding timelines
Startup pitch decks and investor pages to communicate product milestones and team velocity at a glance
Internal dashboards and project status pages where stakeholders need a clear, visual progress overview

Drop it on any page and have a polished, presentation-ready timeline section that adapts to your brand in under a minute.