The hosted 8th Wall platform was retired Feb 28, 2026. Existing published experiences continue to run until Feb 28, 2027. [View Migration Guide](https://8th.io/migration) [View Announcements](https://8thwall.org/blog)

## A-Frame
[A-Frame](https://aframe.io/) is a web framework designed for building virtual reality experiences. By adding 8th Wall Web to your A-Frame project, you can now easily build **augmented reality** experiences for the web.

## Components

| Component | Description |
| --- | --- |
| [xrconfig](https://8thwall.org/docs/api/engine/aframe/xrconfig) | Used to configure the camera feed |
| [xrweb](https://8thwall.org/docs/api/engine/aframe/xrweb) | Used to configure world tracking |
| [xrface](https://8thwall.org/docs/api/engine/aframe/xrface) | Used to configure face effects |
| [xrlayers](https://8thwall.org/docs/api/engine/aframe/xrlayers) | Used to configure sky effects |
| [xrlayerscene](https://8thwall.org/docs/api/engine/aframe/xrlayers) | Used to configure sky effects |

## Functions

| Function | Description |
| --- | --- |
| [xrconfigComponent](https://8thwall.org/docs/api/engine/aframe/xrconfig#xrconfigcomponent) | Creates an A-Frame component for configuring the camera which can be registered with `AFRAME.registerComponent()`. Generally won't need to be called directly. |
| [xrwebComponent](https://8thwall.org/docs/api/engine/aframe/xrweb#xrwebcomponent) | Creates an A-Frame component for World Tracking and/or Image Target tracking which can be registered with `AFRAME.registerComponent()`. Generally won't need to be called directly. |
| [xrfaceComponent](https://8thwall.org/docs/api/engine/aframe/xrface#xrfacecomponent) | Creates an A-Frame component for Face Effects tracking which can be registered with `AFRAME.registerComponent()`. Generally won't need to be called directly. |
| [xrlayersComponent](https://8thwall.org/docs/api/engine/aframe/xrlayers#xrlayerscomponent) | Creates an A-Frame component for Layers tracking which can be registered with `AFRAME.registerComponent()`. Generally won't need to be called directly. |
| [xrlayersceneComponent](https://8thwall.org/docs/api/engine/aframe/xrlayers#xrlayerscenecomponent) | Creates an A-Frame component for a Layer scene which can be registered with `AFRAME.registerComponent()`. Generally won't need to be called directly. |

## Examples

#### Example - SLAM enabled (default)
```html
<a-scene xrconfig xrweb>
```

#### Example - SLAM disabled (image tracking only)
```html
<a-scene xrconfig xrweb="disableWorldTracking: true">
```

#### Example - Front camera (image tracking only)
```html
<a-scene xrconfig="cameraDirection: front" xrweb="disableWorldTracking: true">
```

#### Example - Front camera Sky Effects
```html
<a-scene xrconfig="cameraDirection: front" xrlayers>
```

#### Example - Sky + SLAM
```html
<a-scene xrconfig xrweb xrlayers>
  <a-entity xrlayerscene="name: sky; edgeSmoothness:0.6; invertLayerMask: true;">
    <!-- Add your Sky Effects content here. -->
  </a-entity>
</a-scene>
```

#### Example - Face Effects
```html
<a-scene xrconfig xrface>
```

#### Example - Face Effects with Ears
```html
<a-scene xrconfig xrface="enableEars:true">
```