What Lupian sends you

A typical Lupian Rive delivery is small. Here is exactly what is in the package and how to read it.

Use this when

You just received the handoff and want to know what each file is for before you start integrating.

What is in the package

A standard handoff looks like this:

your-project/
├── animation.riv           ← the file you embed
├── fallback.png (or .svg)  ← static image for users without WebGL / while loading
├── handoff.md              ← names, sizes, intended fit, notes
└── preview.mp4 (optional)  ← what the animation should look like

Some deliveries also include:

• An extra .riv for a mobile or reduced variant.
• Additional referenced assets (fonts, images) if the .riv uses referenced asset mode — see Hosting assets & CORS.

The .riv file

A binary Rive file. You do not edit it — you host it and load it from a <canvas>.

• Typical size: 10 KB to a few hundred KB.
• Treat it like an immutable asset: when Lupian sends a new version, change the filename or add a cache-busting query (?v=2).
• It works with every Rive runtime (web, iOS, Android, Flutter, RN, Unity, Unreal) — same file, different wrapper.

The fallback image

A static PNG or SVG of the first/idle frame, sized to match the animation's intended display size.

Show this when:

• The user's browser has no WebGL.
• The .riv file is still loading.
• The animation fails to initialise (onLoadError).

There is an example pattern in Animation will not load.

The handoff.md notes file

This is the source of truth for the names you will reference in code. It includes:

Field	Example	Used in your code as
Artboard	Hero	artboard: "Hero"
State machine	State Machine 1	stateMachines: "State Machine 1"
Inputs	isHovering (bool), progress (number), onClick (trigger)	stateMachineInputs(...)
Events	buttonClicked, sequenceComplete	onRiveEventReceived
Intended fit	Contain, centered	layout: new Layout({ fit: Fit.Contain, alignment: Alignment.Center })
Aspect ratio	16:9, 1:1, etc.	CSS sizing of the canvas container
Notes	"Animation expects a square container, minimum 240px"	—

Names are case-sensitive

The names in handoff.md are exactly what is in the .riv file. If your code says "state machine 1" and the file has "State Machine 1", it will silently do nothing.

What you need

Before opening a recipe, have these to hand:

• The .riv filename and the URL it will be hosted at.
• The state machine name (if the animation uses one — almost always yes).
• Any input names you plan to wire to interactions.
• The intended fit (Contain, Cover, etc.) and aspect ratio.

If the package is missing something

If you do not have a handoff.md, a fallback image, or the names look ambiguous — see Ask Lupian for help before starting integration.

Next step

• Default: Vanilla Web recipe.
• React/Next: React / Next.js recipe.
• Framer: Framer recipe.