YouMind
Войти

Шаблон дизайна UI-морфинга с анимацией

Комплексный шаблон промпта для создания зацикленных UI-анимаций, где элементы плавно трансформируются между различными состояниями в такт музыке.

Промпт
<inputs> Спросите меня о: 8–12 состояниях UI, в которые должна превращаться фигура (например, кнопка, лоадер, плеер, слайдер, переключатель, табы, график, командная палитра, тост), чисто чёрно-белая схема или один акцентный цвет, и трек без авторских прав около 120 BPM (например, из Mixkit, бесплатный для коммерческого использования). </inputs> <direction> UI-анимация уровня Dribbble. Одна фигура, никаких склеек: каждое состояние — это тот же элемент, меняющий размер, радиус и цвет, а его содержимое меняется с лёгким размытием. Курсор управляет каждым изменением через реальные клики и перетаскивания. Светлый тёплый серый фон, чёрно-белые компоненты, один чистый UI-шрифт (Geist). Пружинные анимации повсюду, минимальное перерегулирование. Камера приближается так, чтобы каждое состояние заполняло кадр. Последний кадр идентичен первому, обеспечивая бесшовную петлю. Запрещено: пружинящаяся ease-кривая, взрывы частиц, свечения, градиенты на интерфейсных элементах, несогласованные обводки иконок, паузы, всё, что выглядит как шаблон. </direction> <structure> 120 BPM, 7 тактов, действие происходит на каждом бите. Кнопка → лоадер → галочка → динамический островок → музыкальный плеер с морфингом play/pause → перемотка прогресс-бара → он становится регулятором громкости, который растягивается при перетаскивании за максимум → переключатель щёлкает в такт → ручка превращается в индикатор активной вкладки → вкладки раскрываются в график, который рисуется сам, с тултипом при наведении → он сворачивается в ⌘K → ввод текста для фильтрации → Enter → тост → обратно к кнопке. </structure> <build> 1. Один HTML-файл, квадрат 1440x1440. Все стили вычисляются по времени внутри seek(t): никаких CSS-переходов, таймеров или состояния между кадрами. 2. Пружины — это замкнутые пошаговые отклики. Значение, которое часто меняет цель, представляет собой сумму одной пружины на каждое изменение, оставаясь чистой функцией времени. 3. Два края индикатора вкладок движутся по разным пружинам, поэтому передний край опережает задний. Тот же приём для ручки переключателя. 4. Перетаскивание — прямое управление: пока курсор удерживается, значение вычисляется из его позиции. При отпускании оно возвращается пружиной с текущей точки. 5. Проанализируйте трек с помощью numpy для определения сетки битов и начните с сильной доли. Разместите каждый звуковой эффект UI по измеренным пикам. 6. Рендеринг через Playwright: 4 субкадра на кадр, смешивание с ffmpeg tmix для motion blur при 60fps. 7. Отрендерьте по одному кадру на бит перед полным рендером. Исправьте всё, что не попадает в сетку, выглядит тесным или трудным для чтения. </build> <gotchas> Никогда не используйте will-change для элементов, масштабируемых камерой, иначе текст будет размытым. Текст, меняющийся внутри морфующего контейнера, требует собственного времени появления и исчезновения, иначе произойдёт наложение. Сделайте последний кадр идентичным первому, включая позицию и скорость курсора, иначе петля будет дёргаться. </gotchas> <start> Спросите меня о входных данных, затем покажите список состояний на сетке битов, прежде чем писать код. </start>

Как использовать этот промпт

  1. 1

    Скопируйте полный промпт выше.

  2. 2

    Откройте платформу, поддерживающую Claude Opus 5.5, например YouMind, и вставьте промпт.

  3. 3

    Замените объект, стиль или детали в соответствии с вашей идеей, а затем создавайте.

Это бесплатный AI-промпт из библиотеки YouMind. Изучите тысячи других промптов видео, которые можно бесплатно копировать и адаптировать.

Изучить больше промптов видео

Другие функции промптов

Библиотека AI

Поиск AI-промптов

Позвольте AI искать среди десятков тысяч промптов. Фильтруйте по модели, временному диапазону, ключевым словам и сортируйте по вовлеченности — просмотрам, закладкам, репостам и многому другому.

Инструменты зрения

Изображение в промпт

Превратите любую фотографию в подробный AI-промпт для изображения. Бесплатный конвертер изображений в промпты анализирует композицию, стиль и освещение, чтобы вы могли воссоздать любой образ за секунды.

Создано для творцов. Бесплатно навсегда.

YouMind — это ИИ-копилот для творчества, которому доверяют миллионы создателей по всему миру. Каждый промпт здесь отобран так, чтобы помочь вам творить лучше и быстрее.

Изучить другие промпты