Installs into .claude/skills of the current project.
Are you the author of Health Bars?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/verekia-health-bars)
---
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).
