Embed in React

Install the package:

npm install @fluorite-studio/react three

Publish the shader first, since only published shaders can be embedded. Then add it by id. Copy the id, or the whole snippet, from the editor's Embed dialog:

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

export const Hero = () => (
  <Shader
    id="9f3c7b21-4d8e-4a10-9f2b-7c6d5e4f3a21"
    className="size-full rounded-xl"
  />
);

This shows your latest published version. To always show one version, pin it:

<Shader id="9f3c7b21-4d8e-4a10-9f2b-7c6d5e4f3a21" version="1.2.0" />

It works with server-side rendering.

Common props

Prop	Type	Default	Notes
`id`	`string`	required	Shader id
`version`	`string`	latest	Pin a published version
`inputs`	`Record<string, …>`	none	Values for exposed inputs
`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 and render on WebGL2

See Components for the full list, including loading, fallback, error handling and styling hooks.

If you haven't pinned a version, revalidate={5000} picks up each new publish within five seconds.

Previewing before you publish

To see unpublished work in a real page, pass a preview token instead of a version:

<Shader
  id="9f3c7b21-4d8e-4a10-9f2b-7c6d5e4f3a21"
  draft={process.env.NEXT_PUBLIC_FLUORITE_PREVIEW_TOKEN!}
/>

Anyone who loads the page can see the token, so use this on previews and staging only.

Common props

Previewing before you publish

On this page