Wispr Flow

Why it works

The site opens with horizontally scrolling marquee strips that flash app names and features in rapid succession, selling the "works everywhere" message through motion rather than copy. GSAP-powered staggered reveals make each feature section feel like a live product demo unfolding in front of you, building conviction through choreography. A blue accent on near-black creates a palette that reads as serious technology without feeling cold.

Who should look at this

SaaS founders who need to demonstrate a productivity tool's breadth without crowding a single page with screenshots and feature lists.

Signature technique

Multiple horizontal marquee strips scroll in opposite directions in the hero, each line listing a different product dimension — supported apps, features, platforms — so the page communicates depth of integration through visual density alone, before a visitor reads a single bullet point.

How the page is built

1. Announcement strip. A slim dark green bar across the very top announces a new Android version with a download link, so news gets seen without crowding the hero.
2. Floating navigation card. The logo and five links sit in a rounded white card, with an outlined Android button and a lilac download button that names the visitor's own computer.
3. Two-tone headline. 'Don't type, just speak' is set in a large serif with the first half in pale grey and the second in black, followed by one sentence, a lilac button and a line listing the platforms.
4. Ribbons of spoken words. Curling ribbons of transcribed speech wrap around the page and flow into a sound-wave pill, showing speech turning into writing without a single screenshot.
5. Four times faster. On a dark rounded panel, a two-row comparison of typing against speaking sits above a demo where a rambling spoken message becomes a clean one.
6. How it works. Short headings such as 'Speak naturally' explain that you can ramble, pause or change your mind and the writing still comes out clean.

Look and feel

A pale butter-cream page with dark ink text, an elegant high-contrast serif headline and soft lilac buttons. A dark rounded panel rises below the hero like a stage. It feels warm, literate and human, which is unusual for software.

Where it might not fit

The curling ribbons of text are hard to read and compete with the headline, and the speed figures are the company's own claim with no source in the text we saw. The rounded dark panel and animation also suit a playful audience more than a cautious one.

What to borrow

• Grey out the first half of a headline and set the second half in black, so the contrast works like a before and after.
• Show the product working on real, messy input, such as a rambling message beside its cleaned-up version, with labels for what was fixed.
• Present a speed or size claim as a simple two-row comparison, such as typing against speaking, so it is understood at a glance.

Brief your developer

“I want a pale cream page with a large serif headline whose first half is grey and second half black, one soft lilac button that names the visitor's own computer, and a demo that shows messy real input next to the cleaned-up result.”

Want a full version for your own site? Get the brief.

How can I show what my product does without a long explanation?

Wispr Flow shows a rambling spoken message, with its 'um's and false starts, next to the clean version and labels what was fixed: filler, correction and repetition. Seeing the before and after proves the claim faster than any description. Use real, slightly messy examples from your own customers rather than tidy ones.

Should the main button change for different visitors?

In the captured version the main button reads 'Download for Windows', while a separate outlined button covers Android and a strip at the top announces that launch. Naming the visitor's own computer removes a decision. If your product has several versions, lead with the likeliest one and list the others in a small line beneath.