present-in-html skill, demo deck

Slides that run

A slide here is a web page, so it can do what a web page does. Every slide after this one is a working example.

Hisham AbuellaA personal projectOctober 2026

The idea

A slide file plays back what you made. A web page runs.

So a slide can hold a working app, a simulation, sound, code, a game or another page. Press the right arrow.

Live interface

Demo the product, not a screenshot

This phone is real HTML. Tap the switches. Airplane mode turns the radios off, and the status bar follows.

Try: 5G off, then airplane mode on.

9:41 5G

Settings

Airplane mode

Wi-FiHome

Cellular data

5GOn

StatusWi-Fi and 5G connected

Web app

Ask “what if?” and get the answer live

Free-space path loss: how much a radio signal weakens on its way. Move the sliders, or pick a band.

FSPL = 20 log(d) + 20 log(f) − 147.55

103.3dB lost

Frequency3.5 GHz Distance1.0 km

Simulation

Physics you can drag around

Two antennas send the same wave. Where the waves meet in step they add up; out of step they cancel.

Drag an antenna. Change the phase and the beam turns: that is beamforming.

Phase0° Wavelength18

Sound and voice

The slide can sing, and talk

The tone is made by the browser as you listen, and drawn on the scope. The voice is the browser's own.

Turn your sound on first.

Pitch440 Hz

Close to A4, the note orchestras tune to.

Made for the viewer

This slide knows who is watching

Every value here is read from your own device, live. Nothing leaves your browser.

Type your name: the title slide greets you too. Or add ?for=YourName to the link.

Your time

Your time zone

Your screen

Your language

You prefer

Motion

Your name

Live code

Code you edit, running on the slide

Change a number and the drawing changes as you type. Teaching code stops being a screenshot.

Try n = 30, or r = 60.

// Edit me. t is time, dot(x, y, size) draws.
const n = 14, r = 120;
for (let i = 0; i < n; i++) {
  const a = i / n * 2 * Math.PI + t;
  ctx.fillStyle = i % 2 ? brand : ink;
  dot(480 + 2*r*Math.cos(a), 170 + r*Math.sin(a), 22);
}

Running.

Game

A slide you can play

Catch the data packets before they drop off the edge. Twenty seconds. Good for waking a room up after lunch.

Tap or click the packets.

Caught 0

Dropped 0

Time 20

Best 0

Packets fly left to right. Catch as many as you can.

A page in a slide

Any web page can sit on a slide

This is another deck, the GenAI 101 lesson, running inside this slide. Dashboards, docs and tools fit the same way.

Click into it and use its arrows. Click outside it to come back.

Video

Quick edits, right in the browser

A recording of the deck editor: retype a word, swap Q3 for Q4 across the deck, add a note, save the same file.

It plays while this slide is on screen and stops when you leave. The buttons jump inside it.

Camera

Put the room on the slide

A live camera with a caption on top, for a workshop or a remote talk. It turns off when you leave the slide.

The picture stays in your browser. Nothing is recorded or sent.

Camera is off.

More ideas

And it doesn't stop there

Show

A map you can pan and zoomto walk a site or a route
A 3D model you can turna part, a building, a molecule
Charts fed by live datanumbers that are right on the day

Ask

Polls and quizzes that count answersfrom phones in the room
Captions as you speakthe browser's speech recognition
A slide that translates itselfone deck, many languages

One HTML file

Slides are web pages. Use that.

Hisham Abuellahishamabuella.comhisham-abuella.github.io/present-in-html