bits & bytes & a contract

An image is

A .png stores pixels. An .hmml stores the scene that draws them — SVG, images and a 3D space in motion. One small binary file.

one .hmml · decoding… · matrix3d
↑ A live 3D universe of images & SVGs — decoded from a single file by a 2.5 KB reader inlined in this page.move your cursor over it →
2.5 KB reader~830 MB/s decode25% smaller than base640 dependencies
the idea

Stop shipping the screenshot.

Image formats freeze the result of drawing. HMML keeps the source: declarative layout, vectors, raster, a 3D space, motion — and stays smaller doing it.

01

Compress intent

Don’t store the frame. Store the program that paints it — text the browser already knows how to run.

02

Vectors, raster, 3D — one file

SVG sharpness, real images as raw bytes, and a matrix3d universe, together in one binary document.

03

Declare the space

A 4×4 matrix per element; the browser does the projection. Built for generative, living media.

live · not video

Each one is a single .hmml.

Decoded in your browser right now — vector, raster, 3D, and text that rewrites itself. No network, no dependency.

the contract

bits & bytes & a contract.

A PNG-style signature, then self-describing chunks. Markup stays text; images stay raw. Unknown chunks are skipped — it grows without breaking. Full spec →

89 'H' 'M' 'M' 'L' 0D 0A 1A 0A  ·  major · minor · codec
MARK
the markup — HTML / CSS / SVG / JS, gzip-able text
RSRC
a resource — id + mime + raw bytes (no base64)
META
JSON metadata
ENDF
end marker · markup points at resources with hmml:<id>
use it

Two calls.

// pack any HTML — data: images become raw bytes, gzip by default
const bytes = await pack(`<div style="transform:matrix3d(…)">…</div>`)

// …store / send the .hmml … then, anywhere a browser runs:
const doc = await unpack(bytes)
el.innerHTML = doc.toHTML()