🅰️ Official starter slides for giving talks and presentations about A-Frame.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
materials Add mozilla VR dino without logo Jun 8, 2017
media re-add video Mar 21, 2017
scenes remove custom inspector version Sep 14, 2017
src Revert "remove unused js files" Mar 16, 2017
.gitignore wipe history to resize repo Mar 16, 2017
LICENSE fix license Mar 17, 2017
README.md update toc Mar 16, 2017
content.md Updated community stats Aug 4, 2017
index.html wipe history to resize repo Mar 16, 2017
package.json update package.json urls Mar 16, 2017
yarn.lock wipe history to resize repo Mar 16, 2017



Official starter slides for giving talks and presentations about A-Frame.



  1. Download the repository (.ZIP) (>200MB)
  2. Start the local server (npm run start)
  3. Open http://localhost:8080 in your browser

Table of Contents

  • Introduction
  • Virtual Reality
    • Hardware
    • Friction of VR Ecosystems
  • WebVR
    • Advantages
    • API
    • Browsers
    • Metaverse
    • Barrier to Entry
  • A-Frame
    • Introduction
    • Hello World
    • Demo
    • Works With Everything
  • Entity-Component-System
    • Concept
    • Composing an Entity
    • Registry
    • Inspector
  • Community
    • Examples
    • Numbers

Modifying Design

The kit uses reveal.js, an HTML presentation framework. If you wish to customize, read their documentation to see how to configure and style the slide deck.

For styling, the kit theme is based on the white theme found in the reveal.js repository. This has been copied to src/main.css which you can replace or modify.

Modifying Content

Modify the content.md file to edit content. Slides are written in Markdown and separated by six hyphens ------. You can also add vertical slides by separating with three hyphens ---. The slides are grouped, using vertical slides to drill down or build on general points. You can add speaker notes by putting content under <!-- NOTES --> on each slide.

Tailor the content to your audience. Filter out slides depending on the answers to these questions (as well as the allotted length of your talk). For example:

  • Is your audience familiar with virtual reality? - If so, you might want to skip or trim the Virtual Reality section.
  • Is your audience interested in underlying code (i.e., JavaScript, A-Frame components, three.js)? - If not, then trim the Entity-Component-System section.

Adding A-Frame Scenes

A-Frame scenes are embedded right within the slides so you can demo without having to navigate away. The kit will recognize <div data-aframe-scene="scenes/yourscene.html"></div> and load in the A-Frame scene.


In your GitHub repository settings page under GitHub Pages and Source, select master branch. Then simply push to your GitHub repo, and then your slides will be live at https://yourusername.github.io/aframe-presentation-kit or whatever you named the repository. Read more about GitHub Pages.


Serve the slides locally from your computer for better network performance.

Press the f key on your keyboard to go full screen. Press the s key on your keyboard to open up the Speakers Notes window. Press the <esc> or o key on your keyboard to see a zoomed out overview of the slides.

There are slides with embedded A-Frame scenes. Play with these scenes live from right within the slide. Click and drag to look around. You may enter full screen, or if you have a headset connected, enter VR.

Open up a scene in the A-Frame Inspector by pressing <ctrl> + <alt> + i on your keyboard. This will open up an embedded A-Frame scene in a visual tool.

Check out this public speaking guide and good luck!