Шейдеры / WebGL · curtains

Curtains.js

WebGL-искажения на обычных HTML-элементах — без целого 3D-мира

Tier 3СреднеОсторожно на мобилеfree (MIT)JavaScript + WebGL

Design DNA

«Магия WebGL без построения целого 3D-мира. Мы не создаём сцену — превращаем скучный <img> или <div> в жидкий, реагирующий на мышь холст.»

Use with AI

Скопируй промпт и отдай агенту. Он реализует решение в твоём стеке — не копирует чужой код.

Сделай одну Curtains.js plane на hero-изображении или блоке.
Простой distortion-шейдер (wave / displacement / RGB shift). AI может написать шейдер — держи его коротким.
Feature detect WebGL + картинка-fallback. Mobile: отключить или сильно упростить.
prefers-reduced-motion → статичное фото. Dispose при unmount. Не строй Three-мир.

Что умеет

·Натягивать фрагментные шейдеры на DOM-элементы
·Мышь / скролл → wave, displacement, RGB shift
·Hero, галереи, «жидкая» картинка при hover

Чего не умеет

·Не сложная 3D-логика с коллизиями и освещением (нужен Three.js)
·Без fallback — чёрный квадрат на слабых устройствах

Когда брать

·Эффект «жидкой» картинки при наведении
·Искажение текста/фото при скролле, шум на фоне

Когда не брать

·Простой UI → CSS/Motion
·Полноценная 3D-сцена → Three/R3F

С чем сочетается

GSAPSplitTypeLenisBarba

Альтернативы

Three.jsOGLCSS filters

Типичные ошибки

·Curtains на всё без feature detect
·Забыть static fallback
·Не проверил производительность на iPhone SE. WebGL и AI-модели могут убить батарею или вызвать краш. Всегда делай фоллбэк на статику через matchMedia или детект мощности устройства.

Демо и ссылки

curtainsjs.com