Clearweek | SaaS Website

Clearweek is a concept website for a fictional calendar assistant. It gathers a team's meetings into the mornings and keeps afternoons free for deep work.

The goal was a site with the polish people hire Framer and Webflow designers for: a clean grid, big confident type, rounded cards, and calm motion. Every animation was built in code, with no 3D and no heavy effects.

One sticky section tells the whole product story. A messy week packed with meetings fills the screen. As you scroll:

This is your week: meetings scattered across every day.

Clearweek finds the pattern: meetings that can move are marked.

Meetings move to the mornings: each block slides into its own morning slot.

Afternoons open up: calm focus blocks grow from 1 pm to 5:30 pm.

A focus-time counter climbs from 6 to 17 hours along the way (concept figures). Every movement follows the scroll position, so scrolling back up unsorts the week exactly.

Light, warm, and calm: a paper background, ink text, focus green for actions, coral for meetings, and sage for focus time. Instrument Sans carries headlines and body text, with Instrument Serif italic used for one phrase per headline.

Hero headline revealed line by line, with product cards floating at different parallax speeds.

A scrolling band of feature phrases.

A bento grid where each card has its own hover animation: a toggle flips, scattered blocks snap together, clock hands meet, and bars grow.

One card grows to fill the screen and becomes the next section.

Role tabs, stacking “how it works” cards, a sideways-scrolling feature row, a pricing toggle, and an accessible FAQ.