Liveblocks — Hero
Centered white headline 'Realtime infrastructure for multiplayer apps and agents' with a small 'RECAP' pill above, subcopy and two CTAs (solid 'Get started for free', 'Install with AI' dropdown). Below sits a large dark app mockup wrapped in a grainy magenta-pink glow, overlaid with hand-drawn marker callouts (Multiplayer undo/redo, AI toolbar, Anchored comments) on a live document with comments and AI Copilot popover.
This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/inspiration/liveblocks-annotated-collaborative-doc-hero-with-pink-glow-product-mockup.
Measured spec
| Scheme | dark |
| Background | #000000 |
| Text | #FFFFFF |
| Accents | #3F1827 |
| Contrast | 21.0 |
| Columns | 1 |
| Alignment | left |
| Whitespace | regular |
| Density | 0.254 |
| Measured size | 1600×1720 px |
Palette
#000000#ffffff#ec1e8a#d6328f
Fonts
Suisse
Page types
Detail
UX patterns
Dark ModeActivity Feed
UI elements
Navigation BarCardAvatarBadgeTabs
Context
- Parent page: Realtime infrastructure dev-tool landing with annotated collaborative-doc hero on black
- All of Liveblocks
Other sections on this page
- Logo Wall — Trusted-by logo grid (Vercel, Typeform, Dropbox, Cisco...)
- Gallery / Showcase — 'Unlock the secret sauce' headline + horizontal product-card carousel
- Feature — 'Realtime sync' feature grid with Presence/Storage/Threads list
- Feature — 'Collaboration features, ready to ship' benefit grid
- Feature — 'First-class developer experience' comment-thread + code showcase
- Testimonial / Social Proof — 'Trust at scale' testimonial + compliance/uptime block
- Footer — Four-column footer with status pill and compliance badges