React package
Overview
The embed package — install it, render a workflow, done.
@fluorite/react renders any workflow as a live, real-time shader in
a React or Next.js app. It sits on @fluorite/runtime, the
framework-agnostic client and renderer; you normally only install the React
package.
npm install @fluorite/react threeimport { Workflow } from "@fluorite/react";
export const Hero = () => (
<Workflow id="9f3c…" className="size-full rounded-xl" />
);threeis a peer dependency — installed once, never double-bundled.- The WebGPU backend (
three/webgpu) is dynamically imported, so the package is SSR-safe and code-split out of your initial chunk. Rendering falls back to WebGL2 where WebGPU is unavailable. - Zero config works out of the box; a shared default client talks to the public API. See Components for the provider that overrides it.
The packages publish under a final name once the public brand is decided.
What's in the package
| Export | Kind | Use |
|---|---|---|
Workflow | component | Drop-in embed with its own canvas |
WorkflowProvider | component | Configure the client (base URL, key) for a subtree |
useWorkflow | hook | Headless embed — bring your own wrapper and <canvas> |
useWorkflowNode | hook | R3F interop — the evaluated TSL node for your own material |