React integration
ultra-text
for React Three Fiber
Your HTML. One component. Text in your React scene.
<UltraText source={source} />Keep your source HTML accessible. Change its text or layout as usual, and the scene updates automatically. The starter handles WebGPU setup, fonts and cleanup.
01 — Install & copy
Add it to your app
In an existing React app, install the latest stable framework with ultra-text’s supported Three.js version:
npm install ultra-text @react-three/fiber@latest react@latest react-dom@latest three@~0.186.1
npm install -D @types/three@0.186 @types/react@latest @types/react-dom@latestSave this file in src/components/:
These are ordinary source files you can adapt, covered by the MIT License. They are ready for you or your coding agent to copy into your project.
Trying the React Three Fiber 10 alpha? It needs its own starter.
02 — Render
Mark your text. Add the component.
import { useState } from 'react'
import { UltraText, UltraTextCanvas } from './components/UltraText.js'
export default function App() {
const [source, setSource] = useState<HTMLElement | null>(null)
return (
<>
<article ref={setSource} style={{ width: 320, background: '#fff', color: '#111', font: '24px sans-serif' }}>
<p data-sdf-block>Hello React Three Fiber.</p>
</article>
<div style={{ height: 400 }}>
<UltraTextCanvas>
<UltraText source={source} />
</UltraTextCanvas>
</div>
</>
)
}
data-sdf-block marks the text to capture. Keep the source connected and
visible with a real layout box. Bind text through React as usual; the component observes
those DOM changes.
The canvas centers the text with 100 CSS pixels per world unit. It stays decorative and hidden from assistive technology while the source HTML carries the meaning. In an SSR app, mount the canvas on the client.
03 — Make it yours
Use the normal text options
Most apps can use the defaults. Pass a stable options object when you want
settings from the library API:
// Keep this object outside App, or memoize it.
const textOptions = { quality: 'high' } as const
// Inside UltraTextCanvas:
<UltraText source={source} options={textOptions} />
Starter motion is off. Enable options.motion when you want animation. The
canvas renders continuously so source updates and animated fills appear automatically.
Already have a React Three Fiber canvas?
Use UltraText inside your existing canvas with an initialized
WebGPURenderer from three/webgpu. The canvas starter is just a
convenience; your scene can still contain models, lights and other components. Keep a
continuous render loop for observed updates.
See the
official React Three Fiber WebGPU setup. The classic WebGLRenderer cannot render ultra-text’s TSL materials.
What the copied component takes care of
It waits for fonts, captures the source once, observes DOM changes, cancels superseded work and disposes its resources on unmount. Replacing the source creates a fresh capture. Capture and rebuild stay outside the frame loop.
The components are consumer source, not extra npm exports. Import the library from
ultra-text and keep one Three.js installation within its peer range.
Working with a coding agent? Give it the integration instructions. They include permission to copy and adapt these MIT examples, plus the setup and lifecycle rules.
04 — Prerelease
React Three Fiber 10 (alpha)
React Three Fiber 10 is in alpha and draws with WebGPU by default. Its canvas takes a
WebGPU renderer through the new renderer prop and refuses one passed to
gl, so the starter above stops at mount. Use this one on the alpha only, and
keep the starter above for stable releases.
npm install ultra-text @react-three/fiber@alpha react@latest react-dom@latest three@~0.186.1
npm install -D @types/three@0.186 @types/react@latest @types/react-dom@latestSave this file in src/components/ in place of the stable one:
- UltraText.tsx (React Three Fiber 10 alpha)
It exports the same UltraTextCanvas and UltraText, so your app
code stays as it is. Only two things change: the canvas hands its renderer factory to
renderer instead of gl, and the text reads
state.renderer instead of the deprecated state.gl.
Alpha APIs can change before the stable release. See the React Three Fiber 10 migration guide.