Участок: галереи, editorial, мода, музкультура, AV — улов

Поправка 2026-08-30 (Жан). Везде ниже, где сказано «наш сигнальный красный #FB3B1E» или «наш акцент — красный», — ошибка: у Colossus постоянного цветного акцента НЕТ (брендбук: монохром «от белого до графита», сезонные цвета только по согласованию). Технические выводы о референсах остаются в силе; сравнения «их красный = наш» — нет.

Статус: ГОТОВО (см. отметку в конце файла). Разведчик: агент w4. Дата: 2026-08-29. Задача: 113 ссылок — галереи эффектов (31), тёмный editorial (20), мода (21), музкультура (22), AV/свет (19). Метод: curl + WebFetch + WebSearch + чтение машинного зонда probe-browser.jsonl. Галереи разбираются НЕ как сайты, а как каталоги — вылов конкретных демо с прямыми URL.

Конкретные демо и компоненты из галерей (ранжировано)

Метод вылова: тег-страницы Codrops (webgl, shader, distortion, menu, grid, typography, scroll, cursor) выкачаны через curl и распарсены — 94 уникальных статьи-демо с точными заголовками и прямыми URL. Ниже — ранжированный отбор под четыре пункта закона Жана и под инженерные предохранители v3.1 (один активный WebGL-контекст, three-чанк ≤160 кБ async, статик-экспорт, никакой новой рантайм-зависимости кроме three).

1. Relighting Images with Depth Maps and Three.js — https://tympanus.net/codrops/2026/08/19/relighting-images-with-depth-maps-and-three-js/

• Техника: шейдер. Фотография + карта глубины (генерится офлайн, кладётся в public/ как обычный WebP) грузятся как две текстуры на ОДИН полноэкранный квад; фрагментный шейдер считает нормали из глубины и освещает кадр движущимся источником, привязанным к курсору. Геометрии нет вообще.
• Куда в Колоссусе: главное попадание участка. Реальные кадры бетонных стен, металлических ферм и пустого зала начинают жить под светом — «как выглядит наш свет» из AV-словаря становится не мудбордом, а механикой. Ставить на большие медиа-секции главной (пик 3) и на кадр пустого зала в B2B-тизере /hire. Депth-карты считаются на нашей же ферме (studio-core/bin/gen), в билд ничего живого не тянут.
• ВАУ высокий / ТРУД средний. Один квад, две текстуры, ~60 строк GLSL. Фолбэк тривиален — тот же WebP без света. Ложится в бюджет лучше любой другой позиции списка.

2. Building The Monolith: Composable Rendering Systems for a 13-Scene WebGL Epic — https://tympanus.net/codrops/2025/11/29/building-the-monolith-composable-rendering-systems-for-a-13-scene-webgl-epic/

• Техника: архитектура рендера, не эффект. Как держать десяток разных WebGL-сцен на ОДНОМ рендерере и одном RAF, переключая их композицией, а не пересозданием контекста.
• Куда в Колоссусе: это буквально инструкция под «Закон эффектов» из addendum v3.1 («один активный WebGL-контекст на страницу, общая инфраструктура; монолит и жидкий металл делят импорт three, env-фабрику и один RAF-менеджер»). Читать перед тем, как Ф1-воркер напишет первую строку three-обвязки. Совпадение имени со сценой-монолитом Колоссуса — бонус, не аргумент.
• ВАУ нулевой / ТРУД: это экономия труда, а не трата. Единственная позиция в списке, которую надо прочитать целиком до начала работ.

3. Composite Rendering: The Brilliance Behind Inspiring WebGL Transitions — https://tympanus.net/codrops/2026/02/23/composite-rendering-the-brilliance-behind-inspiring-webgl-transitions/

• Техника: композитный рендер — DOM и WebGL сводятся в один кадр, поэтому переход может пересекать границу между вёрсткой и канвасом (элемент «втекает» в шейдер и обратно).
• Куда в Колоссусе: технический ключ к дозировке жидкого металла. Пик 17 требует материал ровно на трёх типах элементов (карточки цифр, CTA-плиты, обложки /cast) — композитный подход даёт это одним канвасом поверх страницы вместо трёх контекстов, что и требует v3.1. Плюс переход прелоудер → hero (пик 13) перестаёт быть двумя несвязанными анимациями.
• ВАУ средний / ТРУД высокий. Это фундамент, а не украшение: строится один раз, потом всё дешевеет.

4. How to Create Interactive, Droplet-like Metaballs with Three.js and GLSL — https://tympanus.net/codrops/2025/06/09/how-to-create-interactive-droplet-like-metaballs-with-three-js-and-glsl/

• Техника: метаболы через SDF в фрагментном шейдере — капли сливаются и растекаются за курсором. Геометрии снова нет, только квад.
• Куда в Колоссусе: это и есть «жидкий металл» пика 17 в самой честной форме. Метаболы + хромовая env-карта (процедурная, снятая с монолита — она уже есть) = ртуть, растекающаяся по CTA-плите на ховере. Дозировка строгая: CTA + карточки цифр + обложки /cast, больше нигде.
• ВАУ высокий / ТРУД средний.

