Project Timeline

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.

Questions or custom requests?

We design and build custom Framer components. Get in touch at contact@teampixel.com.au.