Ivan Bogachev

Там весь сайт - это по сути видео-презентация, где на каждом экране пользователю показывается новое видео. Фронтендерские навыки тут особо и не нужны.

Выбор видео в данном случае решает два вопроса - экономию бюджета и обеспечение качества:

• Все это может делать один дизайнер (+ опционально 3D-художник) в специализированных программах. Это быстрее, чем руками кодировать (быстро = дешево). Дальше мы просто вставляем результат в страницу. Соответственно не нужен фронтендер, понимающий в компьютерной графике (таких долго и дорого искать), не нужно воссоздавать визуально сложные и утвержденные заказчиком эффекты на фронтендерских технологиях (это просто боль, плюс сроки, и, опять же лишний бюджет).
  
• Вопросы производительности отсутствуют. В теории можно взять WebGL и рендерить все на устройстве пользователя. Но на самом деле рассчитывать хитрое освещение в реальном времени всегда проблематично - там куда ни плюнь будут вычислительно-сложные алгоритмы. Что делать с ноутбуками со встроенной графикой или с телефонами? Это вечный вопрос. Часто такие проекты горят именно на том, что на старте разработчики не осознают, насколько там на самом деле требовательные алгоритмы, и к дедлайну все безнадежно тормозит. Приходится сильно упрощать картинку, жертвовать качеством изображения в угоду производительности. Чтобы в это не вляпаться, презентации товаров рендерят заранее (можно несколько секунд презентации хоть всю ночь рендерить), сохраняют или в видео, или в набор картинок, и уже их показывают конечному пользователю. Это стандартная практика.
  

Такие вещи всегда лучше для начала проверять с помощью официального Schema Markup Validator + Rich Results Test от Google. Первый проверит, что все ок с синтаксисом (вне зависимости от поисковых систем), а второй - что конкретно Google может посчитать странным. В данном случае синтаксически все хорошо, но Google докапывается до отсутствующих position и говорит, что без них не будет эти данные использовать. В примере для itemListElement (во вкладке microdata) можно посмотреть, куда эти мета теги с position добавить. Вероятно вам стоит все ваши страницы прогнать через эти сервисы и посмотреть, что там еще не так.

Никакой Three.js тут не нужен. Ну то есть, конечно, никто не мешает сделать все это на WebGL и прикрутить здоровенный фреймворк сверху, но все же это будет слегка избыточным решением в большинстве случаев. Такое можно аргументировать только если весь сайт изначально так и делается на WebGL и это просто "один из" эффектов, которые туда нужно интегрировать.

В 99% остальных случаев подобные штуки делаются одной svg-картинкой, одним path, который рисуется в зависимости от положения мышки и размеров контейнера. Немного школьной геометрии, ограничение диапазона возможных смещений всего этого - и дальше можно до посинения играть с алгоритмом расчета смещения, до тех пор, пока реакция на мышку не начнет нравится. Там уже нет универсального рецепта, все от дизайна зависит. Можно линейно привязать к положению мыши. Это обычно выглядит скучно. Можно использовать какую-то функцию от расстояния до центра, чтобы сделать движения менее равномерными. В каких-то случаях делают полноценный эффект инерции, как верно подмечено в соседнем ответе. Там получаются более естественные движения (обычно все это является развитием гравитационных моделей). Есть совсем замороченный подход, когда используется моделирование системы пружин (для общего развития можно загуглить силовые алгоритмы визуализации графов). Там можно получить целый ряд занятных эффектов, которые часто оказываются в тему как раз в таких фонах, где какие-то штуки связаны между собой прямыми линиями. Ну и можно просто вдохновиться какими-то физическими явлениями и сделать что-то "по мотивам".

Вероятно вам нужно смотреть на что-то вроде pnpm. Этот инструмент как раз создает единое хранилище пакетов и потом ссылается на файлы в нем вместо скачивания всего по 100 раз.

Да, можно пропустить первое значение в 0%. Если почитать стандарт, то там прямым текстом написано, что эти значения, где расположить цвета на градиенте - не обязательные. Можно вообще все пропустить. Если они пропущены, то расположение цветов в градиенте восстанавливается по четкому алгоритму.

В целом ответы на подобные вопросы о тонкостях интерпретации CSS имеет смысл искать в стандартах.

Неоднородные плавные искривления никак не получится сделать в рамках CSS или SVG. Плюс волна трехмерная, поэтому изобретать что-то в 2d-канвасе будет непрактично и скорее всего сложно в плане производительности. Поэтому использование WebGL - это естественный выбор. Конкретные библиотеки/фреймворки не имеют значения, в конечном счете все такие волны сводятся к простой схеме:

1. Берем плоскость
   
2. На плоскость накладываем какую-нибудь красивую текстуру
   
3. Добавляем вершин побольше
   