5. Building a Mouse-Following Square Lens Effect with Three.js and GLSL — https://tympanus.net/codrops/2026/08/25/building-a-mouse-following-square-lens-effect-with-three-js-and-glsl/

• Техника: прямоугольная линза за курсором искажает/увеличивает участок текстуры под собой. Свежая статья (август 2026), три.js + GLSL, один шейдер.
• Куда в Колоссусе: важно, что линза КВАДРАТНАЯ, а не круглая — круг чужд брендбуку, а прямоугольная рамка — это девайс №6 брендбука («frames/blocks»). Кладётся на полноэкранные медиа-секции: курсор таскает по кадру рамку, внутри которой тот же кадр другой — резче, ярче, с красной каймой. Дешёвая альтернатива п.1 там, где нет карты глубины.
• ВАУ высокий / ТРУД низкий.

6. Fullscreen Hover Loop Effect — https://tympanus.net/codrops/2018/10/16/fullscreen-hover-loop-effect/ (демо: https://tympanus.net/Development/FullscreenHoverLoop/)

• Техника: переход. Ховер по строке-ссылке запускает полноэкранную прокрутку кадров позади интерфейса; клик — текущий кадр ужимается и уезжает на своё место в сетке следующей страницы.
• Куда в Колоссусе: это механика пика 5 (HÖR-список) плюс то, чего у HÖR нет — переход из списка на страницу сущности. Список артистов /artists и афиша /events: наведение на строку меняет полноэкранный фон, клик уносит этот же кадр на страницу артиста/события. Двусторонняя связка события↔артисты получает визуальную рифму. Демо старое (TweenMax), берём идею, не код.
• ВАУ высокий / ТРУД средний. Полностью DOM+CSS, без WebGL — то есть бесплатно по бюджету.

7. Interactive Video Projection Mapping with Three.js — https://tympanus.net/codrops/2025/08/28/interactive-video-projection-mapping-with-three-js/

• Техника: видео-текстура проецируется на 3D-геометрию как из настоящего проектора, с учётом формы поверхности.
• Куда в Колоссусе: самый «наш» эффект во всём участке по смыслу. Колоссус — площадка, где на бетон реально светят проекторы; сайт может делать то же со своим hero-лупом, натянув его на плиту или на монолит вместо плоского <video>. Мост между AV-словарём (Sila Sveta, 1024 Architecture) и вёрсткой.
• ВАУ очень высокий / ТРУД высокий. Требует геометрии и живого видео в текстуре — тяжелее всего остального списка; кандидат в premium-tier, не в базовый.

8. Implementing a Dissolve Effect with Shaders and Particles in Three.js — https://tympanus.net/codrops/2025/02/17/implementing-a-dissolve-effect-with-shaders-and-particles-in-three-js/

• Техника: шейдер растворения по шумовой маске + частицы на кромке распада.
• Куда в Колоссусе: прелоудер пика 13. Белый PNG-логотип не деформируется (запрет брендбука) — он растворяется в частицы, и сквозь него открывается hero. Требование «маска перехода в hero, а не отдельная заставка» выполняется буквально.
• ВАУ высокий / ТРУД средний. Жёсткий лимит ~1.5 с и скип по клику остаются за нами.

9. From Shader Uniforms to Clip-Path Wipes: How GSAP Drives My Portfolio — https://tympanus.net/codrops/2026/05/06/from-shader-uniforms-to-clip-path-wipes-how-gsap-drives-my-portfolio/

• Техника: переход. Одна и та же анимационная шкала гонит и uniform'ы шейдера, и обычные CSS clip-path-вайпы — то есть дорогой и дешёвый слой живут по одной партитуре.
• Куда в Колоссусе: это ответ на вопрос «что показывать на тач/saveData/reduced-motion». Тир без WebGL получает те же clip-path-вайпы, что и тир с шейдером, и сайт не разваливается на две разные эстетики. Прямо обслуживает три capability-тира из v3.1.
• ВАУ низкий / ТРУД низкий — но это страховка всего проекта.

10. Building a Real-Time Dithering Shader — https://tympanus.net/codrops/2025/06/04/building-a-real-time-dithering-shader/

