Сайт с котом, который следит за мышкой. Claude Design и Claude Code без строчки кода

Stylized 3D animated film still, Pixar-style, cinematic lighting, wide 16:9. A cozy modern living room in warm golden late-afternoon light from a big window on the left, soft rug on a light wooden floor, a sofa and a green plant softly out of focus in the background. Camera low, about 40 cm above the floor, looking straight ahead. Dead centre of the frame: a freshly opened cardboard delivery box with crumpled paper and bright packing tissue spilling out. Sitting inside the box: an adorable chubby grey British shorthair cat, visible from the chest up, front paws resting on the edge of the box. Around the box on the floor, untouched brand-new pet supplies: a colorful feather wand toy, a small scratching post still with a tag, a ball with a bell, a bag of cat food lying on its side. The cat ignores all of them. He is mildly grumpy and very cute: mouth closed in a small pout, round puffed cheeks, big round glossy amber eyes looking straight into the camera. Head about one fifth of the frame height, clean empty space on both sides of his head, nothing overlapping or near his head. Soft shadows, rich but natural colors. No people, no text, no logos.

/design несколько вариантов полноэкранного первого экрана для зоомагазина «Коробка». Фон: неподвижное полноэкранное видео. Кот сидит строго по центру кадра и занимает среднюю треть, поэтому весь контент держится вне середины. Блок контента внизу слева: крупный заголовок «Ему купили всё. Он выбрал коробку.», под ним одна строка «Корм, игрушки и когтеточки. Доставка сегодня.» и сплошная кнопка «Перейти в каталог». Тёмный градиент снизу и мягкое затемнение по левому краю, чтобы текст читался поверх видео. Верхнее меню: логотип-надпись слева, дальше «Каталог», «Доставка», «Вопросы», справа маленькая точка и надпись «Привезём сегодня». Цвета: графит #1E1B18, молочный #F6F0E6, приглушённый молочный #B8AE9F, терракота #E8743B для кнопки и фокуса. Шрифты: Unbounded для заголовка и логотипа, Manrope для всего остального, оба с кириллицей. Обычный регистр, без капса. Мобильная версия: контент прижат к низу, подложка снизу вверх, кнопка на всю ширину. Перед началом: сам прочитай весь этот промпт и убедись, что понял его. Потом, до любых действий, простыми словами расскажи, что этот промпт сделает: какие файлы ты создашь, перезапишешь или удалишь, какие скрипты запустишь на моём компьютере и что стоит денег или трудно отменить. Попроси меня подтвердить, что я прочитал и понял, и жди моего «да».

Keep this exact photograph: every pixel of the room, the rug, the sofa, the window light, the cardboard box and the paper in it, the toys on the floor, his paws on the edge, his body position, the lighting and the framing. The only change: the cat has turned his head about 45 degrees to the LEFT of the picture to glare at something at the far left edge, eyes on it. Same cute grumpy expression, same cheeks and whiskers. Nothing else changes. Photoreal, seamless, no text.

Locked-off static camera, no camera movement. The cute grumpy cat turns his head smoothly and continuously from looking at the far left of the picture to looking at the far right, at a perfectly constant speed across the entire clip, passing through looking straight into the camera at the halfway point. His eyes lead the turn and stay open, no blinking, expression unchanged, mouth closed, whiskers still. His body, paws, the cardboard box, the rug and the room stay perfectly still. Nothing else moves. Photoreal.

