The dust and scratches effect on a website

Dust means fine vertical scratches and a few light specks laid over the whole page, as on a print taken out of a box or an old film print. Grain breaks up flat areas; dust tells another story: an object that has lived, been handled, projected, stored. It gives age to a new page.

Without

Dust

On the demo, look for the very fine lines running from one edge of the image to the other, and the few specks that go with them. At the default intensity, you discover them more than you see them.

Where the effect comes from

A motion picture film wears with each pass. The US National Archives point this out: a film is most often scratched when it is handled or projected, and a projector’s dirty gate can mark it for life in a single screening. Since the film always runs in the same direction, the scratch follows its length: on screen, it becomes a vertical line crossing the image from one shot to the next.

Not all scratches are the same color. Depending on whether it touches the plastic base or the emulsion, and whether it is the original or a print, a scratch comes out black or white. And once the emulsion is torn off, the lost image never comes back: only digital restoration can hide the damage, by imitating it (NARA, 2017).

In photography, the flaw is as old as roll film. In 1933, the British magazine Amateur Photographer counted it among the most common in roll-film negatives: a series of parallel scratches, which it compared to telephone wires, most often caused by a grain of sand left in the camera, especially by the sea.

The studio’s library kept white marks: four very fine lines and five specks, enough to evoke the worn print without reproducing its damage.

When to use it

Two of the studio’s twenty-four ready-made layouts use it:

• the Portfolio layout, for photographers, illustrators and directors. The work fills the screen, and the dust recalls the print and the screening room;
• the Label layout, for labels, artists and venues, where it goes with halation: the worn sleeve, the concert filmed on film stock.

It also suits trades that live on the old or the handmade: a record shop, a secondhand bookshop, an antiques dealer, a film club, a retro-style tattoo artist, a picture framer. It likes dark palettes: white lines at low opacity show on a black background, and almost disappear on a white one.

It is better left out:

• when the page must inspire clinical trust: a health practice, a notary, management software. Scratches there pass for carelessness;
• with grain. Both tell of film, each in its own way, and together they overload the image: the library notes it itself;
• on an otherwise very smooth page, where a single fine line may look like a display glitch rather than a choice.

The right dose

In the library, dust is set at 16% opacity, in normal blend mode: the lines are white, they lighten a little what they cross, and nothing else. It is deliberately low. At this dose, you notice them at second glance; stronger, the page takes on an archival stance that must then be embraced all the way.

The pattern is a small 220 by 340 pixel tile, repeated across the whole page. On a large screen, the same lines therefore come back at regular intervals, which real scratches never do. At 16%, you have to look for this regularity to see it; at a high dose, it shows.

The rule of two layers at most applies here as elsewhere: at the third, the image gets dirty, and nobody knows which one to remove anymore. The Label layout is already at that ceiling, with halation. And choose a second layer other than grain, for the reason given above.

What it costs

Very little. The pattern is an SVG image written directly into the stylesheet, as a data: URL: the file is in the address itself, and there is nothing to download (MDN). The layer sits in a fixed position, catches neither clicks nor scrolling, and never changes.

On real film, scratches jump and specks pass from one frame to the next. The library doesn’t imitate this, and that is intended: a browser only cheaply animates a layer’s position and opacity (web.dev). A full-screen texture changing every frame would force it to repaint the whole screen, sixty times a second. Movement comes from the video beneath; the dust stays where it is, and only rises as you leave the first screen, to leave the welcome video bare.

Accessibility

• Contrast. The lines cross everything, text included. At 16%, they barely change a letter’s color, but check the contrast at the least favorable spot: at least 4.5 to 1 for body text, and 3 to 1 for a large heading (W3C, WCAG 2.2).
• Reduced motion. When the visitor asks their device for less animation (prefers-reduced-motion), the library removes grain and frost. Dust stays: it doesn’t move.
• No flashing. An old film’s scratches flicker; here, nothing wavers. A page must not flash more than three times per second, or it may trigger seizures in photosensitive people (W3C, criterion 2.3.1), and this layer never flashes.

How it is made

The tile is a small SVG drawing: four vertical lines six tenths of a pixel thick, in slightly transparent white, and five white circles less than a pixel in radius, or barely more. Each M18 0v340 command starts at the top of the tile, 18 pixels from the edge, and draws a line to the bottom:

<svg width="220" height="340">
  <g fill="none" stroke="white" stroke-width=".6" opacity=".75">
    <path d="M18 0v340 M97 0v340 M164 0v340 M203 0v340"/>
  </g>
  <g fill="white" opacity=".9">
    <circle cx="40" cy="70" r=".9"/>
    <circle cx="130" cy="150" r=".7"/>
    …
  </g>
</svg>

This drawing is written into the stylesheet as a repeated background image of a layer laid over the page. The opacity multiplies the layer’s setting by the “veil” that holds it back on the first screen:

.m.m--poussiere {
  opacity: calc(var(--poussiere, .16) * var(--m-voile, 1));
  background-image: url("data:image/svg+xml;utf8,<svg …>…</svg>");
}

In the studio

Dust is one of the library’s ten textures. You choose it at the “The texture” step, after the background, alone or with a second texture.