На каких технологиях создан сайт сериала тьма?

Question

[Николай Алексеев]

Всем доброго времени суток! Нужен совет опытных фронтэндеров.
Есть сайт ссылка
Крайне любопытен с точки зрения визуальной составляющей.
Мне бы хотелось понимать, посредством каких технологий он был сделан.
Я могу лишь предполагать, что это какой-то JS фреймворк (React, Angular & ect.) но не факт. Вполне возможно, что это всё на ванильных технологиях написано без применения библиотек и фреймворков.
Буду благодарен за любую подсказку

Comments

[WbICHA]

Насчёт библиотек не знаю, но используется просто canvas 2d.

[Алекс Глебов]

https://www.awwwards.com/sites/dark-official-netfl...
vue, webgl

[Юрий]

Судя по router-link-exact-active в классах, это Vue. Но транзишен в боковом меню точно не стандартный, да и вообще Vue там глубоко зарыт )

Answer 1

[Ivan Bogachev]

Крайне любопытен с точки зрения визуальной составляющей.
Мне бы хотелось понимать, посредством каких технологий он был сделан.

Не глядя в код, можно предположить использование следующих технологий:

1. Волны абстрактные и на фотографиях, шум на фоне - WebGL, шейдеры. Вода на первом экране - скорее всего моделируется как идеальная жидкость, волны на фотографиях - чисто геометрические.
   
2. Обведение текста в овал, трилистник с пунктиром, стрелки на карте - SVG, рисование линии по такому принципу.
   
3. Плавные переходы между экранами можно делать по-разному, даже забытый модными фронтендерами pjax будет к месту. Можно познакомиться с barba.js - это если не самый популярный, то один из популярных инструментов для работы с плавными переходами. Можно использовать роутеры из SPA-фреймворков, не принципиально. Самое сложное здесь - все синхронизировать.
   
4. Карта с персонажами - это может быть обычная верстка, подложенная под канвас с шумом. Самый простой вариант.
   
5. Есть небольшое покачивание элементов вслед за мышкой, логично предположить, что это банальная CSS-трансформация на mousemove.
   
6. Рисование дуг из точек - это может быть либо SVG, как в п.2, только эта линия будет маской, либо можно это строить как графики.
   
7. Ну и немного стандартных CSS-анимаций там тоже есть.
   

Дополнительные библиотеки здесь - дело вкуса, можно и на ванильном JS все сделать, разве что роутер я бы взял готовый. Вся соль в визуальных эффектах, а для них готовых решений не будет, если работа будет строиться по принципу "сначала придумать, потом сделать".