Build your first spatial presentation.

This beginner-friendly workflow gives you a reliable base, explains the important data attributes, and helps you avoid the most common presentation mistakes.

Step 1

Create a minimal project.

You only need an HTML file, a stylesheet, and the impress.js library. A simple folder can look like this:

my-presentation/
├── index.html
├── css/
│   └── presentation.css
└── assets/
    └── images/

You can load the stable library through a CDN for quick experiments. For production, pin the version or host the file yourself so the deck does not unexpectedly change.

Step 2

Add the presentation container.

Every scene is an element with the step class inside the #impress canvas.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/presentation.css">
</head>
<body class="impress-not-supported">
  <div class="fallback-message">
    Your browser cannot display the full presentation.
  </div>

  <main id="impress">
    <section class="step" data-x="0" data-y="0">
      <h1>A better way to present</h1>
    </section>

    <section class="step" data-x="1200" data-y="0" data-rotate="8">
      <h2>Move through ideas</h2>
    </section>
  </main>

  <script src="https://cdn.jsdelivr.net/gh/impress/impress.js@2.0.0/js/impress.js"></script>
  <script>impress().init();</script>
</body>
</html>

Step 3

Map your visual journey.

Think of every step as an object on a large coordinate system. Start with generous spacing and restrained motion.

data-x and data-y set horizontal and vertical position.
data-z moves a step forward or backward in 3D space.
data-rotate, data-rotate-x, and data-rotate-y control rotation.
data-scale changes the apparent size of a step.

<section class="step" data-x="0" data-y="0" data-scale="1">...</section>
<section class="step" data-x="1400" data-y="0" data-rotate="12">...</section>
<section class="step" data-x="1400" data-y="1100" data-rotate="90">...</section>
<section class="step" data-x="700" data-y="550" data-scale="4">Overview</section>

Step 4

Design for focus and readability.

Use a consistent step size and let the canvas motion carry the spatial effect. Avoid making every individual card visually complicated.

body {
  background: #080b14;
  color: #f8fafc;
  font-family: system-ui, sans-serif;
}

.step {
  width: 900px;
  min-height: 560px;
  padding: 70px;
  border-radius: 32px;
  background: #12182b;
  opacity: .2;
  transition: opacity .5s ease;
}

.step.active { opacity: 1; }
.fallback-message { display: none; }
.impress-not-supported .fallback-message { display: block; }

Step 5

Initialize and test.

Call impress().init() after the library and presentation markup are available. Test arrow-key navigation, overview behavior, text contrast, animation comfort, and fallback content.

Keyboard test

Try space, arrow keys, escape, and any custom shortcuts before presenting.

Real-device test

Run the final deck from the laptop, browser, and display resolution you will actually use.

Step 6

Publish it like a web page.

Upload the project to any standard web host. Keep asset paths relative, enable HTTPS, and cache static files. You can also host the deck on GitHub Pages or another static deployment service.

Download starter deck Explore full documentation