Как создать анимацию, подобную данной?

Для упрощения анимации на сайте можно использовать следующий подход:

1. Упростить использование three.js: Если анимация требует использования three.js для создания и управления сценой, вам необходимо убедиться, что библиотека правильно настроена и интегрирована в проект. Это может включать в себя минимизацию или исключение неиспользуемых частей, оптимизацию рендеринга и избавление от лишних зависимостей.

2. Определение основных элементов анимации: Изучите код и определите основные элементы анимации, которые вы хотите сохранить. Это может быть сетка, движение мыши, освещение или другие. Отметьте их и убедитесь, что они не конфликтуют между собой.

3. Удаление неиспользуемого функционала: Удалите ненужные компоненты кода или библиотеки, которые не влияют на анимацию. Это может помочь упростить структуру проекта и избежать конфликтов между разными частями кода.

4. Упрощение движения мыши: Если движение мыши сложно настроено или не нужно полностью, вы можете упростить его. Например, вы можете ограничить движение только по горизонтали или вертикали, уменьшить скорость поворота или убрать влияние мыши на анимацию вообще.

5. Группирование и документирование кода: Разделите код на логические блоки и документируйте его. Это поможет другим разработчикам легче понять и изменить анимацию в будущем.

6. Тестирование и оптимизация: Проверьте, что упрощенная анимация работает должным образом. Оптимизируйте код и ресурсы, если это необходимо, чтобы достичь оптимальной производительности.

Общий подход состоит в том, чтобы идентифицировать основные элементы анимации и упростить их, удалив неиспользуемый или сложный функционал. Это позволит упростить структуру и управление кодом, что облегчит работу другим программистам над сайтом.

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

Подсказка: добавьте небольшую инерцию, чтобы невидимая точка медленно стремилась к положению курсора, создавая эффект резиновости. Затем анимируйте линии на основе координат этой невидимой точки. Таким образом, анимация будет более плавной и загадочной. Координаты невидимой точки в любой момент времени приближаются к текущему положению курсора на 80%, например:

X_точки = предыдущий_X_точки + (X_курсора - предыдущий_X_точки) * 0.8

Вот более подробное объяснение в данном ответе.