Не рисованные · три версии hero

Как бы я сделал сам

Три живых прототипа без иллюстраций: смысл несут механика, свет и типографика. Смотреть на десктопе с мышью и прокруткой — каждый реагирует на курсор и на скролл. Тексты боевого сайта дословно.

концепция A · canvasРезонанс

217 точек — по числу специалистов в каталоге, каждая дышит в своём ритме. Курсор — вы: от него расходятся кольца, и точки, которых коснулась волна, начинают дышать в такт и теплеют бордовым, связи между ними загораются. Через пару секунд синхронизация тает. При скролле поле наклоняется в перспективу и уходит вглубь. Смысл: система — это люди, состояние передаётся. Физика синхронизации, никакой эзотерики.

чистый Canvas 2D, ~200 строк, никаких библиотек Открыть →
концепция B · css 3dГлубина фокуса

Двенадцать слов методики висят в пространстве как стёкла на разной глубине: симптом на поверхности, первопричина — на дне. Всё размыто, кроме плоскости фокуса. Прокрутка двигает фокус вглубь — слово за словом становится резким и уходит за спину. На самом дне в фокус приходит заголовок. Курсор — локальный фокус, как объектив. Смысл: «понимаю умом, а внутри что-то стопорит» — глубина буквально.

CSS 3D + blur по расстоянию до фокуса, словарь из voice-core Открыть →
концепция C · three.jsЛитеры GSR в объёме

Фирменные литеры из знака, выдавленные в объём прямо из SVG — бордовая матовая бумага с фаской, тёплый ключевой свет и лавандовый заполняющий, мягкая тень на подложке. При скролле литеры поворачиваются и едут навстречу, потом уходят вверх, уступая странице; курсор чуть наклоняет их и двигает свет. Blender для этого не понадобился — это тот же путь, которым можно потом пойти и в Blender для сложной анимации.

three.js через importmap, SVGLoader → ExtrudeGeometry, тени PCF Открыть →