# impress.js — Stunning CSS3 Presentation Framework

> A presentation framework that leverages CSS3 transforms and transitions to create visually impressive slideshows in the browser, inspired by the idea behind prezi.com.

## Install

Save as a script file and run:

# impress.js — Stunning CSS3 Presentation Framework

## Quick Use
```bash
git clone https://github.com/impress/impress.js.git
cd impress.js
# Open index.html in a browser to see the demo
# Or use a local server:
npx serve .
```

## Introduction
impress.js is a presentation framework built on the power of CSS3 transforms and transitions in modern browsers. It breaks free from the linear slide-by-slide model, letting you position content freely in 3D space and animate between views with smooth camera-like movements.

## What impress.js Does
- Positions presentation steps anywhere in 3D space using translate and rotate transforms
- Animates transitions between steps with smooth CSS3 transitions
- Supports scaling, rotation, and perspective effects per step
- Provides a simple HTML data-attribute API for defining step positions
- Works entirely client-side with no build tools or server required

## Architecture Overview
impress.js reads HTML elements marked with a `step` class inside a root container. Each step declares its position, rotation, and scale via `data-*` attributes. The engine calculates CSS transform matrices and applies them to a camera wrapper element, creating the illusion of flying through a 3D canvas. The core is a single JavaScript file with no external dependencies.

## Self-Hosting & Configuration
- Clone the repository and serve `index.html` with any static server
- Each step element uses `data-x`, `data-y`, `data-z` for positioning
- Add `data-rotate-x`, `data-rotate-y`, `data-rotate-z` for 3D rotations
- Use `data-scale` to zoom in or out on individual steps
- Customize transitions with CSS overrides on `.impress-enabled` classes

## Key Features
- Zero dependencies and no build step required
- Full 3D positioning with perspective and depth
- Keyboard, mouse, and touch navigation built in
- Plugin system for extras like autoplay, navigation UI, and speaker notes
- Small footprint suitable for embedding in any web project

## Comparison with Similar Tools
- **reveal.js** — Linear slide model with optional 2D grid; impress.js offers true 3D positioning
- **Slidev** — Markdown-driven with Vue components; impress.js is pure HTML and CSS
- **Marp** — Converts Markdown to PDF slides; impress.js focuses on live browser presentations
- **Prezi** — Commercial product with similar 3D canvas; impress.js is fully open source

## FAQ
**Q: Does impress.js work on mobile devices?**
A: Yes, modern mobile browsers support the required CSS3 transforms. Touch navigation is built in.

**Q: Can I use Markdown for content?**
A: impress.js uses raw HTML. You can pre-process Markdown to HTML and embed it in step elements.

**Q: How do I add speaker notes?**
A: The speaker-notes plugin reads content from a notes element inside each step and displays it in a separate window.

**Q: Is there a WYSIWYG editor?**
A: Community tools like Strut and Hovercraft provide visual or reStructuredText authoring on top of impress.js.

## Sources
- https://github.com/impress/impress.js
- https://impress.js.org

---
Source: https://tokrepo.com/en/workflows/asset-b8436d0e
Author: Script Depot