Как делают вкусные сайты?

Недавно поймал себя на мысли: а как вообще делают все эти крутые 3D-анимации на сайтах, где можно покрутить модельку мышкой или подвигать что-то скроллом? Типа вот этого или вот этого

Расскажу, как сам это понял. В основе лежит WebGL — штука, которая напрямую общается с видеокартой и позволяет рисовать 3D прямо в браузере. Но в самом WebGL хер разберешься, поэтому обычно никто не пишет напрямую на нём. Вместо этого используют Three.js — такую библиотеку-надстройку. С ней уже всё проще: создал сцену, поставил камеру, закинул свет, подгрузил модель — и у тебя на экране готовая тридэшка.

Дальше встаёт вопрос: а как оживить эту сцену? Чтобы не просто стояло, а красиво двигалось, реагировало на скролл, меняло угол обзора при движении мышкой. Тут подключается GSAP — библиотека для анимаций. Она отвечает за плавность, тайминги и синхронизацию: камеры двигаются вместе со скроллом, объекты появляются и исчезают как по нотам, всё крутится и переливается.

И вот именно связка Three.js + GSAP даёт тот самый эффект, когда сайт не просто смотришь, а прям хочется «пощупать» и залипнуть. В общем, тот самый эмоциональный дизайн.

Не то, чтобы это практически применимое знание для продуктового дизайнера, по всегда полезно расширить кругозор и иметь хотя бы верхнеуровневое понимание, что и как устроено. Может потом пригодится, когда решите делать очень дорогие лэндосы на фрилансе 🤑
Поэтому вот вам еще небольшая библиотека реализованных WebGl анимаций с открытым исходным кодом, чтобы вдохновляться

Покидайте в комменты сайты, которые вам настолько нравятся, шо прям не оторваться. Интересно будет глянуть 👁

💬 Тултип