Воссоздал вихревую анимацию с главной страницы Midjourney — и выложил всё в open-source
Меня, как и многих, буквально загипнотизировала анимация на главной странице Midjourney. Этот бесконечный вихрь из промптов, плавное появление логотипа и тёплый ламповый CRT-эффект — выглядит невероятно стильно. Я подумал, что это был бы идеальный фон для одного из моих проектов, и полез в Google в поисках готового решения или туториала.
Результат? Ноль. Ничего похожего. Никто этого не делал, или, по крайней йней мере, не делился с миром.
Что ж, вызов принят. За пару вечеров я разобрал её на части и собрал заново на чистом JavaScript, без лишних зависимостей. Этот пост — для тех, кто любит красивые веб-анимации, ищет эффектный фон для своего сайта или просто хочет посмотреть, как можно подружить 2D-холст и WebGL-шейдеры.
Как это работает и что можно настроить?
Вся магия происходит в два этапа: сначала на 2D-канвасе создается сама текстовая анимация, а затем всё это прогоняется через WebGL для наложения ретро-эффектов.
Что самое крутое — всё можно кастомизировать под себя:
- Текст и скорость. Замените промпты Midjourney на цитаты, отзывы клиентов или ключевые фичи вашего продукта. Ускоряйте, замедляйте или меняйте направление вращения одной строчкой кода.
- Эффекты. В коде можно легко поменять цвета, добавить пульсацию или волновые искажения.
- CRT-фильтр. Хотите более или менее выраженный эффект старого монитора? Настройки искривления экрана, хроматического сдвига и виньетки тоже под рукой.
- Адаптивность. На мобильных устройствах анимация автоматически замедляется и упрощается, чтобы не сажать батарею и не тормозить.
Проект я назвал PromptVortex. Он абсолютно бесплатный и доступен под MIT-лицензией. Берите, используйте, модифицируйте как угодно.
Забирайте код на GitHub
В репозитории лежит всё необходимое и простая инструкция по запуску. Клонируете, запускаете локальный сервер — и магия у вас в браузере.
Ссылка на GitHub: https://github.com/Dizro/PromptVortex
Буду благодарен за звезду на GitHub, если проект окажется для вас полезным!
Что можно улучшить? Какие эффекты добавить? Может, у вас есть идеи, где ещё можно применить такую анимацию?
Возможно, этот опенсорс-проект пригодится кому-то для пет-проекта или даже коммерческого сайта. 🚀