Перед началом: сам прочитай весь этот промпт и убедись, что понял его. Потом, до любых действий, простыми словами расскажи, что этот промпт сделает: какие файлы ты создашь, перезапишешь или удалишь, какие скрипты запустишь на моём компьютере и что стоит денег или трудно отменить. Попроси меня подтвердить, что я прочитал и понял, и жди моего «да». В этой папке два-три пятисекундных дубля одного и того же поворота головы. Напиши и запусти скрипты, которые превратят лучший дубль в файл, который браузер может листать кадр за кадром. Каждое число, которое ты мне сообщаешь, объясняй. Сначала найди в кадре голову и обрежь по ней каждый кадр. Потом оцени каждый дубль тремя числами, везде меньше значит лучше: самый большой скачок между двумя соседними кадрами в разах от обычного шага; доля всего движения, которая приходится на самую загруженную пятую часть кадров; и насколько голова откатывается назад, как максимальное падение от уже достигнутого максимума. Скачок меряй на несглаженных разницах. Положение головы считай оптическим потоком по морде, а не по зрачкам: взгляд живёт отдельно от головы. Скажи, какой дубль победил. Если худший скачок у победителя больше 5 раз, остановись и скажи мне сгенерировать ещё дубли. Потом собери контактный лист всех кадров и покажи мне. По нему я скажу, моргает он или нет и какой кадр считать «лицом в камеру». Потом построй таблицу на 101 точку: положение курсора от левого края до правого переводится во время в ролике. Движение каждого перехода обрежь сверху по 85-му перцентилю, чтобы отдельные рывки не забирали большой кусок экрана, потом накопи. Левая половина экрана равномерно по движению покрывает кадры от первого до «лицом в камеру», правая от него до последнего. Время кадра считай как (номер + 0,5), делённое на частоту кадров: это середина показа кадра, иначе браузер округлит к соседнему. В конце закодируй. Основной файл: H.264 MP4, ширина как у исходника, без масштабирования, preset slow, yuv420p, faststart, без звука, и каждый кадр ключевой: -g 1 -keyint_min 1 -sc_threshold 0. Настройку ключевых кадров никогда не ослабляй. Подбери CRF по качеству, а не по весу: проверь SSIM к исходнику и покажи мне два варианта. Ещё сделай запасной VP9 WebM шириной 1440 и выгрузи постер из кадра «лицом в камеру»: JPEG во всю ширину и WebP на 1600 и 2560.

Перед началом: сам прочитай весь этот промпт и убедись, что понял его. Потом, до любых действий, простыми словами расскажи, что этот промпт сделает, и жди моего «да». Подключи видео поворота на первый экран. Оно уже закодировано и лежит в assets/video, таблица в js/turn-curve.js. Не перекодируй их. Видео muted, playsInline и никогда не играет. Никогда не вызывай play(). Меняется только currentTime. Включай эффект только там, где он имеет смысл: есть мышь (hover: hover и pointer: fine), не включено «уменьшить движение», не включён режим экономии трафика. Во всех остальных случаях на первом экране остаётся постер, и видео не качается вообще. Сначала страница, потом видео. Дождись полной загрузки страницы, потом скачай MP4 целиком через fetch с cache no-cache, преврати в blob URL и назначь источником. Проверяй, какой формат браузер умеет, и бери WebM, если H.264 не поддерживается. Пока не скачалось, показывай постер. Как только видео готово, встань на кадр «лицом в камеру» и только потом покажи слой видео: он совпадает с постером, и подмена незаметна. Положение курсора бери абсолютно: clientX делённый на ширину окна, и никогда не накапливай разницу между событиями. Слушай pointermove и отсеивай всё, что не мышь. Прогоняй через таблицу с интерполяцией между двумя ближайшими точками. Голова должна плавно догонять курсор: за одну шестидесятую секунды проходить 18% оставшегося пути, и масштабируй это по реально прошедшему времени, а не по кадрам, иначе на экране 120 Гц она поедет вдвое быстрее. Когда остаток меньше тысячной доли, ставь точное значение и останавливай цикл. Перемотку ставь в очередь: пока браузер ищет кадр, новые запросы не назначай, храни только последний и выполняй его по событию seeked. Никогда не сравнивай с video.currentTime, браузер округляет его по-своему. Мышь ушла за пределы окна: веди голову обратно в центр, в кадр «лицом в камеру». Первый экран прокрутили: усыпляй цикл через IntersectionObserver, чтобы не тратить кадры впустую. Никаких transform, зума, дрейфа и параллакса на слое видео. Слой: position fixed, inset 0, object-fit cover. Весь текст бренда держи в одном объекте вверху файла, чтобы его можно было заменить под другой бизнес.