4. В вершинном шейдере делаем какой-то генератор шума и используем значения из него чтобы двигать вершины туда-сюда в направлении, перпендикулярном плоскости
   
5. Опционально там же рассчитываем нормали для освещения
   
6. Играемся с коэффициентами до посинения, пока результат не начнет нравиться
   

В codepen я нашел интересный проект...

Это WebGL Fluid Simulation. И оригинальная ее версия на телефонах работает хорошо. Вы нашли какую-то из вариаций на тему этой штуки. Думаю для вас будет проще взять оригинал, а не отлаживать тот пример, который вы нашли.

Использование position: relative совместно со свойствами top, right, bottom или left смещает элемент относительно его естественного расположения на странице. Поэтому все работает так, как и должно. Ваш main естественным образом расположен в верхней части родителя и смещен на 0px. Ну то есть никуда не смещен.

Вероятно вы получите нужное вам поведение если будете использовать position: absolute.

через css хочу скрыть его, когда пуст

В такой формулировке можно обойтись без дополнительных классов:

.wishlist_products_counter_number:empty {
    display: none;
}

Это известный баг у масок в Firefox. Проявляется и с mask, и с clip-path. Суть проблемы в том, что маска применяется уже после трансформации, после поворота, и при расчете ее границ возникают сложности с округлениями до целого количества пикселей. Браузер не знает, в какую сторону лучше округлять. В результате для каких-то пикселей на границах маска применяется не так, как мы ожидаем, ее граница как бы смещается на 1px. Самый простой и безболезненный способ избавиться от проблемы в вашем конкретном случае - избавиться от масок. Нет маски - нет проблемы. Исходя из вашей задачи ничто не мешает использовать svg-иконки сразу, как есть, в виде обычных картинок, без нагораживания всей этой истории с белым квадратом, который потом обрезается.

нужно, чтобы строки при переносе начинались с отступом

В свойстве list-style не нужен inside. Форматирование "с отступом" - это форматирование, которое применяется по умолчанию. Просто не меняйте то, что и так работает.

пропорции 16:9

Ну так:

.whois-video {
    aspect-ratio: 16 / 9;
}

И да, это уже можно делать. Пора уже забыть эти хаки с padding.

На этом сайте используется какая-то из версий WebGL Fluid Simulation.

В таких штуках самое главное - это свести цвета на пересечениях линий. Просто вставить линии-градиенты на всю ширину-высоту таблицы картинками тут не прокатит т.к. пропорции ячеек могут меняться и цвета на пересечениях будут расходиться. Вариант наложить на всю сетку SVG-маску тоже отпадает по этой же причине - она будет расходиться с пропорциями конкретных ячеек и будет ломаться логика, в каких пределах должно происходить затемнение. Поэтому, вне зависимости от выбора CSS-свойств, все будет сводиться к одной и той же идее, что мы должны сделать границы для всех ячеек в центре стандартным образом, а для первой и последней колонки и первой и последней строки нарисовать кастомные границы. Как вариант:



Код с повторениями почти одного и того же, вероятно его можно сократить в какой-нибудь хитрый миксин, но конечная идея примерно такая.

P.S.: И тут, по хорошему, стоит уточнить у дизайнера, как он видит длину затемнения в процентах от длины ячейки, особенно когда они сильно отличаются по пропорциям. Здесь градиенты от края до края, но, возможно, что в вашем случае нужно делать градиент не от 0% до 100%, а от 0% до какого-то другого значения, возможно зависящего от размера шрифта, а дальше уже заканчивать одним цветом.

var video = document.querySelector('video');

У вас в body нет ни одного тега video, соответственно с помощью querySelector не находится ничего, переменная video равна null, и дальше все ломается. Добавьте тег video и все заработает.

В SVG условный transform-origin всегда находится в координатах (0,0) координатной плоскости. Его нельзя изменить. Если мы пытаемся задать его в CSS, то логика работы трансформаций в CSS входит в явный конфликт с логикой работы трансформаций в SVG, и там каждый браузер интерпретирует происходящее на свой вкус (тут есть старая, но все еще годная статья по теме). В последние годы, со всеми этими сменами движков у браузеров, вкусы начинают двигаться в одну сторону, но бардак все еще присутствует. Но всегда можно сделать старую добрую матрешку:

<!-- 90 = x + width, 168 = y + height - правый нижний угол книги -->
<g transform="translate(90, 168.5)">
    <g id="book">
        <rect class="fil0 str0" x="60" y="18.5" width="30" height="150" transform="translate(-90, -168.5)" />
    </g>
</g>

Убираем transform-origin из CSS, чтобы не было конфликтов, смещаем нужный центр трансформации в координаты (0, 0), применяем там трансформацию, смещаем обратно, где он должен быть.