Grove HUD

{
  "$schema": "https://visualspec.dev/schema/1.0/schema.json",
  "visualSpec": "1.0",
  "metadata": {
    "title": "Grove HUD",
    "language": "en",
    "status": "approved"
  },
  "profiles": [
    "game"
  ],
  "world": {
    "id": "world.grove",
    "name": "Grove",
    "environment": {
      "kind": "environment.forest",
      "timeOfDay": "afternoon"
    }
  },
  "entities": [
    {
      "id": "entity.guide",
      "kind": "living.person",
      "name": "Guide",
      "lifecycle": "persistent"
    }
  ],
  "materials": [
    {
      "id": "material.guide",
      "model": "unlit",
      "baseColor": "#c4d68a"
    }
  ],
  "components": [
    {
      "id": "component.status",
      "kind": "feedback.toast",
      "name": "Guide status",
      "appearance": {
        "fill": "#243024",
        "color": "#f7f8f3",
        "radius": 999
      },
      "accessibility": {
        "role": "status",
        "name": {
          "source": "literal",
          "value": "Guide"
        }
      }
    }
  ],
  "effects": [
    {
      "id": "effect.alert",
      "type": "flash",
      "targetRefs": [
        "node.guide"
      ],
      "particles": {
        "color": "#d9ed94",
        "count": 12
      }
    }
  ],
  "motion": [
    {
      "id": "motion.alert",
      "targets": [
        "node.status"
      ],
      "essential": false,
      "duration": {
        "value": 180,
        "unit": "ms"
      },
      "tracks": [
        {
          "property": "appearance.opacity",
          "from": 1,
          "to": 0.72
        }
      ],
      "reducedMotion": {
        "strategy": "instant"
      }
    }
  ],
  "timelines": [
    {
      "id": "timeline.intro",
      "duration": 3,
      "tracks": [
        {
          "id": "track.intro",
          "type": "visual",
          "clips": [
            {
              "id": "clip.intro",
              "start": 0,
              "duration": 3,
              "sceneRef": "scene.grove"
            }
          ]
        }
      ]
    }
  ],
  "scenes": [
    {
      "id": "scene.grove",
      "kind": "3d",
      "nodes": [
        {
          "id": "node.guide",
          "kind": "character",
          "entityRef": "entity.guide",
          "materialRef": "material.guide"
        }
      ]
    },
    {
      "id": "scene.hud",
      "kind": "2d",
      "viewport": {
        "width": 390,
        "height": 96
      },
      "background": "#1c241c",
      "layout": {
        "type": "row",
        "padding": 16,
        "align": "center"
      },
      "nodes": [
        {
          "id": "node.status",
          "kind": "component",
          "componentRef": "component.status",
          "text": "Guide"
        }
      ]
    }
  ],
  "states": [
    {
      "id": "state.alert",
      "name": "alert",
      "targetRef": "node.status",
      "appearance": {
        "fill": "#d9ed94"
      }
    }
  ],
  "threeD": {
    "sceneRefs": [
      "scene.grove"
    ],
    "meshes": [
      {
        "id": "mesh.guide",
        "geometry": {
          "type": "box"
        },
        "materialRefs": [
          "material.guide"
        ]
      }
    ]
  },
  "game": {
    "worldRef": "world.grove",
    "levels": [
      {
        "id": "level.grove",
        "name": "Grove",
        "sceneRefs": [
          "scene.grove"
        ]
      }
    ],
    "characters": [
      {
        "id": "character.guide",
        "entityRef": "entity.guide",
        "animationController": {
          "initialState": "anim.idle",
          "states": [
            {
              "id": "anim.idle",
              "name": "idle",
              "loop": true
            },
            {
              "id": "anim.alert",
              "name": "alert",
              "motionRef": "motion.alert"
            }
          ],
          "transitions": [
            {
              "from": "anim.idle",
              "to": "anim.alert",
              "duration": {
                "value": 180,
                "unit": "ms"
              },
              "blend": "crossfade"
            }
          ]
        },
        "visualStateMappings": {
          "alert": {
            "stateRef": "state.alert",
            "motionRef": "motion.alert",
            "effectRefs": [
              "effect.alert"
            ],
            "appearance": {
              "fill": "#d9ed94"
            }
          }
        }
      }
    ],
    "hud": {
      "sceneRef": "scene.hud",
      "componentRefs": [
        "component.status"
      ],
      "safeArea": true
    },
    "visualStates": [
      {
        "id": "visual.alert",
        "externalName": "alert",
        "stateRefs": [
          "state.alert"
        ],
        "effectRefs": [
          "effect.alert"
        ]
      }
    ],
    "cutscenes": [
      {
        "id": "cutscene.intro",
        "timelineRef": "timeline.intro",
        "skippable": true,
        "restoreCamera": true
      }
    ],
    "spatialUI": [
      {
        "mode": "entity-attached",
        "anchorRef": "entity.guide",
        "billboard": "camera",
        "scaleMode": "screen",
        "interaction": "none"
      }
    ]
  },
  "rendering": {
    "targets": [
      {
        "id": "target.play",
        "platform": "web",
        "capabilities": [
          {
            "name": "scene.2d",
            "level": "required"
          },
          {
            "name": "mesh.pbr",
            "level": "required",
            "fallback": {
              "strategy": "omit",
              "description": "The grove mesh is drawn as a solid, not a shaded mesh."
            }
          }
        ]
      }
    ],
    "fallbackPolicy": "report-and-approximate"
  }
}