Display health bars above characters using CSS styling.
Scanned 5/27/2026
Install via CLI
Skills Directoryopenskills install verekia/r3f-gamedev---
name: health-bars
description: Display health bars above characters using CSS styling.
---
# Health Bars
Display health bars above characters using CSS styling.
## Technique
Use Drei's `Html` component to render styled health bars in 3D space. Update the health bar width by manipulating the DOM element's `transform: scaleX()` via a ref in `useFrame`.
## Key Concepts
- `Html` from `@react-three/drei` with `center` and `distanceFactor` props
- Use refs to directly manipulate DOM styles for performance
- `scaleX` transform for smooth width changes with CSS transitions
- Style with CSS (gradients, borders, skew transforms)
## Usage
```tsx
const healthRef = useRef<HTMLDivElement>(null)
useFrame(() => {
healthRef.current.style.transform = `scaleX(${healthPercent})`
}, { fps: 1 })
<Html center position-y={1.5} distanceFactor={5}>
<div className="bg-red-500">
<div ref={healthRef} className="bg-green-500 origin-left transition-transform" />
</div>
</Html>
```
---
This skill is part of [verekia](https://x.com/verekia)'s [**r3f-gamedev**](https://github.com/verekia/r3f-gamedev).
No comments yet. Be the first to comment!
SEO optimization with keyword analysis, readability assessment, technical validation, content quality. Use for search rankings, blog posts, content audits, or encountering keyword density, readability scores, meta tags, schema markup errors.
