Nem töltődik be az animáció

A canvas üres. Az animáció soha nem jelenik meg. A konzolon lehet, hogy van hiba — lehet, hogy nincs.

Akkor használd, ha

• A <canvas> ott van a DOM-ban, de nem renderelődik semmi.
• Az onLoadError elsül.
• A DevTools konzol 404, CORS, WASM vagy CSP üzenetet ír.

Mire lesz szükséged

• Nyitott DevTools (Console + Network fül).
• A pontos URL, amit a kódod használ a .riv-hez.
• A Lupiantól kapott handoff.md.

Menj végig ezeken sorrendben

1. Elérhető-e a .riv URL?

DevTools → Network fül, frissítsd az oldalt, és keresd meg a .riv kérést.

• 200-as státusz → a fájlt kiszolgálják. Menj a 2. lépésre.
• 404-es státusz → rossz útvonal. Javítsd a src értéket. Figyelj ezekre:
  • Vezető perjel megléte (/animations/hero.riv vs animations/hero.riv).
  • Fájlnév-elgépelés / kis-nagybetű különbség (Linux/macOS hostokon érzékeny).
  • A public/ fájlok a gyökérből szolgálódnak, nem /public/-ról.
• 403-as státusz → jogosultsági probléma a hoston (privát bucket, hiányzó role, lejárt signed URL).
• Nincs is kérés → a JS már a new Rive(...) hívás előtt hibára futott. Nézd meg a konzolt.

2. Megvannak a CORS fejlécek?

Ha a .riv más originen van, mint az oldal:

• Keresd az Access-Control-Allow-Origin válaszfejlécet (Network → kattints a .riv kérésre → Headers).
• A konzolon „blocked by CORS policy” üzenet megerősíti.

Javítás: állíts be CORS-t a .riv-et kiszolgáló hoston. Host-specifikus útmutató: Fájlok hostolása & CORS.

3. Engedélyezett-e a WASM a CSP-ben?

Ha az oldal Content Security Policy fejlécet küld:

• A konzolhiba wasm-ot, WebAssembly.instantiate-et vagy unsafe-eval-t említ.

Javítás: tedd be a 'wasm-unsafe-eval'-t a script-src-be:

script-src 'self' 'wasm-unsafe-eval';

4. Töltődik a runtime csomag?

• Konzolhiba Failed to fetch típusú, egy @rive-app/... URL-re → CDN/hálózati probléma, vagy elgépelt import URL.
• esm.sh-t használsz, az oldal viszont szigorú offline / intranetes környezetben van → a CDN nem érhető el. Hostold magad a runtime-ot, vagy térj át npm-re.

5. Elsül az onLoadError?

Ha még nincs handlered, tegyél be:

new Rive({
  src: "/animations/hero.riv",
  canvas,
  autoplay: true,
  stateMachines: "State Machine 1",
  onLoad:      () => console.log("Rive loaded OK"),
  onLoadError: (err) => console.error("Rive load error:", err),
});

Gyakori onLoadError okok:

• Sérült .riv — töltsd le újra a kapott handoff-ból.
• Manuálisan állítottad a canvas.width / canvas.height értékét — ez resetelte a renderelési kontextust. Vedd ki a <canvas width="..." height="..."> attribútumokat, és CSS-sel méretezd.
• Rossz csomag a fájlhoz — a canvas-lite nem tudja betölteni azokat a .riv fájlokat, amelyek szöveget, audiot vagy scriptinget használnak. Válts @rive-app/webgl2-re.

6. Tényleg a DOM-ban van a canvas a megfelelő pillanatban?

• React: a getElementById-t szerverkomponensből vagy a canvas mount előtt hívod?
• Framer: a szerkesztő-canvas (RenderTarget.canvas) nem ismeri a WebGL-t — lásd: Framer recept.
• SSR keretrendszerek: a runtime kliensoldalon fut. Használj "use client"-et vagy dynamic(..., { ssr: false })-t.

7. Próbáld ki demo.lupian.studio-n

Ha a .riv fájl megy a demo.lupian.studio-on, akkor a fájllal nincs gond. A baj a környezetedben van (hosting, CSP, csomag).

Gyakori hibák

• <canvas width="500" height="500"> a HTML-ben. Vedd ki az attribútumokat — resetelik a renderelési kontextust. CSS-sel méretezz.
• src egy Google Drive / Dropbox megosztási URL-re mutat. Ezek HTML-t adnak vissza, nem a bináris .riv-et. Tedd a fájlt valódi statikus originre.
• A .riv URL böngészőtabon megy, az oldalon belül elszáll. Ez CORS. Javítsd a válaszfejléceket.
• A useRive null marad, sosem frissül. Tedd a komponens fájl tetejére, hogy "use client" (Next App Router), vagy importáld dinamikusan ssr: false-szal.

Ha elakadsz, ezt küldd a Lupiannak

• A pontos .riv URL-t.
• Képeket a Network fülről (a .riv sorát a Headers-szel együtt) és a konzolról.
• A használt keretrendszert.
• A teljes lista: Kérj segítséget a Lupiantól.

Kapcsolódó

• Fájlok hostolása & CORS
• Rossz méret vagy homályos
• State machine nem működik