Components

`<Shader>`

Shows a published shader. Pass version or draft (not both) to choose what's shown, or neither for the latest version. See Embeds.

Prop	Type	Default	Notes
`id`	`string`	required	Shader id
`version`	`string`	latest	Pin a published version
`draft`	`string`	none	Preview token, to render the draft instead
`inputs`	`Record<string, number \| boolean \| number[] \| string>`	none	Values for exposed inputs, by name
`output`	`string`	main output	Render a named output instead
`className` / `style`	n/a	none	Applied to the wrapper element
`play`	`"visible" \| "always" \| "hover" \| false`	`"visible"`	When the animation runs
`revalidate`	`number`	off	Check for new versions every N ms
`revalidateOnFocus`	`boolean`	`false`	Check again 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`	none	Shown while loading
`fallback`	`ReactNode`	none	Shown on error, or on an unsupported device
`client`	`ShaderClient`	shared default	Point this one embed somewhere else
`onReady`	`(info) => void`	none	Gives you `{ animated, backend }`
`onError`	`(error: ShaderError) => void`	none	Switch on `error.code`
`onStateChange`	`(state: ShaderState) => void`	none	Follow the loading state
`throwOnError`	`boolean`	`false`	Rethrow to an error boundary

Style the wrapper with CSS using its data attributes:

Embeds need no configuration. Use a provider only to point a group of embeds at a different host:

import { ShaderProvider } from "@fluorite-studio/react";

<ShaderProvider config={{ baseUrl: "https://your-host" }}>
  {children}
</ShaderProvider>;

Prop	Type	Notes
`config`	`ClientConfig`	`{ baseUrl?, fetch?, cache?, ttlMs? }`
`client`	`ShaderClient`	A pre-built client, which takes precedence

baseUrl also reads NEXT_PUBLIC_FLUORITE_BASE_URL when it is set.