Start here

You are a developer integrating a Rive animation that Lupian Studio built for you. This site is the support layer between the .riv file in your inbox and a working animation on your site.

Use this when

• You just received a .riv file (or a folder of files) from Lupian.
• You are about to embed it in a website, app, or builder (WordPress, Webflow-like, Framer, React, Next, custom).
• Something is rendering, loading, or behaving differently than the preview Lupian showed you.

Three things to do first

1. Choose your path — a 30-second decision helper that points you at the right recipe.
2. See what Lupian sends you — file list, names, inputs/events, fallback image, notes.
3. Open the right recipe.
   • Plain HTML, WordPress, Webflow, custom stack → Vanilla Web (default safe path).
   • React or Next.js → React / Next.js.
   • Framer → Framer.

How this site is organised

• Recipes — copy-paste integrations for each stack. Vanilla Web is the default; React and Framer are wrappers around the same file.
• Troubleshooting — problem-first pages. Open the one that matches your symptom.
• Handoff — short developer and QA checklists for going live, plus what to send Lupian when stuck.
• Reference — embedding options, system requirements, and the Framer component source.

We do not duplicate Rive docs

For deep Rive concepts (runtime API surface, advanced features, editor-level details) we link straight to rive.app/docs. This site stays focused on what you actually need to ship a Lupian-delivered animation.

Common questions

• Which package? — Default to @rive-app/webgl2. It supports every feature Lupian uses (mesh, blend modes, vector feathering).
• Do I need React? — No. Vanilla Web works everywhere. React/Next is just a wrapper around the same .riv file.
• Where is the live preview? — At demo.lupian.studio.
• Something looks wrong. — Start at Troubleshooting.

If stuck, send this to Lupian

See Ask Lupian for help — a short list of the exact details we need to debug fast.