Библиотека 3D-анимаций Spline: готовые сцены для лендинга

Живая трёхмерная сцена на первом экране пятнадцать лет была признаком того, что у проекта есть бюджет на студию. WebGL работает в браузерах с 2013 года, но путь от «хочу что-то красивое на главной» до результата шёл через Three.js: сцена, камера, свет, материалы, цикл рендера — всё руками и кодом.

Сейчас этот путь можно просто не проходить. Причём дело даже не в редакторе Spline, где 3D собирают мышкой, как макет в Figma. Дело в том, что вокруг редактора выросла библиотека, куда дизайнеры со всего мира выкладывают свои сцены — и отдают их другим.

Именно поэтому мы кладём Spline в каталог. Это не очередной инструмент, который нужно осваивать неделю, а полка, с которой можно взять готовое сегодня.

Что там лежит

Библиотека разложена по полкам, и названия сразу говорят, для чего вещь: Interactive Website, Brand & Marketing, 3D Logos, 3D Icons, Particles, Materials, 3D Mockups, Product Design. У каждой работы виден автор, число просмотров и лайков — сразу понятно, что действительно пошло в дело.

Вот работы, которые собрали больше всего внимания к концу августа 2026. Посмотрите на названия — это готовые ответы на задачи, которые встают на каждом втором лендинге:

Сто семьдесят пять тысяч просмотров у «робота, следящего за курсором» — это не абстрактная популярность. Это столько раз люди искали ровно тот эффект, который вы, возможно, полдня собирались верстать руками.

Отдельно стоит зайти в Particles и Materials. Там лежат не целые сцены, а заготовки — потоки частиц, жидкое стекло, металл, голография. Их удобно ставить фоном под обычный текстовый блок: страница оживает, а верстать при этом ничего не нужно.

Как забрать сцену себе

1. 1

   Найдите

   Фильтры Trending, Popular и New плюс категории. Для лендинга начинайте с Interactive Website — там заготовки именно под первый экран.

2. 2

   Нажмите Remix

   Открывается ваша собственная копия. Оригинал остаётся нетронутым, ломать в копии можно что угодно.

3. 3

   Перекрасьте под себя

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

4. 4

   Поставьте на сайт

   Экспорт отдаёт готовый тег. Для React есть отдельный компонент, для Webflow и Framer — свои интеграции.

Встраивание — буквально две строки:

<script type="module"
  src="https://unpkg.com/@splinetool/viewer@2.0.14/build/spline-viewer.js">
</script>
<spline-viewer
  url="https://prod.spline.design/<id>/scene.splinecode">
</spline-viewer>

Для React есть обёртка @splinetool/react-spline — под лицензией MIT, 1 416 звёзд на GitHub, больше 700 тысяч установок в месяц. Она делает то же самое, только компонентом.

Это правда можно использовать

Приятная часть: файлы сообщества опубликованы под CC BY 4.0. Лицензия разрешает менять их и использовать в коммерческих проектах — то есть сцену из библиотеки можно смело нести на клиентский лендинг.

Единственное условие — указать автора. Имя и ссылка на исходную работу в подвале или в разделе «сделано на» закрывают вопрос полностью. Тридцать секунд, и вы одновременно соблюдаете лицензию и говорите спасибо человеку, который сэкономил вам день работы.

Если захочется собрать своё

Библиотека — самый быстрый вход, но редактор рядом и работает в том же браузере. Внутри есть агент, который правит сцену текстовыми командами: сказать «убери фон и замедли вращение» быстрее, чем искать нужную панель.

Начать можно бесплатно: библиотека, ремиксы и редактор доступны сразу. Платный тариф начинается с 12 долларов в месяц при годовой оплате — он снимает водяной знак с веб-экспорта и открывает безлимитные файлы.

Два совета из практики

Коротко

Spline интересен не тем, что в нём можно сделать 3D, а тем, что 3D для вас уже сделали. Сотни интерактивных сцен — роботы за курсором, жидкое стекло, частицы, живая типографика — лежат открыто, ремиксятся в два клика и переносятся на сайт двумя строками кода. Лицензия CC BY 4.0 разрешает брать их даже в коммерческие проекты.

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