React package
Components
The Workflow component and the WorkflowProvider.
<Workflow>
Renders a workflow as a live shader on its own canvas.
| Prop | Type | Default | Notes |
|---|---|---|---|
id | string | — | Workflow id (required) |
className / style | — | — | Applied to the wrapper element |
play | "visible" | "always" | "hover" | false | "visible" | When the animation loop runs |
revalidate | number | off | Poll interval in ms |
revalidateOnFocus | boolean | false | Refetch when the window regains focus |
dpr | number | [min, max] | [1, 2] | Device-pixel-ratio clamp |
maxFps | number | uncapped | Throttle the frame rate |
forceWebGL | boolean | false | Skip WebGPU, render on WebGL2 |
loading | ReactNode | — | Shown while fetching/compiling |
fallback | ReactNode | — | Shown on error / unsupported device |
client | WorkflowClient | shared default | Override the API endpoint/auth per element |
onReady | (info) => void | — | { animated, backend } |
onError | (error: WorkflowError) => void | — | Switch on error.code |
onStateChange | (state: WorkflowState) => void | — | Observe the state machine |
throwOnError | boolean | false | Rethrow to an error boundary |
Styling hooks
The wrapper element exposes data attributes for pure-CSS styling:
data-state—idle,fetching,compiling,ready,paused,errordata-backend—webgpuorwebgldata-animated— whether the graph is time-varying
<WorkflowProvider>
Zero config works out of the box via a shared default client. To point all embeds in a subtree at a custom origin or key, wrap with a provider:
import { WorkflowProvider } from "@fluorite/react";
<WorkflowProvider config={{ baseUrl: "https://your-host", apiKey: "pk_…" }}>
{children}
</WorkflowProvider>;| Prop | Type | Notes |
|---|---|---|
config | ClientConfig | { baseUrl?, apiKey?, fetch?, cache?, ttlMs? } |
client | WorkflowClient | A pre-built client; takes precedence over config |
baseUrl also reads NEXT_PUBLIC_FLUORITE_BASE_URL when present. apiKey
is reserved (ignored by v1 servers) and is a publishable, read-only key.