← back to the gallery

Liveblocks: dark collaborative-infrastructure landing with shared-cursor typography

Tier
inspiration
Roles
hero, explainer, capability, feature, proof, closing, footer
Feel
dark, saas, premium, depth, cold
Motion
reveal, pan, drift
Source
public-site
Site
https://liveblocks.io/
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/c3bc7210-62db-4299-869a-d5a4ead92e7c.mp4
both: https://liveblocks.io/

What it does

Liveblocks introduces collaborative infrastructure on an almost-black canvas. The recorded hero features a pink-bordered shared interface; current content uses changing collaborative wording, colored cursor-name labels and a softly lit abstract object. Below, product examples, infrastructure capabilities and reliability proof build a developer-facing narrative.

Section roster

1. Dark collaborative hero. 2. Customer proof. 3. Collaboration examples. 4. Infrastructure capability list. 5. Use-case demonstrations. 6. Reliability and closing invitation.

Why it works

A live-looking collaboration demonstration makes infrastructure visible. Quiet white typography and generous dark space keep the technical narrative readable, while the pink frame and colored cursor labels supply recognizable product cues.

Source and capture notes

Refero [style page](https://styles.refero.design/style/9b9b0ca1-5067-4115-b62f-ee0e43d1f37f) and [recorded video](https://images.refero.design/styles/refero.design/video/c3bc7210-62db-4299-869a-d5a4ead92e7c.mp4); [live site](https://liveblocks.io/) checked on 2026-10-06. 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.