--- 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(null) useFrame(() => { healthRef.current.style.transform = `scaleX(${healthPercent})` }, { fps: 1 })

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