Плёночное зерно

SVG-шум в data-uri + дискретное дрожание steps() — фактура плёнки без WebGL. Сравнение до/после.

Сравните половины.

без зерна

с зерном

Код

<div class="grain"></div>  <!-- поверх всего сайта -->

<style>
.grain { position: fixed; inset: -60%; z-index: 90;
  pointer-events: none; opacity: .08;
  /* SVG-шум прямо в data-uri — без картинок и запросов */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 8s steps(10) infinite; }   /* steps = «плёнка» */
@keyframes grain {
  0%,100% { transform: translate(0,0); }
  20% { transform: translate(-2%, 2%); }
  40% { transform: translate(2%, -1%); }
  60% { transform: translate(-1%, -2%); }
  80% { transform: translate(1%, 2%); } }
</style>

Промпт для ИИ

Добавь плёночное зерно поверх сайта (замена WebGL-шейдера 4wide.jp): фиксированный слой inset:-60% (запас для дрожания), pointer-events:none, opacity .08-.12; фон — SVG feTurbulence fractalNoise baseFrequency 0.9 через data-uri (ноль запросов); анимация transform translate по 5 точкам за 8s с steps(10) — дискретное дрожание как у плёнки. Дорогая фактура за 15 строк CSS.