Зацикленный UI-морфинг под управлением кликающего курсора
<direction> Сделай квадратное видео длиной 14 секунд (1440x1440, 30 кадров/с): бесшовный UI-моушн-луп, всё нарисовано, без склеек. Одна скруглённая форма постоянно перетекает из одного компонента интерфейса в другой: кнопка, загрузчик, галочка, пилюля-остров, музыкальный плеер, ползунок громкости, переключатель, вкладки, график, пилюля поиска, командная палитра, тост и снова кнопка. Курсор на экране управляет каждым изменением и по-настоящему кликает и перетаскивает. Последний кадр должен совпадать с первым, чтобы видео зацикливалось. Стиль чистый и спокойный: лавандовый фон, компоненты глубокого чернильного и белого цвета и один аккуратный UI-шрифт. Единственный цвет даёт мой логотип, который заменяет обложку альбома. Почти на каждую долю происходит какое-то событие, темп около 120 BPM. Избегай свечения, градиентов на элементах интерфейса, частиц, пружинящей анимации, склеек и голоса. Все слова на экране ниже — примеры, замени их моими. Держи каждое примерно такой же длины, чтобы вёрстка не поплыла. </direction> <structure> 0.0-0.6 с: чернильно-тёмная пилюля-кнопка «Open app» (около 640x200 px, белый текст 62 px). Курсор плавно въезжает снизу справа и нажимает её на 0.46 с, кнопка сжимается до 96%. 0.6-1.25 с: она сжимается в круг 230 px с белой вращающейся дугой, затем белая галочка рисуется сама. 1.25-1.75 с: круг вытягивается в пилюлю-остров (около 860x210) с моим логотипом в виде маленького скруглённого квадрата слева и пятью подпрыгивающими белыми полосками волны справа. 1.75-3.7 с: остров раскрывается в чернильно-тёмную карточку плеера (около 990x630, скругление 72 px). Логотип вырастает в обложку 224 px как общий элемент, рядом с названием «Ideas in motion» и «[your site]» мягким лавандовым цветом. Ниже тонкая белая полоса прогресса с ползунком, «01» и «03» по краям и значки назад / пауза / вперёд. Курсор нажимает паузу, она через быстрое размытие превращается в play, затем нажимает обратно на паузу. Потом берёт ползунок, он увеличивается на 25%, и перетаскивает его примерно с трети почти до конца. 3.7-5.25 с: карточка схлопывается в широкую пилюлю громкости (около 1070x186) со значком динамика. Курсор тянет уровень почти до нуля, обратно вверх и за максимум. Вся пилюля растягивается вправо, как резина, примерно до 170 px, затем при отпускании пружинит назад с одним небольшим покачиванием. 5.25-6.25 с: она превращается в переключатель (около 520x260). Ползунок появляется серым посередине, затем переключается: вкл, выкл, вкл, выкл, каждый раз с нажатием. Вкл — чернильно-тёмная дорожка с белым ползунком справа. Выкл — бледная дорожка #E9E4F2 с ползунком слева. 6.25-7.25 с: ползунок вырастает в чернильно-тёмный индикатор белой панели вкладок «Pick» / «Describe» / «Export». Курсор кликает «Describe», затем «Export». Индикатор вытягивается вперёд и догоняет, а подпись под ним становится белой. 7.25-9.7 с: панель вкладок раскрывается в белую карточку с графиком (около 1100x840), вкладки уходят наверх, а индикатор становится маленькой пилюлей. Большое жирное число прокручивается «01», «02», «03» с лёгким размытием над подписью «Refine in words, then export». Тем временем чернильно-тёмная линия рисуется слева направо примерно за полсекунды поверх лавандовой области и четырёх тонких линий. Курсор проводит вдоль линии с чернильно-тёмной подсказкой «01», «02», «03» по ходу, за ним следуют точка и пунктирная направляющая. Клик по «Describe» прокручивает число до «02» с подписью «Describe your idea», а кривая перетекает в более низкую и волнистую. 9.7-10.1 с: карточка схлопывается в белую пилюлю поиска со значком поиска, «Edit in words» и «⌘K» справа. 10.1-11.75 с: пилюля раскрывается в командную палитру (около 1060x830). Вверху строка поиска с подсказкой «Describe your idea» и мигающей кареткой, затем тонкая линия. Далее пять строк, появляющихся с интервалом 40 мс, у каждой лавандовая плитка со значком: «Pick a template ⌘N», «MP4 export ⌘E», «Ideas in motion», «Live preview», «Your AI motion designer ↵». Слово «motion» печатается по одной букве на нажатие, примерно через 0.1 с, слегка неравномерно, каретка при наборе не мигает. Набранное слово должно совпасть ровно с двумя строками. Несовпавшие строки растворяются в размытии, две подходящие сдвигаются вверх, панель пружинисто становится ниже, и камера приближается. Лавандовая подсветка стоит на первой совпавшей строке, переходит вниз на «Your AI motion designer» и становится чернильно-тёмной по Enter. 11.75-12.6 с: палитра через более светлый оттенок складывается в чернильно-тёмный тост (около 970x180) с белой галочкой и «Your AI motion designer», а вид плавно возвращается. 12.6-14 с: текст тоста размывается в «Open app», и пилюля сжимается обратно в исходную кнопку. Она держится до конца, курсор покоится внизу справа, так что последний кадр совпадает с первым. </structure> <composition> Фон лавандовый #F0EDFF с мягким белым свечением чуть выше середины и слабой виньеткой. Компоненты глубокого чернильного цвета #1C0B5D или белые панели #FFFFFF. Приглушённый текст #6B6385, тонкие линии и выключенное состояние переключателя #E9E4F2. Все панели отбрасывают мягкие длинные тени, подкрашенные чернилами. Единственные цветовые акценты — цвета моего логотипа, здесь розовый #FB2D89 и оранжевый #FE9117, так что используй цвета своего логотипа. Логотип появляется как маленький скруглённый квадрат острова и как обложка плеера. Весь текст набран шрифтом Geist, мелкие цифры плеера — Geist Mono. Курсор — почти чёрная стрелка (#0D0B1E) с белой обводкой. Всё остаётся по центру холста. </composition> <techniques> Одна форма меняет ширину, высоту, радиус скругления и цвет на жёстких пружинах: около 0.25 с на успокоение, перелёт не более 1%. Всё, что внутри каждого состояния, появляется и исчезает за 0.1 с с размытием 10 px, чтобы текст не накладывался, пока контейнер меняет размер. Смена текста, например пауза на play и текст тоста обратно на «Open app», тоже идёт через быстрое размытие. Курсор движется по плавным кривым и уменьшается примерно на 14%, пока кнопка удерживается. Логотип переходит из острова в обложку плеера как общий элемент. Пилюля громкости растягивается как резина, когда её тянут за максимум, затем пружинит назад с одним небольшим покачиванием. Передний край ползунка переключателя идёт на более жёсткой пружине, чем задний, так что ползунок растягивается в движении. Индикатор вкладок так же вытягивается вперёд и догоняет. Числа графика прокручиваются с лёгким размытием, линия рисуется слева направо примерно за 0.5 с, а кривая перетекает в новую форму при смене вкладки. Строки палитры появляются с интервалом 40 мс, а отфильтрованные строки растворяются в размытии. Камера неподвижна, кроме мягкого приближения на 17%, пока палитра короткая, и возврата, когда формируется тост. </techniques> <music> Создай бодрый инструментальный рокабилли / кантри-рок трек в ми-бемоль мажоре, около 120 BPM, ровно по длине видео. Грув «бум-чик»: бочка на долю, малый барабан на восьмых между ними, твангующие соло-партии гитары поверх баса и ударных. Начинается на полной энергии с первого кадра и держится ровно. Размести действия курсора и морфинги по ритмической сетке. Примерно на 13.4 с группа останавливается на одном ударе с крэшем и даёт ему звучать, чтобы луп замкнулся в такт. </music> <sound> Звуковые эффекты, созданные под картинку, поверх музыки: - Каждое нажатие курсора щёлкает коротким ярким тиком с небольшим тональным звоном. Каждое отпускание даёт более мягкий и высокий тик. Оба слегка панорамируются вслед за курсором. - Крошечный блип при появлении галочки. - Обратный тарелочный нарастающий звук перед кликом по вкладке «Export». - Мягкий низкий бум, когда открывается карточка графика. - Поиск печатается на печатной машинке: две клавиши для ⌘K, один щелчок на каждую букву, более лёгкая клавиша для стрелки вниз и тяжёлый Enter с небольшим звонком машинки. - Вжик возврата каретки, когда палитра складывается в тост, заканчивающийся глухим ударом, когда тост садится. - Глубокий бум и всплеск под финальную остановку. Верхи музыки ненадолго проседают под каждый клик и нажатие клавиши, чтобы они были слышны. Без голоса. Микс около -14 LUFS, true peak ниже -1 dBTP. </sound> <references> Плавные UI-луп-морфинги из одной формы, как в презентациях интерфейсов продуктов и переходах в стиле Dynamic Island, где один контейнер постоянно перетекает в следующий компонент одним непрерывным кадром. </references>
