Embed in React
Render a workflow as a live shader in any React or Next.js app.
Install the package. three is a peer dependency, so it is installed once
and never double-bundled:
npm install @fluorite/react threeThen render a workflow by id (copy the id — or the whole snippet — from the editor's Embed dialog):
import { Workflow } from "@fluorite/react";
export const Hero = () => (
<Workflow id="9f3c…" className="size-full rounded-xl" />
);The heavy WebGPU backend (three/webgpu) is dynamically imported, so the
component is SSR-safe and code-split out of your initial chunk. It renders on
WebGPU where available and falls back to WebGL2.
Common props
| Prop | Type | Default | Notes |
|---|---|---|---|
id | string | — | Workflow id (required) |
play | "visible" | "always" | "hover" | false | "visible" | When the animation loop runs |
revalidate | number | off | Poll interval in ms; picks up saves from the editor |
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 and render on the WebGL2 backend |
See Components for the full prop list (loading,
fallback, error handling, styling hooks) and
Embeds for the live-draft update model.
Because embeds render the live draft, revalidate={5000} gives you a shader
that updates within five seconds of every save — the unchanged case is a
bodyless 304, so polling is cheap.
The packages publish under a final name once the public brand is decided.