Bring interfaces into view.

Every interaction here comes from a real component. Toggle states, tune values, then take them into your project.

A view of your own.

Scan a space, wander along a route, or play a sound for the moment. See the components inside a complete device experience.

Open the device simulator

Spatial scanRoute navigationSound playbackNotification centerNo camera needed to get started.

Compositions ready to reuse

Expand the source to take a complete control panel, HUD or theme example into your project.

Control panel

Scene mode

Show navigation

Navigation opacity80

Current: Focus · Navigation on · 80%

View Vue source

<script setup lang="ts">
import { AgmButton, AgmPanel, AgmSelect, AgmSlider, AgmSwitch } from 'augma'
import { shallowRef } from 'vue'

const mode = shallowRef('focus')
const enabled = shallowRef(true)
const opacity = shallowRef(80)
const options = [
  { label: 'Focus', value: 'focus' },
  { label: 'Explore', value: 'explore' },
]
function reset() {
  mode.value = 'focus'
  enabled.value = true
  opacity.value = 80
}
</script>

<template>
  <AgmPanel title="Control panel" class="control-example">
    <AgmSelect v-model="mode" label="Scene mode" :options="options" />
    <AgmSwitch v-model="enabled" label="Show navigation" />
    <AgmSlider v-model="opacity" label="Navigation opacity" :min="30" />
    <output>
      Current: {{ mode === 'focus' ? 'Focus' : 'Explore' }} · Navigation {{
        enabled ? 'on' : 'off'
      }}
      · {{ opacity }}%
    </output>
    <AgmButton variant="outline" @click="reset">Restore default settings</AgmButton>
  </AgmPanel>
</template>

<style scoped>
.control-example {
  display: grid;
  gap: 20px;
  width: 100%;
  max-width: 420px;
}
output {
  color: var(--agm-muted);
  font-size: 13px;
}
</style>

HUD status

Mission status

Interface readyAwaiting permissionDevice offline

72%Loading assets

Waiting for a deviceIn progress

Sample states only. Nothing here accesses a device or asks for permission.

View Vue source

<script setup lang="ts">
import { AgmHudProgress, AgmHudStatus, AgmPanel } from 'augma'
</script>

<template>
  <AgmPanel title="Mission status" class="hud-example">
    <div>
      <AgmHudStatus>Interface ready</AgmHudStatus>
      <AgmHudStatus tone="warning">Awaiting permission</AgmHudStatus>
      <AgmHudStatus tone="danger">Device offline</AgmHudStatus>
    </div>
    <AgmHudProgress label="Loading assets" :value="72" variant="ring" />
    <AgmHudProgress label="Waiting for a device" indeterminate-text="In progress" />
    <p>Sample states only. Nothing here accesses a device or asks for permission.</p>
  </AgmPanel>
</template>

<style scoped>
.hud-example {
  display: grid;
  justify-items: center;
  gap: 24px;
  width: 100%;
}
.hud-example > div:first-of-type {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.hud-example > .agm-progress:not(.agm-progress--ring) {
  width: 100%;
}
p {
  color: var(--agm-muted);
  font-size: 13px;
}
</style>

Theme customization

Custom accent color

Sample progress25%

Customize colors through semantic variables; component structure and keyboard behavior stay the same.

View Vue source

<script setup lang="ts">
import { AgmButton, AgmHudProgress, AgmPanel } from 'augma'
import { shallowRef } from 'vue'

const value = shallowRef(25)
</script>

<template>
  <AgmPanel title="Custom accent color" class="theme-example">
    <AgmHudProgress label="Sample progress" :value="value" />
    <AgmButton @click="value = value >= 100 ? 0 : value + 25">
      Advance progress
    </AgmButton>
    <p>Customize colors through semantic variables; component structure and keyboard behavior stay the same.</p>
  </AgmPanel>
</template>

<style scoped>
.theme-example {
  --agm-accent: #7951bd;
  --agm-accent-hover: #65419e;
  --agm-on-accent: #fff;
  display: grid;
  gap: 20px;
  width: 100%;
  max-width: 420px;
}
p {
  color: var(--agm-muted);
  font-size: 13px;
}
</style>