# Demos

<style>
.grid.cards {
    text-align: center;
}
.grid.cards figure {
    display: block;
    width: 100%;
    min-height: 128px;
    aspect-ratio: 16 / 9;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.grid.cards figure.contain {
    background-size: contain;
}
</style>

<div class="grid cards" markdown>
-   ### encantar.js WebAR Engine

    ---

    <figure style="background-image: url(../img/mage.gif)"></figure>

    Get the engine and several demos in a bundle!

    ---

    <a href="../" class="md-button md-button--primary" target="_blank" rel="external" id="launch-demo-encantar" data-goatcounter-click>Download</a>

-   ### Video Player with Buttons

    ---

    <figure style="background-image: url(../img/video-player.gif)"></figure>

    Enchant your audience with video clips in Augmented Reality!

    ---

    <a href="https://ko-fi.com/s/697a184728" class="md-button md-button--primary" target="_blank" rel="external" id="launch-demo-video-player" data-goatcounter-click>Download</a>

-   ### Magic AR Basketball

    ---

    <figure style="background-image: url(../img/demo-basketball.gif)"></figure>

    A Basketball game in Augmented Reality! Play with your phone!

    ---

    <a href="basketball/poster.html" class="md-button" target="_blank" rel="external" id="launch-demo-basketball" data-goatcounter-click>Play now!</a>

-   ### WebAR with A-Frame

    ---

    <figure style="background-image: url(../img/logo-aframe.png)" class="contain"></figure>

    A template based on A-Frame and encantar.js! Very easy to remix!

    ---

    <a href="hello-aframe/poster.html" class="md-button" target="_blank" rel="external" id="launch-demo-hello-aframe" data-goatcounter-click>Try it!</a>

-   ### WebAR with babylon.js

    ---

    <figure style="background-image: url(../img/logo-babylon.png)" class="contain"></figure>

    A template based on babylon.js and encantar.js!

    ---

    <a href="hello-babylon/poster.html" class="md-button" target="_blank" rel="external" id="launch-demo-hello-babylon" data-goatcounter-click>Try it!</a>

-   ### WebAR with three.js

    ---

    <figure style="background-image: url(../img/logo-three.png)" class="contain"></figure>

    A template based on three.js and encantar.js!

    ---

    <a href="hello-three/poster.html" class="md-button" target="_blank" rel="external" id="launch-demo-hello-three" data-goatcounter-click>Try it!</a>

-   ### WebAR with any framework

    ---

    <figure style="background-image: url(../img/demo-hello.png)"></figure>

    Create WebAR experiences with encantar.js and any 3D framework!

    ---

    <a href="hello-world/poster.html" class="md-button" target="_blank" rel="external" id="launch-demo-hello-world" data-goatcounter-click>Try it!</a>

-   ### Pure WebGL madness

    ---

    <figure style="background-image: url(../img/logo-webgl.png)" class="contain"></figure>

    WebAR with pure WebGL &ndash; for tough programmers!

    ---

    <a href="hello-webgl/poster.html" class="md-button" target="_blank" rel="external" id="launch-demo-hello-webgl" data-goatcounter-click>Try it!</a>

-   ### Pointer tracking

    ---

    <figure style="background-image: url(../img/pointer-demo.png)"></figure>

    Track touch and mouse input with encantar.js!

    ---

    <a href="pointer-demo/poster.html" class="md-button" target="_blank" rel="external" id="launch-demo-pointer-demo" data-goatcounter-click>Try it!</a>
</div>
