Tonight's sketch
The outline and the heading are inked. This sentence is left clean so it stays readable. Select it, then tab to the button.
Six light libraries for print, sound and text effects on the web.
Each library adds one effect to the HTML you already have. There are no dependencies and no build step. Copy a file into your project and import it. The largest is 3.2 KB gzipped.
ink
Gives borders, shapes and headings a brush-drawn edge that redraws a few times a second, like hand-drawn animation. Text inside stays real and selectable.
riso
Splits an element into two fluorescent inks with slight misregistration and paper grain, like a risograph print. Works on text, images and CSS shapes.
print
the web.
2 inks
Pink lays down where green is missing. Blue lays down where red is. Black text gets both and prints deep violet.
dial
Plays the two tones a phone sends for each key, decodes them back out of the audio, and draws them on a live spectrum. Built on the Web Audio API.
Press a key, or hold one down.
readback
Lists what a crawler or screen reader gets from any part of a page, in reading order. Flags images without alt text, links and buttons without names, and inputs without labels.
The night shift
We answer every call after 9 pm with an agent that knows the menu, the hours and the specials.
Your regulars hear a voice they know. New callers get a table.
reed
Puts fluted, wavy or ripple glass over real HTML with an SVG filter. Text stays selectable, buttons stay clickable, and there is no WebGL.
glass.
This card sits under the glass. Select the text, or press the button.
ascii
Renders a word as an animated field of characters, plus box-drawing tables and section rules that fit any width. The headers on this site are built with it.
click the field to drop a ripple
Install by copying one file
There is no package and no build step. Download a library into your project and import it like any other ES module.
The file lives in your repository, so you can read all of it, change it, and update only when you choose.
Read the install guideimport { ink } from './ink.js'
import { riso } from './riso.js'
ink(document.querySelector('.card'), { rough: 3 })
riso(document.querySelector('.poster'), { shift: 4 })