Vanilla Web (alapértelmezett)

Az alapértelmezett biztonságos út bármelyik Lupian-szállította .riv fájlhoz. Működik sima HTML-ben, WordPressben, Webflow-szerű építőkben, Shopify-on, egyedi stackekben, és minden más keretrendszer alatt, ahova be tudsz dobni egy <script> blokkot.

Akkor használd, ha

• Van egy .riv fájlod a Lupiantól, és egy oldalad, ahova <script> vagy „Custom HTML” típusú beágyazás kerülhet.
• Nincs szükséged keretrendszer-specifikus reaktivitásra az animáció körül (pl. React state hajtja az inputokat).
• Nem tudod, melyik receptet válaszd — innen indulj.

Mire lesz szükséged

• A .riv fájl egy ismert URL-en (lásd: Fájlok hostolása & CORS).
• A state machine neve a handoff.md-ből.
• Egy hely az oldalon, ahova kerülhet HTML + <script>.

Másold be ezt

Tedd az oldaladra. A YOUR_FILE_URL és a "State Machine 1" helyére írd be a handoff.md-ben szereplő értékeket.

<div style="position:relative; width:100%; aspect-ratio:16/9;">
  <canvas
    id="rive-canvas"
    style="width:100%; height:100%; display:block; touch-action:none;"
  ></canvas>
</div>

<script type="module">
  import { Rive, Layout, Fit, Alignment }
    from "https://esm.sh/@rive-app/webgl2";

  const canvas = document.getElementById("rive-canvas");

  const r = new Rive({
    src: "YOUR_FILE_URL",                  // pl. "/animations/hero.riv"
    canvas,
    autoplay: true,
    stateMachines: "State Machine 1",      // a handoff.md-ből
    layout: new Layout({
      fit: Fit.Contain,
      alignment: Alignment.Center,
    }),
    onLoad: () => r.resizeDrawingSurfaceToCanvas(),
    onLoadError: (err) => console.error("Rive load error:", err),
  });

  window.addEventListener("resize", () => r.resizeDrawingSurfaceToCanvas());
</script>

Ennyi az egész integráció.

npm-es változat (Vite, Webpack stb.)

Ha van bundlered, telepítsd a csomagot, és importáld helyben:

npm install @rive-app/webgl2

import { Rive, Layout, Fit, Alignment } from "@rive-app/webgl2";
// utána ugyanaz a `new Rive({...})` hívás, mint fent

Melyik csomagot válaszd?

Csomag	Mikor használd
@rive-app/webgl2	Alapértelmezett. Teljes funkcionalitás — mesh, blend módok, vektoros tollazás.
@rive-app/canvas	Kisebb (Canvas2D). Csak akkor, ha a célplatformon nincs WebGL2.
@rive-app/canvas-lite	A legkisebb. Nincs benne szöveg / audio / scripting. Csak akkor, ha a handoff.md egyértelműen kimondja, hogy ezekre nincs szükség.
@rive-app/webgl2-single	Ugyanaz, mint a webgl2, de a WASM bele van fűzve a JS-be. Hasznos Framerben és más, CDN-cache-érzékeny környezetben. Lásd: Framer.

Ha bizonytalan vagy, használd a @rive-app/webgl2-t.

Inputok és események bekötése

Lásd: State machine inputok & események — ott van a teljes minta. Röviden:

r.on("load", () => {
  const inputs = r.stateMachineInputs("State Machine 1");
  const isHover = inputs.find(i => i.name === "isHovering");
  canvas.addEventListener("mouseenter", () => isHover.value = true);
  canvas.addEventListener("mouseleave", () => isHover.value = false);
});

Gyakori hibák

• A canvas.width / canvas.height közvetlen állítása. Ne csináld. Tönkreteszi a renderert. A konténer méretét CSS-sel add meg, és hívd a resizeDrawingSurfaceToCanvas()-t betöltéskor és átméretezéskor.
• A resizeDrawingSurfaceToCanvas() elhagyása átméretezéskor. Az animáció homályos vagy pixeles lesz. Lásd: Rossz méret vagy homályos.
• Rossz state machine név. Kis- és nagybetűérzékeny. A "state machine 1" ≠ "State Machine 1". A fájl betöltődik, de nem reagál semmire.
• Nincs cleanup() SPA route-váltáskor. Amikor a canvas eltűnik a DOM-ból, hívd meg az r.cleanup()-ot, hogy felszabaduljon a WASM-memória.
• Élesben esm.sh-ról importálsz fallback nélkül. Éles környezetben inkább npm + bundler, vagy saját CDN-en pinnelt verzió.
• CORS hibák, amikor a .riv más originen van. Lásd: Fájlok hostolása & CORS.

Ha elakadsz, ezt küldd a Lupiannak

• Linket az oldalra (vagy egy képernyőfelvételt).
• A pontos fájlnevet, amit töltesz, és az URL-t, ahol él.
• A state machine nevét pontosan úgy, ahogy a kódba írtad.
• A konzolhibákat (DevTools-ban a Console fülről egy képet).
• A teljes lista: Kérj segítséget a Lupiantól.

Kapcsolódó

• State machine inputok & események
• Fájlok hostolása & CORS
• Hibakeresés
• Részletes API referencia: rive.app/docs