← back to the gallery

Viewport: calm design-presentation landing with contrasting viewer previews

Tier
inspiration
Roles
hero, explainer, feature, testimonial, proof, closing, footer
Feel
light, minimal, saas, cold
Motion
reveal, pan
Source
public-site
Site
https://viewport.co/
Licence
Captured from a Refero-hosted recording and the live site; description only, no redistribution of the source.
Captured
2026-10-05
Captures
frames: https://images.refero.design/styles/refero.design/video/4bb11214-27bd-4d1a-a88c-7c8b3ca029c6.mp4
both: https://viewport.co/

What it does

The recorded landing pairs a centered design-presentation promise with light and dark viewer previews on pale blue panels. It follows with a mint project example, a dark dynamic-presentation scene, designer proof and a grid of shared work examples.

Section roster

1. Centered introduction with light and dark viewer previews. 2. Mint-backed project presentation example. 3. Dynamic presentation explanation with a dark viewer. 4. Designer testimonials and product-detail examples. 5. Shared project and presentation gallery. 6. Pale blue closing action and footer.

Why it works

Presenting the same kind of work in contrasting viewer frames makes the product tangible without dense copy. Pale blue and mint sections give the predominantly white page distinct chapters, while the larger dark viewer provides a useful change of visual weight.

Source and capture notes

Refero [style page](https://styles.refero.design/style/754ad72f-9abd-43df-ac72-c6abf2036ed4) and [recorded video](https://images.refero.design/styles/refero.design/video/4bb11214-27bd-4d1a-a88c-7c8b3ca029c6.mp4); [live site](https://viewport.co/) checked on 2026-10-05. The recording is a point-in-time reference; current site content may differ. Descriptions distinguish the recording from the current page where they differ. Layout and motion notes come from sampled recording frames and automated live captures; interactive controls were not comprehensively tested. The live site has changed substantially: a process-book message and a visual project archive replace the recorded presentation-tool story. The recording remains the primary design reference, and no private project was uploaded.