nailson80/AnchorDom: A high-performance, resolution-independent UI framework for React-based game development. Designed to bridge the gap between React Three Fiber and the DOM using a 9-point anchor system and normalized virtual coordinates.

A high-performance, resolution-independent UI framework for React-based game development. Designed to bridge the gap between React Three Fiber and the DOM using a 9-point anchor system and normaliz...

Summary

AnchorDOM is a TypeScript React UI framework that brings game-engine-style layout to the browser. It uses a 9-point anchor system and a fixed virtual resolution (such as 1920x1080) so HUDs, menus, and overlays scale predictably across screens and aspect ratios. It is designed to sit alongside React Three Fiber (R3F) for game UIs and hybrid apps.

What it is useful for

AnchorDOM targets a specific pain point: building responsive interfaces for browser games without hand-tuning flexbox, media queries, or viewport math. The README describes it as ideal for R3F projects, browser-based games, and hybrid mobile apps where CSS-driven layout tends to break down.

The framework is built around a few primitives:

• Virtual Canvas Scaling via a <Panel> component, which the README says uses CSS transforms to scale UI drawn at a fixed design resolution. The copy explicitly calls out that it avoids "blurry canvas rendering."
• 9-Point Anchoring, the same TOP_LEFT, MIDDLE_CENTER, BOTTOM_RIGHT mental model from engines like Unity, applied to ordinary React components.
• Relative Targeting, which anchors one component to another using React refs rather than parent-child relationships.
• Constraint Spacers that fill vertical space between elements, comparable to a "snap-to-grid" layout helper.
• Native 9-Slice support for game sprites that need to scale without corner distortion.
• Notch-proofing through useSafeArea so mobile cutouts are respected automatically.

The trade-off worth flagging: the README positions AnchorDOM against raw CSS for game UIs, but it does not claim to replace general-purpose responsive web design. Engineers building standard marketing pages or data dashboards are not the target audience.

How engineers can use it

The documented setup is a single npm install anchordom followed by wrapping the app in a <Panel> that defines the design resolution, theme, and safe-area behavior. The quick start in the README looks like this:

import { Panel, Button, Label } from 'anchordom/kit';
import { defaultTheme } from 'anchordom/theme';

function GameHUD() {
  return (
    <Panel resolution={{ width: 1920, height: 1080 }} theme={defaultTheme} useSafeArea>
      <Label text="Score: 9999" anchor="TOP_LEFT" x={50} y={50} />
      <Button label="ATTACK" anchor="BOTTOM_RIGHT" x={-50} y={-50} onClick={() => console.log('Boom!')} />
    </Panel>
  );
}

Children use anchor, x, and y in virtual coordinates, so a button pinned to BOTTOM_RIGHT with x={-50} y={-50} stays glued to the corner regardless of window size. The README links to a Components & API Reference, a Theming and 9-Slice Assets guide, and a Layout Cookbook under docs/ for advanced recipes; those are the right place to start before committing it to a production HUD.