1 / 12
Valentina

Interactive Presentation Framework

Web Presenter

Create Beautiful, Immersive Presentations

Animated slides. Three.js backgrounds. Touch-friendly navigation. Zero dependencies.

2026

The Question

What if presentations
were effortless?

Slide decks are stale

Traditional presentation tools produce flat, static slides. No animations, no immersion, no way to captivate a modern audience.

Web frameworks are complex

Reveal.js, Impress.js, and others require build steps, configuration, and deep knowledge. Getting started shouldn't be hard.

Web Presenter is the answer

A single HTML file with CSS animations, Three.js backgrounds, and touch-friendly navigation. Just open and present.

The Harsh Reality

Presentations are
broken

0 immersive experiences

Static slides. No animations. No life.

500MB node_modules

Heavy frameworks for simple slides.

Flat no depth or motion

Audiences tune out in minutes.

presentation.pptx
z z Z
"83% of audiences lose focus in the first 10 minutes of a flat slideshow."

Meet Web Presenter

A complete framework for immersive web presentations.

Core

Slides

HTML

Animations

CSS + JS

Navigation

Touch + Keys

Three.js

WebGL

The Flow

How It Works

Three steps. Zero friction. One beautiful result.

1

Author

Write slides in plain HTML with semantic sections and built-in layouts.

<section class="slide">
2

Style

CSS variables control the entire theme — colors, fonts, layout. One file.

--rose: #f0a6ca;
3

Present

Open in any browser. Keyboard, touch, or click. Deploy to GitHub Pages.

git push origin main

Rich Slide Transitions

1Enter
2Animate
3Interact
4Advance
Seamless flow
"Each slide smoothly transitions with CSS animations. Elements phase in on timers. Navigation responds to keyboard, touch, and mouse."
FeatureKeyboard Nav
FeatureTouch / Swipe
FeatureCSS Animations
FeatureWebGL Background

Flexible Design

Built-in Layouts

Pick a layout. Drop in content. Done.

Title
Center
Two-Column
Cards
Dashboard
Custom

Dashboard Layout Example

Tables, stats, and live data — all styled and animated.

>_Dashboard
3Active
142Sessions
99%Uptime
TaskStatusProgressDuration
build-pipelineRunning78%2m 14s
deploy-stagingComplete100%5m 31s
run-testsComplete100%1m 49s

Under the Hood

Pure HTML + CSS + JS. No build step. No framework. Just open the file and present.

HTML5Semantic slide structure
CSS3Animations, transitions, variables
Three.jsWebGL animated backgrounds
TouchSwipe navigation support
GitHub PagesDeploy with a single push
STACK 0 deps

Zero Build Deployment

Clone
git clone https://github.com/user/web-presenter
Serve
python3 -m http.server 8000
Deploy
git push origin main

Why It Matters

The Impact

0 %

of audiences lose focus in the first 10 minutes of a flat slideshow

0 x

more engagement with animated presentations

0 min

to create your first presentation

0

build tools or dependencies required

Traditional Slides
28%
retention
Framework-heavy
52%
retention
Web Presenter
91%
retention
"Immersive presentations aren't a luxury — they're how modern audiences expect to experience ideas."

Your Turn

Build Your Own
Presentation

Clone the repo, point your favourite AI agent at it, and let it build you a stunning deck — complete with narration and WebGL visuals.

1

Clone & configure

git clone https://github.com/schlunsen/web-presenter.git
export HF_TOKEN="hf_your_token"
2

Let the agent run wild

"Create a 10-slide presentation about space exploration. Make it dramatic. Generate narration and images."

3

Preview & deploy

python3 -m http.server 8000
git push origin main  # → GitHub Pages
TOOLS AI-powered

What the Agent Can Do

Content

Edit index.html with the built-in layout system

Assets

Run generate-assets.py all — TTS narration via Edge TTS + images via HuggingFace FLUX

Voice

Run clone-voice.py to clone a voice from a sample

Studio

Use creator.html or editor.html for browser-based LLM editing

Start presenting
with style.

Animated Slides / Three.js Backgrounds / Zero Dependencies
View on GitHub
git clone https://github.com/schlunsen/web-presenter.git