Introduction
proof is a set of light JavaScript libraries that add print, sound and text effects to the HTML you already have. Each library is one file with no dependencies.
What proof is
Most visual effects on the web render into a canvas or WebGL layer, which hides the page from search engines, screen readers and text selection. proof applies its effects to live HTML instead, mostly through SVG filters and the Web Audio API.
Libraries are not published to npm. You download the file into your project and own it from then on. See Install.
Libraries
| library | what it does | size, gzipped |
|---|---|---|
| ink | Hand-drawn edges for any element. | 1.0 KB |
| riso | Two-color print look for any element. | 1.0 KB |
| dial | Touch-tone audio with a live spectrum. | 3.2 KB |
| readback | See a page the way machines read it. | 1.4 KB |
| reed | Fluted glass over live HTML. | 2.4 KB |
| ascii | Live ASCII text, tables and rules. | 2.5 KB |
Principles
Every library follows the same four rules.
- No dependencies. Each library is one file. dial adds an optional second file for its spectrum display. Sizes on this site are measured from the shipped files at build time.
- The page stays real. Effects sit on top of live HTML. Text stays selectable and readable by crawlers and screen readers.
- Motion respects the reader. Anything that moves on its own stops when the reader has reduced motion turned on.
- Limits are documented. If a browser cannot run part of a library, the docs say so and the library turns that part off.
Browser support
Every library runs in current versions of Chrome, Firefox and Safari. One exception: reed's moving glass is off in Safari, because Safari stops painting it. Fixed reed glass works in all three.