ALL CASE STUDIES2025
SAAS PRODUCT LANDINGPRODUCT LANDINGMOTIONDARK UI

REFLECT

A note-taking app landing where the interface plays in motion right below the headline

CLIENT
Reflect — note-taking app
TIMELINE
4 weeks
YEAR
2025
SERVICES
Design concept · Motion design · Frontend · Optimisation
[ 01 ]THE BRIEF

What the client came with

Reflect sells what a screenshot cannot show: the links between notes. The value of a second brain is not in any single screen but in how entries hook onto one another. A still image fails here — it shows a text editor, and there are hundreds of those.

The second difficulty is density. Speed, a graph of backlinks, an iOS app, end-to-end encryption, calendar, publishing, AI built on GPT-4 and Whisper. Listing all of it in the first screen says nothing at all.

[ 02 ]THE SOLUTION

What the studio did

The first screen shows the product at work. Under the headline “Think better with Reflect” a five-second looping video of the interface plays straight away: a note is written, backlinks catch on, the graph builds itself. Nothing needs explaining — you can see it.

The rest of the page turns density into rhythm: eight short capability blocks, then dedicated sections for AI, the graph of connections, capture from the browser and Kindle, and meetings pulled from the calendar. A near-black palette clears everything else away, leaving the interface and a single call to action.

[ 03 ]SCOPE OF WORK

What the result was made of

01

The product instead of a promise

A recorded interface in place of an illustration. Muted, autoplaying, a short loop: the visitor sees a real working scenario without launching the app.

02

A dark stage for the interface

The near-black violet background mutes the surroundings so only the product window glows. No decorative blocks competing with it for attention.

03

Density turned into rhythm

Eight capabilities land as short cards, while the harder ideas — AI, the graph, integrations — get their own sections with their own demonstrations.

04

The weight of the first screen

Video rather than heavy JavaScript: the loop loads with its poster and never blocks the headline from painting.

[ 04 ]INTERFACE · DESKTOP / MOBILE
DESKTOP · 1440A LIVE INTERFACE, NOT A PICTURE
MOBILE-FIRST · 390
[ 05 ]RESULTS
5 s
interface video loop instead of a static screenshot
E2EE
end-to-end encryption as its own trust block
GPT-4
AI assistant on GPT-4 and Whisper in a dedicated section
STACK:Next.jsTypeScriptMotionWebM videoTailwind CSS

Need a similar result for your business?

We’ll break down your task the same way we did this one: structure, visual direction and a quote — in a single day.