Студия и инструмент в одном окне
MOTIONKILN — независимая студия экспериментального веб-дизайна. Мы делаем анимированные фоны, абстрактные формы и световые эффекты. Галерея на этом сайте — наши работы, а редактор — тот самый инструмент, которым они собраны. Он открыт для всех и не требует регистрации.
Как это устроено
Каждая основа — это шейдер: небольшая программа, которую видеокарта выполняет для каждого пикселя кадра. Всё, что вы видите, считается на вашем устройстве. Сервер отдаёт только страницы и скрипты, а картинки, видео и файлы создаются в браузере и никуда не уходят.
Чтобы анимация не тормозила на слабых устройствах, движок следит за частотой кадров. Если она падает ниже сорока, он понижает разрешение рисования, а когда ресурсов хватает, возвращает назад. Экспорт всегда делается в полном размере.
Время во всех сценах устроено одинаково: анимация зависит от фазы, которая за один цикл проходит полный круг. Поэтому любую сцену можно записать в видео, которое замыкается без шва, а длина петли зависит только от скорости.
Что умеет экспорт
| Формат | Что получится | Ограничения |
|---|---|---|
| PNG | Кадр в рамке 16:9, 3:2, 1:1, 4:5 или 9:16, до 3840 пикселей по длинной стороне. | Очень большие кадры тяжелы для слабых видеокарт: браузер может отказаться их рисовать. |
| WebM | Зацикленное видео 720p или 1080p, 30 или 60 кадров в секунду, от одной до трёх петель. | Запись идёт в реальном времени, вкладка должна оставаться активной. В Safari формат зависит от версии. |
| HTML | Один файл с движком и сценой внутри. Работает без интернета. | Фон занимает всё окно. Чтобы встроить его в страницу, подключите файл через iframe. |
| JSON и ссылка | Все параметры сцены, которые можно сохранить, передать или загрузить назад. | Ссылка содержит сцену целиком, поэтому она длиной в несколько сотен символов. |
Вопросы
Нужна ли регистрация?
Нет. Ни регистрации, ни входа, ни оплаты. Сайт статический: у него нет базы данных, аккаунтов и серверной части, которая принимала бы ваши данные.
Где хранятся мои пресеты?
В локальном хранилище вашего браузера. Если очистить данные сайта, они пропадут. Всё важное сохраняйте в JSON или копируйте ссылку на сцену: она содержит все параметры.
Почему картинка иногда становится мягче?
Так движок разгружает видеокарту. Если кадров в секунду меньше сорока, он снижает внутреннее разрешение, а при запасе возвращает его. Экспорт PNG и видео это не затрагивает.
Как поставить такой фон на свой сайт?
Скачайте HTML-фон в разделе «Экспорт» редактора и положите файл на свой сайт. Подключите его как iframe под остальным содержимым:
<iframe src="/bg/fon.html" title="" tabindex="-1" aria-hidden="true" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1"></iframe>
Можно ли получить GIF?
Редактор записывает WebM, потому что GIF весит в десятки раз больше и теряет цвета. Если без GIF не обойтись, сконвертируйте ролик, например так:
ffmpeg -i loop.webm -vf "fps=24,scale=720:-1" loop.gif
Ничего не запускается. Что проверить?
Нужен браузер с WebGL2: Chrome и Edge современных версий, Firefox, Safari 15 и новее. Убедитесь, что в настройках браузера включено аппаратное ускорение. На очень старых видеокартах поддержки может не быть.
Чьи это работы и что внутри?
Все основы и композиции созданы внутри проекта. Готовые библиотеки, чужие картинки и видео не использовались: движок написан на чистом WebGL2. Шрифты Geologica, Cormorant и JetBrains Mono распространяются по лицензии SIL Open Font License и лежат на этом же сервере.