CodeariaAcademy

Spline

Редактор 3D в браузере и открытая библиотека готовых интерактивных сцен: роботы за курсором, жидкое стекло, частицы. Ремикс в два клика.

Сами не запускали: описание по документации и репозиторию.

В цифрах

просмотров у распадающейся типографики
лицензия файлов сообщества
в месяц, платный тариф без водяного знака

Что это

Spline это редактор 3D в браузере, но главная его ценность не в редакторе, а в библиотеке. В разделе Community лежат сотни готовых интерактивных сцен от дизайнеров со всего мира: робот, поворачивающий голову за курсором, hero-секция из рифлёного стекла, кубики с hover-эффектом, распадающаяся типографика, потоки частиц. Это решает частую проблему лендинга: хочется живой 3D-визуал, а своего 3D-дизайнера нет.

Интереснее всего то, как сцену забирают себе. Кнопка Remix открывает вашу копию, где вы меняете цвета, текст и скорость анимации под свой бренд, а экспорт отдаёт тег, который встаёт в страницу двумя строками. У каждой работы виден автор и число просмотров, так что сразу понятно, какие сцены люди реально берут в дело.

Как устроено

Communityбесплатно
Полки по задачам: Interactive Website, Brand & Marketing, 3D Logos, 3D Icons, Particles, Materials, 3D Mockups.
Remixбесплатно
Открывает вашу копию сцены: меняете цвета, текст и скорость анимации в редакторе.
Export
Отдаёт тег, который вставляется в страницу двумя строками.
@splinetool/react-splineMIT
Компонент для React; есть интеграции с Webflow, Framer, Wix, Next.js, Swift и Kotlin.

Знать до установки

На бесплатном тарифе веб-экспорт идёт с водяным знаком; снимает его платный тариф от 12 долларов в месяц.
CC BY 4.0 разрешает менять сцены и использовать их в коммерческих проектах, но автора исходной работы нужно указать.
3D остаётся тяжёлой графикой: подключайте сцену лениво, когда блок доскроллили до экрана, и проверяйте на обычном телефоне.

Комментарии