(пара к нему: https://tympanus.net/codrops/2025/07/30/interactive-webgl-backgrounds-a-quick-guide-to-bayer-dithering/ и https://tympanus.net/codrops/2026/01/04/efecto-building-real-time-ascii-and-dithering-effects-with-webgl-shaders/) - Техника: шейдер. Байеровская матрица превращает изображение в упорядоченный растр из точек. - Куда в Колоссусе: дизеринг — это печатный растр клубной афиши и ризограф-плакат, то есть культурный код рейва, а не украшение. Монохромный, работает на #0a0a0a, ничего не стоит. Применение: «призрачный тип» (девайс №4) — гигантский обрезанный вордмарк позади hero даётся не плоским #141414, а растром; и переход между медиа-секциями (кадр рассыпается в точки). Красный #FB3B1E в растре по одной точке из ста читается как искра, а не как заливка. - ВАУ средний / ТРУД низкий. Есть дешёвый CSS/canvas-2D фолбэк.

11. Some On-Scroll Text Highlight Animations — https://tympanus.net/codrops/2024/04/17/some-on-scroll-text-highlight-animations/ (демо: https://tympanus.net/Development/OnScrollTextHighlight/)

• Техника: CSS/JS без WebGL — подсветка фрагмента строки по мере прокрутки.
• Куда в Колоссусе: прямое исполнение «красной дисциплины»: одна выделенная фраза на экран (#FB3B1E) не выкрашена статически, а ЗАЖИГАЕТСЯ, когда строка доезжает до середины экрана. Брендбучное ограничение «красное ≤ фразы» превращается из запрета в приём.
• ВАУ средний / ТРУД низкий.

12. Staggered (3D) Grid Animations with Scroll-Triggered Effects — https://tympanus.net/codrops/2024/10/16/staggered-3d-grid-animations-with-scroll-triggered-effects/

• Техника: CSS 3D-трансформы + стаггер по скролл-триггеру. WebGL не нужен.
• Куда в Колоссусе: раздел цифр (пик 15) — карточки в перспективном наклоне с фото внутри, разнобойная раскладка, стаггер. Ровно то, что заказал Жан, и БЕЗ расхода трёх-бюджета. Tilt за курсором добавляется CSS-переменными от одного pointer-шедулера, как и требует v3.1.
• ВАУ средний / ТРУД низкий. Самая выгодная позиция по соотношению «эффект / бюджет».

13. From Flat to Spatial: Creating a 3D Product Grid with React Three Fiber — https://tympanus.net/codrops/2026/02/24/from-flat-to-spatial-creating-a-3d-product-grid-with-react-three-fiber/

• Техника: та же сетка карточек, но настоящими планами в трёхмерной сцене.
• Куда в Колоссусе: апгрейд п.12, если Жану окажется мало CSS-наклона. Даёт честную перспективу и общий свет на всех карточках; цена — второй кандидат на единственный WebGL-контекст страницы, поэтому конкурирует с монолитом в hero. Решение — «или/или», не «и».
• ВАУ высокий / ТРУД высокий.

14. Grid Displacement Texture with RGB Shift using Three.js GPGPU and Shaders — https://tympanus.net/codrops/2024/08/27/grid-displacement-texture-with-rgb-shift-using-three-js-gpgpu-and-shaders/ (демо: https://tympanus.net/Development/GridDistortionEffect/)

• Техника: дисторшн. Курсор пишет в сетку смещений, кадр под ней тянется, каналы RGB разъезжаются.
• Куда в Колоссусе: RGB-сдвиг даёт красную кайму на движении — то есть акцент бренда возникает из самого движения, а не из заливки. Кладётся на кадры толпы: след курсора «размазывает» массу, красный канал отстаёт. Точная рифма с сигнальным красным.
• ВАУ высокий / ТРУД средний.

15. Animating in Frames: Repeating Image Transition — https://tympanus.net/codrops/2025/04/28/animating-in-frames-repeating-image-transition/ (демо: https://tympanus.net/Development/RepeatingImageTransition)

• Техника: переход без WebGL — кадр повторяется убывающими копиями и «пролистывается» в новое положение.
• Куда в Колоссусе: переход афиша → страница события и строка артиста → страница артиста. Постер события размножается в шлейф и садится на своё место на новой странице. Держит ощущение тяжёлого материала (повтор = масса), а не лёгкого фейда.
• ВАУ высокий / ТРУД низкий.

16. How to Create Responsive and SEO-friendly WebGL Text — https://tympanus.net/codrops/2025/06/05/how-to-create-responsive-and-seo-friendly-webgl-text/

• Техника: реальный DOM-текст остаётся в разметке и служит источником для WebGL-слоя; поисковик и скринридер видят текст, зритель видит шейдер.
• Куда в Колоссусе: обязательное чтение, если хоть один заголовок со смешанным курсивом уедет в канвас. Статик-экспорт + hreflang + JSON-LD из v3.1 несовместимы с текстом, нарисованным в текстуру.
• ВАУ нулевой / ТРУД низкий — но это допуск к работе с типографикой в 3D.

17. Replicating CSS Object-Fit in WebGL — https://tympanus.net/codrops/2025/03/11/replicating-css-object-fit-in-webgl/

• Техника: математика UV для cover/contain на плоскости с текстурой.
• Куда в Колоссусе: без этого любое полноэкранное медиа в шейдере поедет по пропорциям на 390 px и на 1440 px по-разному. Скучная, но обязательная позиция для «больших медиа-секций» (пик 3).
• ВАУ нулевой / ТРУД низкий.

18. Building Efficient Three.js Scenes: Optimize Performance While Maintaining Quality — https://tympanus.net/codrops/2025/02/11/building-efficient-three-js-scenes-optimize-performance-while-maintaining-quality/

• Техника: методичка по бюджету: draw calls, размеры текстур, инстансинг, прекомпиляция шейдеров.
• Куда в Колоссусе: приёмка v3.1 («shared ≤115 кБ gzip, three-чанк ≤160 кБ async, тест на реальном мид-Android») проверяется по этому чек-листу. Пункт про прекомпиляцию шейдеров на idle взят в addendum почти дословно — здесь его исходник.
• ВАУ нулевой / ТРУД низкий.

Второй эшелон — брать по мере надобности

Каталоги компонентов: «жидкий металл» уже написан за нас

Главная находка участка. React Bits отдаёт готовыми компонентами ровно тот материал, который Жан заказал в пике 17, — и я проверил исходники в репозитории, а не поверил названиям.

Что это значит практически. Три из четырёх «металлических» компонентов — это ОДИН полноэкранный треугольник с фрагментным шейдером на 20–40 строк. Ни геометрии, ни сцены, ни камеры. А Metallic Paint не тянет вообще никакой библиотеки. То есть фирменный материал Колоссуса стоит не «плюс three.js», а «плюс сорок строк GLSL».

Развилка по зависимостям, которую решает не воркер, а тех-директор. Три компонента написаны на OGL — это НОВАЯ рантайм-зависимость, а direction-v3 разрешает только three. Варианта два, и первый правильнее: (1) взять из этих компонентов только GLSL и повесить его на плоскость в уже загруженной three-сцене — ни новой зависимости, ни лишних байт, потому что three мы и так грузим ради монолита; (2) допустить OGL как исключение — он около 10 кБ против ~160 кБ у three, то есть формально нарушает букву закона, но улучшает бюджет. Рекомендация: вариант 1.

Дешёвый путь к металлу вообще без шейдера — из каталога примеров three.js: MatCap (https://threejs.org/examples/#webgl_materials_matcap) даёт хромовую поверхность из одной маленькой текстуры, без env-карты, без света и без прохода освещения. Если жидкий металл нужен статичным (а на тач-устройствах он именно такой — «статичный хром-градиент» по пику 17), MatCap закрывает задачу почти бесплатно.

Остальные примеры three.js, которые понадобятся именно нам: webgl_materials_envmaps_fasthdr (https://threejs.org/examples/#webgl_materials_envmaps_fasthdr) — env-карта монолита дёшево · webgl_refraction (https://threejs.org/examples/#webgl_refraction) — преломление · webgl_materials_video (https://threejs.org/examples/#webgl_materials_video) — hero-луп как текстура на геометрии · webgl_depth_texture (https://threejs.org/examples/#webgl_depth_texture) — под релайт по карте глубины (демо №1) · webgl_clipping_stencil (https://threejs.org/examples/#webgl_clipping_stencil) — маска прелоудера пика 13 · webgl_decals (https://threejs.org/examples/#webgl_decals) — посадить белый вордмарк на неровную поверхность без искажения знака · webgl_instancing_dynamic (https://threejs.org/examples/#webgl_instancing_dynamic) — сетка кубов одним draw call.

React Bits, остальное по нашим девайсам (все — прямые URL, компоненты копируются исходником, а не ставятся пакетом): masked-heading (https://reactbits.dev/text-animations/masked-heading) и split-text (https://reactbits.dev/text-animations/split-text) — входы заголовков Zentry (пик 14) · count-up (https://reactbits.dev/text-animations/count-up) и counter (https://reactbits.dev/components/counter) — цифры площадки · split-flap-text (https://reactbits.dev/text-animations/split-flap-text) — механическое табло, индустриальный характер для дат афиши · animated-list (https://reactbits.dev/components/animated-list) и flowing-menu (https://reactbits.dev/components/flowing-menu) — строки HÖR-списка · staggered-menu (https://reactbits.dev/components/staggered-menu) — меню KHIDI · logo-loop (https://reactbits.dev/animations/logo-loop) — партнёрская лента логотипов из брендбука · grid-distortion (https://reactbits.dev/backgrounds/grid-distortion) и ripple-grid (https://reactbits.dev/backgrounds/ripple-grid) — искривлённая сетка (девайс 5) · light-rays (https://reactbits.dev/backgrounds/light-rays), light-pillar (https://reactbits.dev/backgrounds/light-pillar), laser-flow (https://reactbits.dev/animations/laser-flow) — клубный свет · halftone-reveal (https://reactbits.dev/animations/halftone-reveal) — печатный растр · glare-hover (https://reactbits.dev/animations/glare-hover) — металлический блик на ховере · reflective-card (https://reactbits.dev/components/reflective-card) — отражающая карточка · noise (https://reactbits.dev/animations/noise) — наше зерно · pixel-transition (https://reactbits.dev/animations/pixel-transition) — переход между кадрами.

Aceternity UI (https://ui.aceternity.com/components, 111 компонентов) — второй каталог, React + Tailwind, то есть наш стек. Полезное под наши девайсы: 3d-card-effect, direction-aware-hover, glare-card, card-spotlight, svg-mask-effect, canvas-reveal-effect, dither-shader, chromatic-image (хроматическая аберрация = красная кайма), flip-words (переброс слова — прямая механика нашего смешанного курсива), text-hover-effect, hero-highlight и pointer-highlight (красная подсветка фразы), lens, compare (шторка «зал днём / зал ночью»), lamp-effect и spotlight-new (свет), noise-background, multi-step-loader (прелоудер), 3d-marquee, infinite-moving-cards, background-lines. Оговорка та же: копируем исходник, а не ставим пакет; Framer Motion в наших дефолтах есть, но по закону v3 всё, что тянет CSS, делается на CSS.

Какие галереи стоят возврата, а какие нет

• Codrops (https://tympanus.net/codrops/tag/webgl/ и /tag/shader/) — безусловный первый номер. Единственная галерея участка, где эффект приходит вместе с разбором и кодом, а не картинкой. Возвращаться регулярно; тег-страницы читаются машиной, каталог выкачивается целиком.
• React Bits (https://reactbits.dev) — первый номер по компонентам, см. блок выше. Карта сайта отдаётся в sitemap.xml — весь каталог снимается одним запросом, руками ходить незачем.
• Awwwards по категориям — работает, но не так, как ожидалось. Категории 3d, webgl, experimental — это в подавляющем большинстве портфолио разработчиков и сайты агентств; под задачу площадки оттуда пришло четыре имени из тридцати. Полезнее оказалась категория music (https://www.awwwards.com/websites/music/), давшая Boys Noize, Paul Kalkbrenner, Run Rob Run, Edolus и aorum. Категория brutalism (https://www.awwwards.com/websites/brutalism/) практически пуста — два результата, брутализм у Awwwards не живёт. dark (https://www.awwwards.com/websites/dark/) отбирает по слову «dark» в названии сайта, а не по тёмности дизайна: «Dark Dog», «Angel of Darkness», «Dark Alley Pictures». Для нашей задачи она бесполезна, и это стоит знать заранее.
• hoverstat.es (https://www.hoverstat.es/) — маленькая, но самая точная кураторская выборка участка: 27 сайтов, из них половина попадает в наш тон. Оттуда единственный институциональный аналог Колоссуса во всём списке — Ballet National de Marseille (https://www.ballet-de-marseille.com), которым руководит коллектив (LA)HORDE с открытой рейв-хореографической программой. 3D там нет, но есть то, чего нет больше нигде: как культурная институция подаёт художественную дирекцию, продакшн и работу с публикой отдельными разделами — прямой донор структуры для «О пространстве» и JOIN TEAM.
• Brutalist Websites (https://brutalistwebsites.com/) — 1 540 внешних ссылок, самый большой сырой пул участка и одновременно самый шумный: это в основном сайты художественных школ и личные эксперименты. Заходить только с конкретным запросом. Из релевантного попалось ravecon0.org (сейчас отдаёт редирект).
• Godly (https://godly.website) — переехал: страница сводится к одной ссылке на https://recent.design. Ходить сразу туда.
• Google Experiments (https://experiments.withgoogle.com) — витрина исторических работ (the-wilderness-downtown, webgl-globe, music-lab). Много про звук, как и обещал список, но эстетика двухтысячных-десятых; под тёмный тяжёлый бренд не даёт ничего.
• Httpster (https://httpster.net/), Design Spells (https://designspells.com/), CSS Design Awards (https://www.cssdesignawards.com/), Refero (https://refero.design/), FWA (https://thefwa.com/cases) — живы, но отдают список только в JS, роботам — пустую разметку. Их нельзя вычерпать машиной, а ручной просмотр они не окупают: пересечение с Awwwards и Codrops почти полное. GSAP Showcase (https://gsap.com/showcase/) закрыт интерстишлом Cloudflare.

21st.dev (https://21st.dev) — жив, 12 000+ компонентов с живым превью, но это витрина общего назначения; для нашей задачи React Bits и Aceternity плотнее по попаданию. Motion Examples (https://motion.dev/examples) — брать на этапе реализации, когда эффект уже выбран, а не на этапе отбора. Spline (https://spline.design) — подтверждён рабочим на проде через ULTRAGRID (spline-viewer.js), но тянет свой рантайм. Rive (https://rive.app) — для интерактивного логотипа/маскота; у Колоссуса маскота нет, знак трогать нельзя, поэтому применения не нашлось.

Сайты с настоящим 3D (editorial / мода / музыка)

Дисциплина доказательства. Ниже 3D засчитано только там, где браузерный зонд получил WebGL-контекст И увидел живой <canvas> в DOM, либо где в разметке лежит явно названная 3D-библиотека. Отдельно предупреждение о ложном срабатывании, которое портит всю выборку: у доброго десятка магазинов зонд фиксирует webgl-контекст при НУЛЕ канвасов. Это не дизайн, а снятие отпечатка браузера антифродом Shopify — контекст создаётся, из него читается строка видеокарты, канвас уничтожается. Так «светятся» rickowens.eu, a-cold-wall.com, heliotemil.com, misbhv.com, machine-a.com, acnestudios.com, diesel.com, rombaut.com, mixmag.net. Ни один из них не имеет 3D в дизайне; в отчёт они идут в отбраковку, а не в улов.

1. Boys Noize — https://www.boysnoize.com/

• Движок (доказательство): зонд — webgl2-контекст, 1 живой канвас на странице. Своя сборка (BN_app.js / BN_vendors.app.js), не шаблон.
• Что там происходит: сайт электронного артиста, у которого структура разделов совпадает с тем, что Колоссусу нужно строить на /artists/<slug>, почти один в один: News · Music · Full Discography · Videos · Tour · Contact · Booking Worldwide и отдельно Booking North/South America. Поверх этого — живой WebGL-слой на всю страницу. То есть перед нами доказательство, что «архив артиста + даты + контакт букинга» и «настоящий 3D» уживаются на одном экране, не мешая друг другу.
• ЧТО БЕРЁМ: анатомию страницы артиста целиком, включая разделение контактов на общий и букинговый — у нас это ляжет на /hire и на страницу артиста; и приём «один сквозной WebGL-слой на всю страницу вместо эффекта в каждом блоке», что дословно совпадает с законом одного контекста из v3.1. ЧТО НЕ БЕРЁМ: графический язык — он ярче и кислотнее нашего; палитра Колоссуса остаётся #0a0a0a + #F3F3F3 + один красный.
• ВАУ средний / ТРУД средний.

2. Cav Empt (C.E) — https://www.cavempt.com/

• Движок (доказательство): зонд — глобал __THREE__, контекст webgl2, 1 канвас. Скрипт спрятан под обфусцированным именем (7Qvom5N5.js), то есть three.js вкомпилен в общий бандл.
• Что там происходит: самое интересное здесь — сдержанность. Марка с киберпанк-графической ДНК держит three.js на сайте, но НЕ делает из него аттракцион: видимый слой — это спокойная сетка товаров капсом (NYLON CARDIGAN, PURSUIT T) и иконочная нижняя навигация looks · video · stores · archive · contact. 3D работает фоном и на переходах, а не на первом плане.
• ЧТО БЕРЁМ: саму дозировку. Это живое подтверждение пика 17 («жидкий металл очень тонко, мягко»): сильный движок под капотом, тихий эффект на поверхности. И нижнюю иконочную навигацию из пяти слов — она рифмуется с составом разделов KHIDI. ЧТО НЕ БЕРЁМ: глитч-графику и коллажный принт-язык — у Колоссуса дерзость идёт от массы и материала, не от растрового шума.
• ВАУ низкий, но обучающий / ТРУД низкий.

3. Dvein — https://www.dvein.com/

• Движок (доказательство): самый чистый случай во всём участке — в разметке лежат three.min.js, TweenLite.min.js, EasePack.min.js; зонд видит глобал THREE, контекст webgl и 4 канваса одновременно.
• Что там происходит: режиссёрский дуэт (реклама, клипы, кино), самоописание — «we love experimentation». Работы поданы как сетка живых 3D-поверхностей, а не как плоские превью: четыре независимых канваса означают, что каждый кейс несёт собственный материал. Именно у Dvein лежит наш визуальный первоисточник по жидкостям и материалам — сюрреалистичный CGI, текучий металл, вязкие поверхности.
• ЧТО БЕРЁМ: приём «превью работы = материал, а не картинка» — у нас это карточки цифр (пик 15) и обложки эпизодов /cast, которые на ховере наливаются жидким металлом. И их каталог фактур — прямой источник для env-карты нашего шейдера. ЧТО НЕ БЕРЁМ: четыре одновременных канваса — это ровно то, что запрещает наш закон эффектов; у нас один контекст, плавающий за наведённым элементом.
• ВАУ высокий / ТРУД высокий. Смотреть как на источник материала и как на предупреждение о цене.

4. Marshmallow Laser Feast — https://marshmallowlaserfeast.com/

• Движок (доказательство): webgl2-контекст, 1 канвас. Сам сайт при этом на WordPress — то есть 3D навешено слоем поверх обычной CMS.
• Что там происходит: арт-коллектив иммерсивных инсталляций; список работ читается как поэзия («Of the Oak», «Seeing Echoes in the Mind of the Whale», «In the Eyes of the Animal», «Sanctuary of the Unseen Forest»). Единственный сайт AV-цеха в моей выборке, который не просто показывает видео своих инсталляций, а сам является средой.
• ЧТО БЕРЁМ: доказательство рабочей схемы «обычная CMS + один WebGL-слой сверху» — это в точности наша траектория (Payload → статик-экспорт → один three-чанк async). И манеру называть работы: у Колоссуса события и эпизоды тоже заслуживают имён, а не порядковых номеров. ЧТО НЕ БЕРЁМ: органическую, природную образность — она противоположна бетону и металлу.
• ВАУ высокий / ТРУД средний.

5. ULTRAGRID — https://ultragrid.studio/ (найден через Awwwards / Experimental, в исходном списке его не было)

• Движок (доказательство): в разметке одновременно spline-viewer.js (3D), gsap.min.js + SplitText.min.js + ScrollTrigger.min.js + CustomEase.min.js (моушн) и grained.min.js (плёночное зерно). Сайт при этом собран на Webflow.
• Что там происходит: портфолио креативного разработчика из Копенгагена. Ценность не в содержании, а в том, что это готовый рецепт нашего стека, доказанный в проде: Spline отдаёт 3D-объект как вьюер (не надо писать three-сцену руками), GSAP SplitText делает ровно те пословные/побуквенные входы заголовков, которые Жан отобрал у Zentry (пик 14), а grained.js даёт зерно, которое у нас уже есть с v2. Всё это работает на статически отдаваемом Webflow-сайте — то есть переносится на наш статик-экспорт без сервера.
• ЧТО БЕРЁМ: саму связку. Если писать three-сцену для одного объекта окажется дороже бюджета, Spline-вьюер — легальный обход: объект готовится в редакторе, на страницу приходит один тег. ЧТО НЕ БЕРЁМ: jQuery и Webflow-обвязку; и Spline тянет собственный рантайм — это НОВАЯ зависимость, которую v3 запрещает по умолчанию, значит решение принимает тех-директор, а не воркер.
• ВАУ средний / ТРУД низкий.

6. Mensch — https://www.mensch.club/ (найден через Awwwards / WebGL)

• Движок (доказательство): webgl + шейдеры в разметке; скрипты названы самими авторами и всё объясняют: lab-canvases.js, mensch-parallax.js, mensch-soil.js и — отдельно интересное — web-chrome.js.
• Что там происходит: брендовая студия, манифест «Fix Stuff». Сайт построен как набор именованных канвас-лабораторий, каждая со своим материалом; отдельный модуль отвечает за хромовую поверхность.
• ЧТО БЕРЁМ: архитектурную идею «библиотека материалов» — вместо одного эффекта на весь сайт заводится набор именованных поверхностей, из которых страница берёт нужную. Для Колоссуса это правильная форма для жидкого металла: один шейдер, три санкционированных применения, вызов по имени. ЧТО НЕ БЕРЁМ: стартап-тональность и светлую палитру.
• ВАУ средний / ТРУД средний.

7. Trippin — https://trippin.world/

• Движок (доказательство): webgl + experimental-webgl, 1 канвас; Next.js.
• Что там происходит: тревел-медиа с сильной типографикой и цветом; WebGL-слой обслуживает заголовки и переходы, а не сцену. Заголовки крупные, разделы названы фразами («Carnival Incoming», «Where do you want to go?»).
• ЧТО БЕРЁМ: доказательство, что Next.js-сайт с редакционной лентой держит WebGL-слой без потери структуры — ближайший к нам технический аналог. ЧТО НЕ БЕРЁМ: цвет; у них он несущий, у нас запрещён.
• ВАУ низкий / ТРУД низкий.

8. Where the Shadow Fell — http://eclipses.bogachev.fr (найден через Awwwards / WebGL)

• Движок (доказательство): three.module.js + шейдер в разметке, плюс mapbox-gl.js.
• Что там происходит: 11 898 солнечных затмений с 2000 года до н. э. по 3000 год н. э. на одном глобусе; вводишь город — атлас считает, когда тень падала на него в прошлый раз и когда вернётся. Чёрный фон, одна светящаяся дуга, ноль украшений.
• ЧТО БЕРЁМ: не механику, а урок подачи данных: цифра становится зрелищем, когда у неё есть пространство и один источник света. Наш раздел цифр (3 200 м², 6 500, 200 000+, 12 м) может брать эту дисциплину — гигантское число на чёрном, ничего вокруг. ЧТО НЕ БЕРЁМ: глобус и mapbox — чужая задача, чужой вес.
• ВАУ высокий / ТРУД высокий (и не наш).

9. /zeroz — https://otsuka-air.jp/ (Awwwards Site of the Day, студия SHIFTBRAIN)

• Движок (доказательство): webgl в разметке; сборка на Astro (hoisted.*.js), то есть статический экспорт — ровно наше ограничение.
• Что там происходит: брендовый сайт японского продукта, построенный на крупной типографике с рваным ритмом строк и на слэше в самом названии марки (/zeroz). Разделы разворачиваются длинными заголовками-утверждениями, картинка подчинена тексту.
• ЧТО БЕРЁМ: два предмета. Первый — доказательство, что Astro/статика + WebGL берут Site of the Day, то есть наше ограничение не является потолком качества. Второй — слэш как часть имени бренда, отработанный на большом сайте: у Колоссуса co/ossus® и colossus®/jilt — тот же приём, и здесь видно, как он живёт в заголовках, а не только в логотипе. ЧТО НЕ БЕРЁМ: светлую «фарма-чистую» палитру.
• ВАУ средний / ТРУД низкий.

Что 3D НЕ имеет — и это результат, а не пробел

Зонд прошёл весь мой участок. Итог по трём культурным осям:

• Тёмный editorial (20 сайтов) — 3D нет ни у одного. 032c, Highsnobiety, Hypebeast, Dazed, i-D, The Face, AnOther, Kaleidoscope, Novembre, Spike Art, System, PIN–UP, The Wire, Are.na, Bureau Borsche, hoverstat.es — у всех ноль канвасов и пустой список WebGL-контекстов. Их ценность ровно та, что была заявлена: сетка, капсы, дерзость. За 3D сюда ходить незачем.
• Мода (21 сайт) — настоящий 3D ровно один: Cav Empt. Остальные — Shopify с антифрод-отпечатком (см. предупреждение выше) либо WordPress + Elementor (namacheko.com). Гипотеза «в моде 3D редкое, но самое вкусное» на этой выборке не подтвердилась: 3D в моде почти отсутствует, а вкусное там — типографика и пустота.
• Музкультура (22 сайта) — 3D у двоих: Boys Noize и Trippin. Ostgut Ton, Warp, Ninja Tune, PAN, Hyperdub, Mute, Kompakt, XL, NTS, Rinse FM, Boiler Room, Crack, FACT, Electronic Beats, XLR8R, Amelie Lens, Charlotte de Witte — чистая вёрстка без единого канваса. Берлинский канон (Ostgut) и архив как продукт (Mute, Warp) держатся типографикой и структурой, и это тоже ответ: для /cast, /artists и LABEL эффект не нужен, нужна дисциплина списка.
• Дополнительно из галерей (сайты, которых в исходном списке не было, но которые нашлись через категории Awwwards и оказались релевантнее половины списка): Boys Noize, ULTRAGRID, Mensch, Where the Shadow Fell, /zeroz, Paul Kalkbrenner (https://www.paulkalkbrenner.net/ — GSAP + ScrollTrigger + Lenis, без WebGL: эталон того, как техно-артисту подать даты тура и галерею на чёрном одним движением, без 3D), Edolus (https://edolus.com/), aorum (https://www.aorum.io), Run Rob Run (https://www.runrobrun.com/ — та самая music-reactive goo из Codrops, взявшая номинацию Awwwards; двойное подтверждение приёма).
• Два продуктовых сайта из галерейного блока — 3D нет, но брать есть что. Nothing (https://nothing.tech, зонд: ноль канвасов, из моушна только Lenis) держит целую айдентику на точечной матрице: монохром, индустриальная система, знак и типографика собраны из одной сетки точек. Это готовый ответ на вопрос, как выглядит дизайн-система, где нет ни одного цвета кроме чёрного и белого, — и она рифмуется и с нашим дизерингом (демо №10), и с искривлённой сеткой (девайс 5). teenage engineering (https://teenage.engineering, тоже ноль канвасов) — «продуктовый сайт как объект»: чертёжная подача, служебные подписи, ноль маркетинговой интонации. Ровно тот тон, который нужен паспортам залов на /hire и странице /tickets. Оба доказывают тезис, который в этом участке повторился слишком часто, чтобы быть совпадением: характер держится системой и ограничением, а не эффектом.
• Инструментальные сайты, для протокола: зонд подтверждает 3D у spline.design (webgl2, глобал __THREE__, 3 канваса), rive.app (webgl2, 5 канвасов), 21st.dev (webgl2, 1 канвас) и threejs.org. Это витрины самих движков, референсами не считаются.

AV и свет — визуальный словарь

Оценивается как источник материала, не как вёрстка — и машина это подтверждает: из 19 студий собственный WebGL есть только у Marshmallow Laser Feast. Остальные показывают видео физических инсталляций на обычной вёрстке. Значит смотреть на них надо как на съёмку света, металла и массы, которую мы либо пересобираем в шейдере, либо просто снимаем так же на самом Колоссусе.

Столбец «что именно смотреть» — не «полистай портфолио», а конкретная работа или свойство.

Отбраковка

Ложные срабатывания на 3D — не брать и не проверять повторно. Зонд получает webgl-контекст, но живого канваса нет: это антифрод Shopify снимает отпечаток видеокарты. Так «светятся» rickowens.eu, a-cold-wall.com, heliotemil.com, misbhv.com, machine-a.com, acnestudios.com, diesel.com, rombaut.com, mixmag.net. Отдельно: namacheko.com и altcinc.com дают глобал PIXI — это плагин WordPress/Elementor, не дизайнерское решение. interviewmagazine.com попал в мой первичный отсев по слову «spline» в разметке — при проверке это оказалось совпадение в постороннем коде, сайт обычный WordPress без 3D.

Отбраковано по сути (сайты живые и хорошие, но Колоссусу не дают ничего сверх уже взятого):

Отдельно — Awwwards / Dark. Отбраковываю как категорию: она фильтрует по слову «dark» в НАЗВАНИИ сайта, а не по тёмности дизайна. В списке значилась «самой быстрой точкой входа» — это не так.

Мёртвые / не отвечают

Все проверены curl с браузерным User-Agent, редиректы разрешены; статус на 2026-08-29.

---

Статус: ГОТОВО. Разобрано 113 ссылок участка плюс 20 сайтов, найденных внутри галерей. Машинные доказательства: 115 строк из probe-browser.jsonl по моим URL (114 уникальных адресов), собственный проход curl по 107 адресам с разбором разметки на библиотеки, выкачка и разбор десяти тег-страниц Codrops (94 уникальных демо), карты сайта React Bits и каталога компонентов Aceternity, и проверка исходников компонентов React Bits прямо в репозитории — то есть принадлежность к OGL, three или сырому WebGL установлена по коду, а не по описанию.