# Exploring Natuerlich: A Revolutionary Interaction Library for the Spatial Web

> Trying out Natuerlich, a webAR interaction kit from coconut-xr

URL: [Original article](https://mattcool.tech/posts/exploring-natuerlich-a-revolutionary-interaction-library-for-the-spatial-web)

Published: 2023-08-21T15:22:00.000Z

Tags: webAR, spatial-web

Natuerlich is German for Naturally!

Building interactions for the immersive web creates many challenges but thankfully Natuerlich, the latest library from Coconut XR, lets you get going a lot easier!
If you're comfortable with React, you will be able to dive right into using this library and create amazing websites that can take advantage of hand-pose interactions, HUDs, image tracking and more.

Caption:
Fish position is controlled with hand gestures. I plugged my web Aquarium
project into Natuerlich! Read about the [web Aquarium project
here](https://mattcool.tech/posts/building-a-web-aquarium-part-one)

All interactions built with Natuerlich can work with hands, controllers, mouse and touch controls.

Caption:
This is a webpage! Displaying the current and previously detected pose using
[Koestlich](https://github.com/coconut-xr/koestlich), another helpful
library for text by Coconut XR. Image credit: coconut-xr

Caption:
Using detected pose to change the fish position. Tested on a Quest Pro
courtesy of [Bela Bohlender](https://github.com/cc-bbohlender)

## Core Features of the Natuerlich Library

1. **[Anchors](https://coconut-xr.github.io/natuerlich/#/./anchors)**
- Spatial anchors using WebXR anchors.
2. **[Tracked Planes](https://coconut-xr.github.io/natuerlich/#/./Planes)**
- Tracked room planes using WebXR planes.
3. **[Tracked Images](https://coconut-xr.github.io/natuerlich/#/./images)**
- Image marker tracking using WebXR Image Tracking.
4. **[Teleport](https://coconut-xr.github.io/natuerlich/#/./teleport)**
- Building a teleport interaction.
5. **[Poses](https://coconut-xr.github.io/natuerlich/#/./poses)**
- Detecting and generating hand poses.
6. **[Layers](https://coconut-xr.github.io/natuerlich/#/./layers)**
- High-quality content using WebXR layers.
7. **[Head Up Display](https://coconut-xr.github.io/natuerlich/#/./head-up-display)**
- Placing content in front of the user's camera.
8. **[Custom Input Sources](https://coconut-xr.github.io/natuerlich/#/./custom-input-sources)**
- Building custom interactive hands and controllers.
9. **[Guards](https://coconut-xr.github.io/natuerlich/#/./guards)**
- Conditional rendering using guards.
10. **[Use XR](https://coconut-xr.github.io/natuerlich/#/./use-xr)**

- Accessing the raw XR state.

11. **[Configuration](https://coconut-xr.github.io/natuerlich/#/./configuration)**
- Configurating foveation, frameRate, referenceSpace, and frameBufferScaling.

[Check out the docs to get started](https://coconut-xr.github.io/natuerlich/#/getting-started)

Join the discord [here](https://discord.gg/9Hx8DDfMpS)

With the right hardware and browser, you can place [the aquarium below from my
post](https://mattcool.tech/posts/building-a-web-aquarium-part-one) on building
3d web Aquariums in your space by touching the sprout emoji 🌱 in the corner.