Installs into .claude/skills of the current project.
Are you the author of Ui Useframe?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/verekia-ui-useframe)
---
name: ui-useframe
description: Sync UI elements outside the Canvas with the render loop using R3F v10's external 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).
