Rive scenes
Animated scenes for marketing pages as Rive files: when to use one, examples, and how to get one made.
Rive scenes are the animated illustrations on clinia.com that need more than a build-in: morphs, steps, loops, a chat that types itself. They are Rive files, and they follow the same scene language as every other scene.
When to use Rive
Do
- Use Rive when the scene moves through states: steps with an indicator, one part turning into another, a loop that exits and starts again.
- Use Rive for app mock-ups that play out, like a chat answering a question or code being typed.
Don't
- Use Rive for a scene that builds once and holds. The scene kit does that, and its checks are stricter.
- Use Rive for decoration with no story, like a ribbon behind a heading.
Scenes on clinia.com
These are some of the scenes clinia.com uses today, made by our design agency. Each one downloads as its .riv file.
Get one made
Our design agency makes Rive scenes, and so does the authoring-rive-scenes skill, which ships in the clinia/ui repository. Clone it, open it in Claude Code and describe the scene:
A comparison card showing what Darius Lee told us in conversation becoming part of his record.The skill builds the scene from patterns measured on clinia.com's scenes, checks it, and gives you a private review page with the scene in both themes.
Example: Memory
The skill's worked example rebuilds clinia.com's Memory comparison from the pattern library. Our design agency's file is on the left, the generated one on the right. They share the layout, the colours and the rhythm; the generated one keeps tag text readable and builds its graph in.
Example: from a prompt
A fresh agent with only the skill got this request: "a code editor card where a few lines of TypeScript type themselves out, connecting to the Clinia Context Engine and fetching a patient's context, then a small response panel appears with the result." No pattern covered a code editor or typing. It built both, passed every check on its first build, then fixed five problems its fresh-eyes review found.
Approval
Every Rive scene needs the marketing lead's approval before it ships.