Free stuff 0113.10.2026
Форма с глазами.
HTMLCSSJS[Из рилса @levizdev] — [Сделано Claude по одному промпту]
Форма входа, которая следит за курсором, закрывает глаза на пароле и грустит при ошибке. Сделана Claude по одному промпту.
01/ Prompt
Сделай форму входа одним HTML-файлом (HTML, CSS, JS, без библиотек). Персонаж: над формой — круглая «голова» с двумя большими мультяшными глазами. Поведение: зрачки плавно следят за курсором мыши; когда печатаешь email — глаза смотрят на текст и двигаются вслед за набором. Состояния: при вводе пароля глаза закрываются веками; если нажать «показать пароль» — один глаз подглядывает; неверный пароль (любой, кроме demo123) — грустные брови и лёгкое покачивание формы; верный пароль — глаза-улыбки, персонаж радуется. Стиль: фон #F4F1EA, текст #111111, главный акцент кобальт #1F2BE0, второй акцент оранжевый #FF5A1F, шрифт Unbounded для заголовка и Manrope для текста (Google Fonts), скругления 28px, чёрная обводка 4px, плоский дизайн без теней, плавные анимации 200–300 мс.
02/ Ready code
forma.html1 file · 21 KB
С телефона удобнее скопировать промпт. Файл — открывай на компьютере.
03/ How to run
- 01Скопируй промпт и вставь в Claude или ChatGPT — получишь свою версию.
- 02Или скачай готовый файл и открой его в браузере — работает сразу.
- 03Поменяй блок «Стиль» под свой бренд: цвета, шрифты, скругления.
Живое демо — подвигай курсорОткрыть ↗
Демо-пароль: demo123
Why it worked
Формула промпта.
01ПерсонажКто живёт в интерфейсе. Здесь — голова с двумя глазами над формой.
02ПоведениеКак он реагирует на действия: глаза следят за курсором и набором текста.
03СостоянияЧто меняется при вводе, ошибке и успехе: закрытые глаза, грусть, радость.
04СтильТочные цвета, шрифты, скругления и скорость анимаций — без этого будет «среднее по интернету».
Открыт для проектов
Нужна такая деталь на твоём сайте?
Промпт даёт хороший старт. Если нужно встроить в живой сайт, подружить с регистрацией и довести до продакшена — сделаю под ключ.