Skip to content
SloplessTry the picker

Signature look · shader

Film grain overlay

A fine, barely visible film grain over the whole page (or the hero), flickering at film speed, to take the digital edge off flat colour fields and photos.

Id
noise-grain-shader
Cost
about 2 KB of JavaScript (gzipped), counted against the design's performance budget
Stacks
Next.js, Astro, SvelteKit, Plain HTML
Motion
Respect prefers-reduced-motion with a static fallback (shown below)

What the agent must do

  • No skill or library needed: implement it directly as a small inline script and one CSS rule.
  • Generate one 256 px noise tile once at start-up (canvas ImageData with random grey values) or use an SVG feTurbulence data URL; tile it on a fixed, pointer-events: none overlay above the page.
  • Keep opacity 0.04–0.10 with mix-blend-mode overlay (soft-light on light palettes); recheck every text pair in tokens.json for AA with the grain on.
  • Animate by shifting 4–8 pre-generated tiles at 8–12 fps; never regenerate noise per frame.
  • Under prefers-reduced-motion, keep a static grain (no flicker); under prefers-contrast: more, remove the overlay.
  • Start the generator after first paint; it must not block rendering.

Required skills (the agent asks before installing, per project)

Running demo, in Brutalist

The preview renderer's stand-in for this look on the hero of a Brutalist design. It shows where the look lives and how much of the screen it takes; the real effect is built with the skills above.

Full reference renderTry it in the picker

Northfold
  • About
  • Contact

Booking projects from June 2026

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a projectRead case studies

Booking projects from June 2026

Desktop
Northfold
  • About
  • Contact

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a projectRead case studies

Booking projects from June 2026

Phone

Reduced-motion fallback

What visitors with prefers-reduced-motion: reduce must get: the same layout, no movement.

Northfold
  • About
  • Contact

Booking projects from June 2026

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a projectRead case studies

Booking projects from June 2026

Desktop, prefers-reduced-motion: reduce
Northfold
  • About
  • Contact

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a projectRead case studies

Booking projects from June 2026

Phone, reduced motion

Styles it suits

BrutalistFrosted GlassJapanese MinimalOrganic EarthRisograph PrintSeventies PsychedelicSynthwave Retro-FutureTerminal Mono