Scenes
The illustrated scenes on Clinia's marketing pages: when to use one, how to get one made, and who approves it.
A scene is a quiet diagram of what Clinia does: a patient's scattered data, turned into one connected story.
How to choose
| If the section needs… | Use |
|---|---|
| A diagram of what Clinia does, built once as it scrolls in | A scene, on this page |
| A diagram that morphs, steps through states or loops | A Rive scene |
| One brand line, drawn as an accent | A line drawing |
| A mood behind a section, with no information in it | A background |
Examples
Both scenes ship on this site and pass every check. Replay them to see the build order.
Patient graph, built with the scene kit
card 0s · emphasis 0.3s · nodes 0.6s +0.1s · lines 0.6s, then once both ends show · tags after their line
Sources into one record, built with the scene kit
chips 0.1s +0.08s · card 0.3s · dashed links 0.7s · pills 1.0s +0.1s · lines 1.3s +0.1s
What makes a good scene
- One idea. A scene shows the one point the page makes, and the text beside it says the same thing.
- One focus. One patient or provider at the centre, and at most one emphasized entity: the thing the scene is about. A scene without clinical entities, such as provider data flowing to the systems that use it, has none.
- Calm. Few parts, straight lines, no bounce, glow or shadow. It builds once as it scrolls in, then holds.
- Fictional. Scenes use a fictional persona, such as Darius Lee, never real patient data. Pick the patient from the patient personas.
Get one made
Scenes are made with the composing-scenes skill, which ships in the clinia/ui repository. Clone it, open it in Claude Code with the dev server running (pnpm web), then run the skill or describe the scene you need:
/composing-scenesFor the medication-safety section, I need an illustration showing how Clinia catches a drug interaction for Darius Lee.The skill writes a short brief, builds the scene, checks it, and gives you a private review page with screenshots. It only builds that page once every check passes, so a review is about the design, never a defect.
Approval
Every scene needs the marketing lead's approval before it ships.
Limits
- Phones. A scene scales down to fit, so on a phone its smallest text can drop to about 5px. The check reports it, and the brief says how the page handles phones.
- Motion range. The kit builds a scene once and holds it. Morphs, steps and loops are Rive scenes.