← back to the gallery

Replicate: colorful API landing pairing live-looking code with changing model examples

Tier
inspiration
Roles
hero, explainer, capability, feature, proof
Feel
light, playful, saas, depth, warm
Motion
pan, kinetic, reveal
Source
public-site
Site
https://replicate.com
Licence
Captured from a Refero-hosted recording and the live site; description only, no redistribution of the source.
Captured
2026-10-06
Captures
frames: https://images.refero.design/styles/refero.design/video/6585c2ef-50fc-4b6a-ba51-92d9b4fe4a4b.mp4
both: https://replicate.com

What it does

A blurred pink, orange and yellow field carries a large API statement beside a code sample and changing generated-image examples. White model and community sections give the demonstrations structure. A large code block within a saturated gradient frame explains usage before a dark infrastructure section.

Section roster

1. Gradient API introduction. 2. Code sample and changing model output. 3. Community identities. 4. Model-example grid. 5. Large usage code block in gradient frame. 6. Dark infrastructure explanation.

Why it works

Pairing a short code example with a visible output connects the developer proposition to its result. White model grids make the colorful opening easier to translate into concrete capabilities.

Source and capture notes

Refero [style page](https://styles.refero.design/style/71c21f97-ba85-4439-b259-198a66f4b3d2) and [recorded video](https://images.refero.design/styles/refero.design/video/6585c2ef-50fc-4b6a-ba51-92d9b4fe4a4b.mp4); [live site](https://replicate.com) 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. The live page changes the showcased models, output prompts and promotional strip over time.