Grain & Noise Textures 12

Twelve 1024 × 1024 textures that tile in both directions without a visible seam — the contact sheet above shows every texture across its own tile boundary. All of them are generated in Node from a seeded PRNG and a wrap-around gradient-noise lattice, so nothing is photographed, scanned or sampled, and the pack can be regenerated byte-for-byte with node src/content/assets/grain-noise-textures-12/make.mjs.

What’s inside

• Film grain · light / mid / heavy — mid-grey (#808080) emulsion grain, lightly clumped. Blend with mix-blend-mode: overlay or soft-light for a neutral result; the grey midpoint means it adds no overall tint.
• Paper fibre · cream / kraft — tinted stock with low-frequency mottle, tens of thousands of short pulp fibres and a fine tooth. Use as a background or multiply it over flat colour.
• Fractal noise · large / medium / fine — soft clouds at three lattice scales. Ideal as displacement maps, mask-image sources, GLSL texture2D noise lookups and gradient-mesh breakup.
• Scanlines — 4 px period, soft dark line, slight phosphor flicker. Tile with background-size: 1024px (or 512px for a finer screen).
• Halftone dots — 45° screen, dot size driven by a tileable gradient. Works as a luminance mask for print-style reveals.
• Brushed metal — anisotropic horizontal streaks on a cool grey; combine with a metallic PBR material or use as a roughness map.
• Dust & speckle — motes, hairs and soft bokeh on black. Add with mix-blend-mode: screen for a projector / film-scan feel.

Usage

.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url(/assets/packs/grain-noise-textures-12/film-grain-mid.webp) repeat;
  mix-blend-mode: overlay; opacity: .5;
}

For animated grain, shift background-position by a random multiple of a few pixels each frame (or offset a <canvas> draw of the tile) — because the texture is seamless the jump is invisible. In Three.js set texture.wrapS = texture.wrapT = THREE.RepeatWrapping.