React package
Overview
Install the package, render a shader, done.
@fluorite-studio/react adds any shader to a React or Next.js app.
npm install @fluorite-studio/react threeimport { Shader } from "@fluorite-studio/react";
export const Hero = () => (
<Shader
id="9f3c7b21-4d8e-4a10-9f2b-7c6d5e4f3a21"
className="size-full rounded-xl"
/>
);It works with server-side rendering and needs no configuration.
The packages will publish under a final name once the public brand is decided.
What's in the package
| Export | Kind | Use |
|---|---|---|
Shader | component | Drop-in embed with its own canvas |
ShaderProvider | component | Point a whole subtree at a different origin |
useShader | hook | Same thing, but you bring the wrapper and <canvas> |
useShaderNode | hook | For R3F: the shader node, to use in your own material |