marp-demo View source on GitHub

A PLAYGROUND FOR PRESENTATIONS

Markdown.
Meet motion.

Small files. Big possibilities. Restyle one slide eight ways, compare animation techniques, move between complete slide keyframes, or take control of an interactive simulation.

EXPLORE THE EXPERIMENTS6 DECKS · HTML + PDF
ONE SLIDE / EIGHT STYLESDEMO / 06
Eight framed swatches of the same slide in different styles The house style, a risograph zine, a Swiss poster, a neo-brutalist sticker, a sketchnote, a blueprint, a broadsheet, and LaTeX Beamer, hung like small works on a gallery wall. Aa Aa Aa Aa Aa SAME HTML / EIGHT STYLESHEETS
Same words. Different worlds. Only the stylesheet changes.

VISUAL STYLE / 13 SLIDES / NEW

Style Lab.
Same words, different worlds.

One slide of HTML, dressed eight ways: a risograph zine, a Swiss poster, neo-brutalism, a sketchnote, a blueprint, a broadsheet, and LaTeX Beamer, beside the house style. Then restyle it live.

  • Bundled open fonts
  • CSS-only textures
  • Live restyle morph
Open presentation Download PDF
Jump to the live restyle
ONE DIAGRAM / NINE TECHNIQUESDEMO / 05
The same three-node specimen, ready for nine kinds of motion A, start, connects through B, shape, to C, land. Compare CSS, SVG, masks, 3D, sprite frames, local video, Lottie vectors, and slide morphs without changing the subject. ABC STARTSHAPELAND LIVE GEOMETRY / AUTHORED VECTORS / PIXELS
Same diagram. Different verbs. Compare the mechanism, not the subject.

ANIMATION TECHNIQUES / 12 SLIDES

Motion Lab.
Make the difference visible.

One small diagram, nine approaches. Compare CSS and SVG motion, masks, 3D, sprite frames, local video, Lottie vectors, and shared-element slide morphs.

  • Play / pause / replay
  • Locally packaged media
  • Complete static frames
Open presentation Download PDF
Jump to the first experiment
SLIDES AS KEYFRAMESDEMO / 04
A full token bucket becomes an empty bucket across slide keyframes Native slide transitions move the same objects between complete states. A burst spends three tokens; the next request is rejected until the clock replenishes the budget. FRAME 01 / READYFRAME 04 / EMPTY 3 tokens0 tokens MORPH D / 429 Too Many Requests 1 token buys 1 admission
Every slide is a complete state. The transition supplies the motion.

API THROTTLING / 7 KEYFRAMES

Throttle
the burst.

Move requests and tokens between authored slides. Spend a burst budget, reject an arrival, refill with time, and admit a retry. No custom animation runtime.

  • Native morph transitions
  • Arrow-key driven
  • PDF-ready states
Open presentation Download PDF
ASYNC / AWAIT IN MOTIONDEMO / 03
Execution and an async state machine side by side A method runs, saves state while an I/O task is incomplete, and resumes without dedicating a waiting thread. The state diagram tracks the same progression. EXECUTIONSTATE MACHINE RunSuspendResumeI/O proceeds independently RunningSave + suspendAwaiter + resume pointContinue + finish
Two synchronized views. One logical async method.

.NET / 4 SLIDES

Await the work.
Not the thread.

Follow execution, I/O, and two task lifetimes while a state-machine diagram highlights the same steps. Compare suspension, an already-completed await, and a failed read.

  • Side-by-side state machine
  • 3 scenarios
  • C# example
Open presentation Download PDF
Jump to the async lab
CONTEXT IN MOTIONDEMO / 02
Selected inputs build the context for an agent's next turn Instructions, a user prompt, a relevant skill, and tool definitions and evidence combine in a bounded context window before the next model turn. CONTEXT / THIS TURN Instructions + conventionsThe user's promptThe relevant skillTool definitions + evidence NEXTTURN
Not everything it knows. What this turn needs.

AI AGENTS / 6 SLIDES

From prompt
to action.

Watch instructions frame a request, skills load on demand, and tool results flow back into context. Explore two scenarios in a hands-on context lab.

  • Transitions + morphing
  • Context lab
  • Static PDF
Open presentation Download PDF
Jump to the context lab
DELIVERY SYSTEMDEMO / 0142
A delivery path from commit to production A build branches into parallel tests and security checks, then rejoins at an approval gate before release. Build Tests Security ONE ARTIFACT COMMIT APPROVE RELEASE
One artifact. A visible path to production.

PLATFORM ENGINEERING / 4 SLIDES

From commit
to confidence.

Follow a change through parallel checks, a human approval gate, and a progressive rollout. Pause the story, step through it, or see what happens when tests fail.

  • Native SVG
  • Local JavaScript
  • Playback controls
Open presentation Download PDF
Jump to the simulation
01 / FOLLOW

Motion with a purpose.

Follow execution, context, or an artifact. Animated relationships and native Marp transitions make the ideas visible.

02 / TAKE CONTROL

Present at your pace.

Advance a keyframe with the arrow keys, or run, pause, replay, and switch scenarios in the interactive demos.

03 / TAKE IT WITH YOU

A readable static story.

HTML brings the motion. PDFs keep complete diagrams and intentional snapshots, not unfinished animation frames.

HTML is the interactive version. PDFs keep readable, static diagrams. Reduced-motion preferences are respected; navigate the still frames or use Step in the simulation labs.