Framer

A Lupian egy éles használatra hangolt Framer code component-et szállít (RiveFramerEmbed) — bedobod, beírod a .riv URL-jét, kész.

Akkor használd, ha

Egy Lupian .riv fájlt szeretnél beilleszteni egy Framer oldalba.

Mire lesz szükséged

• A .riv fájl egy publikus URL-en (a Framer nem tud helyi fájlból olvasni).
• A state machine neve a handoff.md-ből.
• A Framer code component funkciója (bármelyik fizetős csomag).

A leggyorsabb út

Használd a repóval szállított Rive Framer Embed komponenst. A teljes forrás és a property controlok itt: Rive Framer Embed.

Ha inkább egy minimális komponenst raknál be magától a Framerbe, ezt másold:

import { useEffect, useRef } from "react";
import { addPropertyControls, ControlType, RenderTarget } from "framer";

export default function RiveAnimation(props: {
  src: string;
  stateMachine: string;
}) {
  const canvasRef = useRef<HTMLCanvasElement>(null);

  // A Framer szerkesztő canvas-én nincs WebGL — ott helyőrzőt mutatunk.
  if (RenderTarget.current() === RenderTarget.canvas) {
    return (
      <div style={{
        width: "100%", height: "100%",
        background: "#1a1a2e", color: "#fff",
        display: "grid", placeItems: "center",
      }}>
        Rive Animation
      </div>
    );
  }

  useEffect(() => {
    let r: any;
    (async () => {
      // A -single változat inline tartalmazza a WASM-ot — kikerüli a Framer
      // CDN-cache problémáját az elavult WASM bináristokkal.
      const rive = await import("@rive-app/webgl2-single");
      if (!canvasRef.current) return;

      r = new rive.Rive({
        src: props.src,
        canvas: canvasRef.current,
        autoplay: true,
        stateMachines: props.stateMachine,
        useOffscreenRenderer: true,
        onLoad: () => r.resizeDrawingSurfaceToCanvas(),
      });
    })();
    return () => r?.cleanup();
  }, [props.src, props.stateMachine]);

  return (
    <canvas
      ref={canvasRef}
      style={{
        width: "100%", height: "100%",
        touchAction: "none", pointerEvents: "auto",
      }}
    />
  );
}

addPropertyControls(RiveAnimation, {
  src:          { type: ControlType.String, title: "Rive URL" },
  stateMachine: { type: ControlType.String, title: "State Machine",
                  defaultValue: "State Machine 1" },
});

Miért a -single Framerben

A Framer JSPM CDN-en keresztül oldja fel az npm csomagokat, és ez verziók között elavult WASM binárist tud cache-elni. Tünetei: hiányzó mesh-ek, nem renderelődő szöveg, rossz blend módok. A @rive-app/webgl2-single változat a WASM-ot beleinlining-eli a JS-be, így nincs külön WASM-letöltés.

Gyakori hibák

• Helyi .riv útvonalat adsz meg. A Framer nem tud helyi fájlt betölteni — a .riv-et el kell helyezni egy elérhető URL-en.
• Hiányzik a szerkesztő-canvas helyőrző. A RenderTarget.canvas alatt nincs WebGL és audio — a komponens hibára fut a szerkesztőben, ha nincs ez a placeholder ág.
• A pointer események nem érik el a canvast. Egy Framer réteg elfogja őket. A <canvas>-en legyen pointerEvents: "auto" és touchAction: "none", és győződj meg róla, hogy nincs felette overlay.
• A canvas 0×0 méretben jelenik meg. Adj a Framer frame-nek explicit szélességet és magasságot — a komponens a szülő méretét tölti ki.
• A WASM elavul egy Framer újradeploy után. Használj @rive-app/webgl2-single-t, vagy frissíts hard-reload-dal Framer publish után.

Ha elakadsz, ezt küldd a Lupiannak

• A Framer projekt linkjét (megtekintési joggal).
• A .riv URL-t, amit a property controlba írtál.
• Egy képet a property controlokról és az élő előnézetről.
• A teljes lista: Kérj segítséget a Lupiantól.

Kapcsolódó

• Rive Framer Embed komponens — a teljes prebuilt komponens, minden property controllal.
• State machine inputok & események
• Vanilla Web recept — ugyanaz a .riv, ugyanazokkal a nevekkel.
• Részletes API referencia: rive.app/docs.