Make a frame

With the frame creator

The creator lives under the frame picker on the app’s setup screen. Its preview is the real HUD, so what you see is what goes on camera.

1. Start from a frame. Pick any frame, then choose Make a frame from this one. Your copy goes on the My frames shelf.
2. Place widgets. Put the stats, conditions, dice and nameplate in one of six spots: top, middle or bottom on the left, top or middle on the right, or bottom center. Widgets on the right mirror so their labels read outside-in.
3. Choose bar or chits for each stat.
4. Set the colors. The creator lists anything that breaks the two rules as you go, and won’t save until it’s fixed.
5. Check the tile. The preview is drawn at Discord’s 640 × 360 tile size.
6. Save or export. Saved frames stay in your browser. Export file writes a .vellum-frame.json you can share, import on another machine, or submit to the Library.

When you copy your OBS link while wearing one of your frames, the frame travels inside the link, so OBS can wear it without a server.

Free placement by dragging, and changing sizes, are planned.

By hand

A frame is a ThemeConfig. Export one from the creator, or copy src/themes/daggerheart.theme.ts, change the colors, the tracks map ('bar' or 'chits' per stat) and the optional regions map (where each widget sits), then run bun run test. The frame rules test fails if a label drops below 40 px or 7:1 contrast, or if two widgets share a spot.