Data and Compression / Demo
Image compression.
A long-form article surface with a Making Software inspired scroll ruler, section map, and clickable progress ticks.
JPEG
Compression is easiest to understand when the interface shows structure. A long article has its own geography: introduction, format sections, examples, glossary, and the quiet spaces between them.
The rail treats that geography as a miniature map. It compresses the document into a fixed vertical meter and lets the reader see the current reading position without competing with the prose.
Each tick is intentionally small. The surface is calm at rest, but the hit area is larger than the visible line so the control remains usable without making the page feel like a dashboard.
The moving number is literal progress. It is calculated from the current scroll offset divided by the maximum scroll distance, then rendered as a compact decimal label.
Section labels are placed by measuring each heading in document space. When the reader hovers the rail, those labels fade in where the sections exist inside the document.
GIF
Section labels are placed by measuring each heading in document space. When the reader hovers the rail, those labels fade in where the sections exist inside the document.
The moving number is literal progress. It is calculated from the current scroll offset divided by the maximum scroll distance, then rendered as a compact decimal label.
Each tick is intentionally small. The surface is calm at rest, but the hit area is larger than the visible line so the control remains usable without making the page feel like a dashboard.
The rail treats that geography as a miniature map. It compresses the document into a fixed vertical meter and lets the reader see the current reading position without competing with the prose.
Compression is easiest to understand when the interface shows structure. A long article has its own geography: introduction, format sections, examples, glossary, and the quiet spaces between them.
PNG
Compression is easiest to understand when the interface shows structure. A long article has its own geography: introduction, format sections, examples, glossary, and the quiet spaces between them.
The rail treats that geography as a miniature map. It compresses the document into a fixed vertical meter and lets the reader see the current reading position without competing with the prose.
Each tick is intentionally small. The surface is calm at rest, but the hit area is larger than the visible line so the control remains usable without making the page feel like a dashboard.
The moving number is literal progress. It is calculated from the current scroll offset divided by the maximum scroll distance, then rendered as a compact decimal label.
Section labels are placed by measuring each heading in document space. When the reader hovers the rail, those labels fade in where the sections exist inside the document.
Lossless
Small repeated detail makes the rail movement easier to judge while the article scrolls.
Palette
Small repeated detail makes the rail movement easier to judge while the article scrolls.
Filters
Small repeated detail makes the rail movement easier to judge while the article scrolls.
WebP
Compression is easiest to understand when the interface shows structure. A long article has its own geography: introduction, format sections, examples, glossary, and the quiet spaces between them.
The rail treats that geography as a miniature map. It compresses the document into a fixed vertical meter and lets the reader see the current reading position without competing with the prose.
Each tick is intentionally small. The surface is calm at rest, but the hit area is larger than the visible line so the control remains usable without making the page feel like a dashboard.
The moving number is literal progress. It is calculated from the current scroll offset divided by the maximum scroll distance, then rendered as a compact decimal label.
Section labels are placed by measuring each heading in document space. When the reader hovers the rail, those labels fade in where the sections exist inside the document.
Compression is easiest to understand when the interface shows structure. A long article has its own geography: introduction, format sections, examples, glossary, and the quiet spaces between them.
The rail treats that geography as a miniature map. It compresses the document into a fixed vertical meter and lets the reader see the current reading position without competing with the prose.
Glossary
- Progress
- Current scroll offset divided by total scrollable distance.
- Tick
- A visible one-pixel line with a larger invisible button.
- Section
- A heading measured against document height.