Styling

Make it look like the rest of your design. Everything here is an attribute, and the masking readout tells you what a given palette costs before you commit to it.

Text Font Weight Size auto Letter spacing 0px Alignment Padding X 0px Padding Y 0px Text colour Background

masking … single frame … after blur … stroke … noise block …

…

The font is not only cosmetic

The noise block is meant to follow the stroke width, and the stroke follows the font. Change the font and you change what the block has to be. The stroke and noise block figures in the readout are the two numbers that matter: when the block is narrower than the stroke, a blur has a radius worth trying.

The block is derived as twice the stroke, which is where a blur stops gaining. Measured on rasterised glyphs at five sizes: a 3px stroke needs 6, an 8px stroke needs 16. Drag the size up and watch both numbers move together rather than apart. Setting noise-scale yourself overrides that, and going under twice the stroke warns in the console.

Colour is the setting that decides everything else

A secret is maskable only if both its colours can carry noise. Masking ratio is min(swing(text), swing(background)) / |text − background|, where swing is how far a colour can travel in code values before it clips. Fully saturated colours have no swing at all, so white on black cannot be masked at any amplitude. Try it above and watch the ratio fall to 0.

Mid-tones are what buy protection. That is why this site is grey rather than the near-black it would otherwise be.

What does not apply

letter-spacing, text-align and the padding attributes do nothing while scramble is on, because that mode draws each glyph into its own cell and places the cells itself. The font attributes still apply. The element warns in the console rather than ignoring you silently. See issue 14.

Any value that cannot be used falls back to the documented default and warns once. An invalid font string or a non-finite coordinate is a silent no-op in canvas, so it would otherwise render the wrong thing, or nothing at all, without an error. Try font-size="abc" in DevTools and watch it land back on the default rather than disappearing.