- Claude
- 1:1
- Промт клуба
Промт для Claude: анимация интерфейса продукта с курсором
Анимированный UI продукта в формате 1:1 с курсором, кликами и перетаскиванием. 12 состояний на битах 120 BPM с пружинной анимацией и зацикливанием.
Ролик показывает анимированный интерфейс продукта в формате 1:1. Курсор управляет последовательностью: клики, ввод, перетаскивание. 12 состояний UI сменяются на каждом бите в ритме 120 BPM. Анимация использует пружины, размытие и зацикливание.
Вставьте промт в Claude Code. Запросите у пользователя продукт, URL, 8–12 состояний UI, данные, цвета, шрифты, форматы. Для адаптации замените states, данные и цвета.
Начало промта
<inputs>
Ask me for:
• my product + URL
• 8–12 UI states that tell its story
• the real data shown in each state
• brand colors + fonts + accent color
• required formats (1:1, 16:9, 9:16)
</inputs>
<rules>
One HTML file. One canvas
One draw(t) function
No CSS transitions
No timers…Полный промт — в клубе SAMI. Там же генерация в один клик и вся библиотека клубных промтов.
Открыть в клубеИз чего собран промт
- запрос данныхЗапрашивает у пользователя продукт, URL, состояния UI, данные, цвета, шрифты, форматы.
- правила анимации (часть 1)Один HTML-файл, один canvas, одна функция draw(t), без CSS-переходов и таймеров.
- правила анимации (часть 2)Один элемент меняет размер, радиус и цвет, курсор управляет кликами, вводом и перетаскиванием, реальные данные.
- структура сценСетка 120 BPM, на каждый бит смена состояния: логотип, кнопка, поле, загрузчик, пин, глобус, совпадения, вкладки, RSVP, поиск, логотип.
- принципы движения (часть 1)Пружинные функции с минимальным перелётом, суммирование пружин, контент входит после морфинга контейнера.
- принципы движения (часть 2)Короткое размытие, не затемнять в акцентный цвет, растягивать индикаторы вкладок.
- принципы движения (часть 3)Камера заполняет кадр, последний кадр равен первому для зацикливания.
- экспорт (часть 1)Сначала рендер одного кадра на бит для проверки, затем полный рендер в headless Chrome 60fps с motion blur.
