# UI Useframe

> Sync UI elements outside the Canvas with the render loop using R3F v10's external useFrame. Use when this capability is needed.

- Skill: `tomevault-io/ui-useframe` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/ui-useframe`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/ui-useframe/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/ui-useframe

---


# UI useFrame

Sync UI elements outside the Canvas with the render loop using R3F v10's external useFrame.

## Technique

Since React Three Fiber v10, `useFrame` can be used outside of the Canvas component. This allows updating DOM elements in sync with the 3D scene without using Drei's Html component.

## Key Concepts

- `useFrame` works outside `<Canvas>` in R3F v10+
- Use refs to manipulate DOM elements directly for performance
- Throttle with `{ fps: N }` option since DOM manipulation is expensive
- Useful for HUDs, debug info, and UI that doesn't need to be in 3D space

## Usage

```tsx
const Ui = () => {
  const ref = useRef<HTMLDivElement>(null)

  useFrame(() => {
    ref.current.innerText = `${position.x.toFixed(2)}, ${position.y.toFixed(2)}`
  }, { fps: 10 })

  return <div ref={ref} className="fixed top-4 right-4" />
}

// Place outside Canvas
<Canvas>
  <Scene />
</Canvas>
<Ui />
```

---

This skill is part of [verekia](https://x.com/verekia)'s [**r3f-gamedev**](https://github.com/verekia/r3f-gamedev).

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/verekia) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-11 -->