Hey everyone,
I’ve been working with React and React Three Fiber for browser-based game-style projects, and I kept running into the same problem:
Building HUDs, overlays, and UI layouts with CSS gets messy fast.
Things like:
- anchoring elements to corners of the screen
- handling different aspect ratios
- dealing with mobile safe areas and notches
- constantly tweaking flexbox / media queries for layout
It never really feels like how UI works in a game engine.
So I built a small library called AnchorDOM.
It lets you design your UI at a fixed resolution (like 1920x1080), and it automatically handles scaling and anchoring across all screen sizes.
Example:
<Panel resolution={{ width: 1920, height: 1080 }}> <Label text="Score: 9999" anchor="TOP_LEFT" x={50} y={50} /> <Button label="ATTACK" anchor="BOTTOM_RIGHT" x={-50} y={-50} /> </Panel>
What it does:
- resolution-independent scaling
- 9-point anchoring system (like game engines)
- relative positioning between components
- safe-area support for mobile devices
It’s mainly aimed at:
- React Three Fiber projects
- browser-based games
- UI-heavy WebGL or canvas-based apps
Repo / npm: https://www.npmjs.com/package/anchordom
I’m still early in development, so I’d really appreciate feedback—especially from anyone building game UI or working with R3F.
Thanks for taking a look 🙏