Реалізація Noise/Grain ефектів на сайті

Реалізація ефектів Noise/Grain на сайті

Grain (кіношум, текстура гальма) — один із найпопулярніших візуальних ефектів у сучасному веб-дизайні. Він усуває стерильність екрана, додає текстуру та робить градієнти більш органічними. Це можна реалізувати кількома способами — від статичного SVG-фільтра до анімованого Canvas-шуму.

Метод 1: SVG filter + CSS (найпростіший)

Браузер застосовує процедурний шум через SVG feTurbulence. Майже нульове навантаження на CPU/GPU.

<!-- Прихований SVG із фільтром -->
<svg xmlns="http://www.w3.org/2000/svg" style="position:absolute;width:0;height:0">
  <defs>
    <filter id="grain-filter" x="0%" y="0%" width="100%" height="100%"
            color-interpolation-filters="sRGB">
      <feTurbulence
        type="fractalNoise"
        baseFrequency="0.65"
        numOctaves="3"
        stitchTiles="stitch"
        result="noise"
      />
      <feColorMatrix type="saturate" values="0" in="noise" result="grayNoise"/>
      <feBlend in="SourceGraphic" in2="grayNoise" mode="overlay" result="blended"/>
      <feComponentTransfer in="blended">
        <feFuncA type="linear" slope="1"/>
      </feComponentTransfer>
    </filter>
  </defs>
</svg>

.grain-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  opacity: 0.15;
  filter: url(#grain-filter);
  background: transparent;
}

/* Або на конкретний елемент */
.hero-with-grain {
  position: relative;
}

.hero-with-grain::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.12;
  filter: url(#grain-filter);
  pointer-events: none;
}

Статичний — шум не рухається. Підходить для текстурування градієнтів.

Метод 2: CSS pseudo-element з base64 PNG

Попередньо відрендерений PNG із шумом, замощується через background-size. Менше артефактів у деяких браузерах.

.grain-texture::after {
  content: '';
  position: fixed;
  inset: -200%;  /* виходимо за межі для анімації */
  width: 400%;
  height: 400%;
  background-image: url('/textures/grain.png');
  background-size: 200px 200px;
  opacity: 0.08;
  pointer-events: none;
  z-index: 9999;
  animation: grain-shift 0.2s steps(1) infinite;
}

@keyframes grain-shift {
  0%  { transform: translate(0, 0); }
  10% { transform: translate(-5%, -10%); }
  20% { transform: translate(-15%, 5%); }
  30% { transform: translate(7%, -25%); }
  40% { transform: translate(-5%, 25%); }
  50% { transform: translate(-15%, 10%); }
  60% { transform: translate(15%, 0%); }
  70% { transform: translate(0%, 15%); }
  80% { transform: translate(3%, 35%); }
  90% { transform: translate(-10%, 10%); }
  100%{ transform: translate(0%, 5%); }
}

Генерування grain.png через Node.js:

// scripts/generate-grain.js
const { createCanvas } = require('canvas')
const fs = require('fs')

const SIZE = 256
const canvas = createCanvas(SIZE, SIZE)
const ctx = canvas.getContext('2d')

const imageData = ctx.createImageData(SIZE, SIZE)
const data = imageData.data

for (let i = 0; i < data.length; i += 4) {
  const value = Math.floor(Math.random() * 255)
  data[i] = value      // R
  data[i + 1] = value  // G
  data[i + 2] = value  // B
  data[i + 3] = 255    // A
}

ctx.putImageData(imageData, 0, 0)
fs.writeFileSync('./public/textures/grain.png', canvas.toBuffer('image/png'))

Метод 3: Canvas із анімованим шумом

Повний контроль: швидкість оновлення, розмір зерна, opacity, колір.

class GrainCanvas {
  private canvas: HTMLCanvasElement
  private ctx: CanvasRenderingContext2D
  private rafId: number | null = null
  private frameCount = 0
  private readonly FRAME_SKIP = 2  // оновлювати кожні N кадрів

  constructor(container: HTMLElement = document.body, opacity = 0.1) {
    this.canvas = document.createElement('canvas')
    this.canvas.style.cssText = `
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 9999;
      opacity: ${opacity};
      mix-blend-mode: overlay;
    `
    container.appendChild(this.canvas)

    this.ctx = this.canvas.getContext('2d')!
    this.resize()
    window.addEventListener('resize', this.resize)
    this.start()
  }

  private resize = () => {
    // Використовуємо меншу розділення для продуктивності
    const scale = 0.5
    this.canvas.width = window.innerWidth * scale
    this.canvas.height = window.innerHeight * scale
  }

  private generateNoise() {
    const { width, height } = this.canvas
    const imageData = this.ctx.createImageData(width, height)
    const buffer = new Uint32Array(imageData.data.buffer)

    for (let i = 0; i < buffer.length; i++) {
      const v = (Math.random() * 256) | 0
      // Упакований RGBA (little-endian): AABBGGRR
      buffer[i] = (255 << 24) | (v << 16) | (v << 8) | v
    }

    this.ctx.putImageData(imageData, 0, 0)
  }

  private start() {
    const tick = () => {
      this.frameCount++
      if (this.frameCount % this.FRAME_SKIP === 0) {
        this.generateNoise()
      }
      this.rafId = requestAnimationFrame(tick)
    }
    this.rafId = requestAnimationFrame(tick)
  }

  destroy() {
    if (this.rafId) cancelAnimationFrame(this.rafId)
    window.removeEventListener('resize', this.resize)
    this.canvas.remove()
  }
}

new GrainCanvas(document.body, 0.08)

Метод 4: WebGL shader noise (GLSL)

Для зерна над сценою WebGL або для процедурного шуму з контролем частоти:

// Fragment shader — анімований кіношум
uniform float uTime;
uniform float uIntensity;
uniform vec2 uResolution;

varying vec2 vUv;

// Псевдовипадкова функція
float rand(vec2 co) {
  return fract(sin(dot(co.xy, vec2(12.9898, 78.233))) * 43758.5453);
}

void main() {
  // Змінюємо seed кожен кадр — зерно "живе"
  vec2 seed = vUv + fract(uTime * 37.0);
  float grain = rand(seed * uResolution) * 2.0 - 1.0;

  // Додаємо до існуючого кольору
  vec4 base = texture2D(uTexture, vUv);
  base.rgb += grain * uIntensity;

  gl_FragColor = base;
}

Зерно над градієнтом: усунення смуг

Градієнти на екранах з обмеженою глибиною кольору показують смуги. Зерно ефективно маскує смуги:

.gradient-section {
  background: linear-gradient(135deg, #1a0050 0%, #0a1628 50%, #001a2e 100%);
  position: relative;
}

.gradient-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/textures/grain.png');
  background-size: 150px;
  opacity: 0.05;
  animation: grain-shift 0.3s steps(1) infinite;
  pointer-events: none;
}

Продуктивність

Canvas з повною розділенням при 60fps створює навантаження. Рішення:

• Зменшити розмір canvas (scale = 0.5) та розтягнути через CSS
• Оновлювати кожні 2–3 кадри (FRAME_SKIP)
• OffscreenCanvas + Worker для окремого потоку

// OffscreenCanvas у Web Worker
// main.js
const canvas = document.getElementById('grain')
const offscreen = canvas.transferControlToOffscreen()
const worker = new Worker('/workers/grain-worker.js')
worker.postMessage({ canvas: offscreen }, [offscreen])

Терміни

Метод SVG або PNG із CSS-анімацією — 2–3 години. Canvas із регулюванням інтенсивності, перемиканням prefers-reduced-motion та React-компонентом — 1 день.