сайты на Claude@mama_mozg
Промты вирусных сайтов для Claude
5 сайтов, от которых не оторвать глаз: частицы, 3D, помехи старых телевизоров.
Копируешь промт → вставляешь в Claude → сегодня вечером у тебя такой же сайт. И ты переделываешь его под себя.
Без кода. Без дизайнера. Нужен только Claude.
Его своим
01Копируй
Жми «Скопировать промт» под любым сайтом. Копируется весь промт целиком — так и надо.
02Собери
Открой claude.ai, новый чат, вставь промт и отправь. Через пару минут справа появится готовый сайт — его уже можно листать.
03Переделай
Поменяй всё в [квадратных скобках]: название, тексты, цвета, услуги. Или возьми бонусный «промт-переделку» — он сам перепишет сайт под твою нишу.
04Запусти
Скачай файл index.html. Открой двойным кликом — сайт работает прямо на компьютере. Чтобы дать ссылку клиентам, выложи его на хостинг — как это сделать, ниже.
Где лучше собирать?
В Claude в браузере — проще всего: сайт сразу виден в окне справа.
В Claude Code — если хочешь, чтобы файл сам сохранился в папку на компьютере.
Сложные 3D-сайты лучше собирать на самой сильной модели Claude из доступных тебе.
Пять сайтов. Пять промтов.
01/05Auralisстудия · облако частиц меняет форму
02/05Brewnsкофейня · 3D-стакан и часы из айс-кофе
03/05Codescanпродакшн · комната ретро-телевизоров
04/05Dantoraклиника · ДНК из зелёной пыли
05/05EvolveИИ-стартап · голова из светящихся точек
способ 2Сайт на видеоСгенерируй видео в Higgsfield — сайт поверх соберёт Claude
01/05
Auralis
Тысячи светящихся точек на твоих глазах становятся крестом, рукой, волной и деревом. Листаешь — и форма меняется. Ощущение дорогой студии с первого экрана.
// ЧТО ПОДГОТОВИТЬ
Ничего. Сайт целиком рисуется кодом. Придумай только название и 4 услуги.
ПРОМТ53 строки · вставляй целиком
ПРОМТ 01/05 · AURALIS — сайт студии, где облако светящихся частиц меняет форму при прокрутке Ты — креативный фронтенд-разработчик уровня Awwwards. Собери ОДИН файл index.html: HTML, CSS и JS внутри, без сборщиков. Сайт должен открываться двойным кликом и работать в окне предпросмотра Claude. Дай полный код целиком, без сокращений и «...». ТЕХНИКА (иначе будет белый экран) - three.js только как ES-модуль через importmap: "three": "https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js". Старый build/three.min.js не используй — его больше нет. - GSAP 3.12.5 и ScrollTrigger: <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"> и .../dist/ScrollTrigger.min.js. Плавная прокрутка: https://cdn.jsdelivr.net/npm/lenis@1.1.20/dist/lenis.min.js, свяжи её с ScrollTrigger. - Шрифт Inter 300 и 400 с Google Fonts (с кириллицей). - Никаких внешних картинок и файлов: все формы частиц рисуешь кодом. БРЕНД (замени на своё) Название: [Auralis] · чем занимается: [студия дизайна и анимации] · кнопка: [Обсудить проект] · контакт: [hello@auralis.studio] Язык текстов на сайте: [русский]. Ниже тексты в двух вариантах: RU / EN. СТИЛЬ - Фон — графитовый градиент: центр #4E5662, середина #2E3641, края #15171E. Сверху справа 3 косых луча света (25°, белые, прозрачность 0.10), медленно «дышат». - Поверх всего — зерно: canvas 256×256 со случайным шумом, обновление 12 раз в секунду, opacity 0.06, pointer-events: none. - Крупные слова — Inter 300, ЗАГЛАВНЫЕ, letter-spacing 0.04em, белые. Мелкие подписи — Inter 400, 11 px, заглавные, трекинг 0.12em, rgba(255,255,255,.55). - Шапка 48 px, прозрачная: слева [Работы · Студия · Процесс], по центру логотип [Auralis] между двумя линиями по 60 px, справа [Журнал · О нас · Написать] (последнее подчёркнуто). ЧАСТИЦЫ — ГЛАВНОЕ - THREE.Points, 16 000 частиц, свой ShaderMaterial, AdditiveBlending, depthWrite false. Размер 2.5–6 px (×devicePixelRatio, не больше 2), 3 % частиц — крупные «бусины» 8–12 px. - Частицы СВЕТЯТСЯ, как бенгальский огонь на тёмном фото: яркое белое ядро + мягкий ореол (в фрагментном шейдере alpha = smoothstep(0.5, 0.0, r) + 0.4·exp(−r·8)). На тёмном фоне форма должна быть ярче всего на экране. - Цвет: 55 % частиц сиреневые #E7B8FF, 45 % белые; своя фаза мерцания: яркость = 0.7 + 0.3·sin(time·2 + seed·6.28). - Каждая форма занимает 55–65 % высоты экрана. В каждой секции форма сначала собирается (первые 30 % прокрутки секции), потом стоит собранной и только в последние 30 % рассыпается в следующую — чтобы на середине секции форма всегда была целой. - На светлой сцене (занавес) частицы переключаются на NormalBlending и становятся тёмно-графитовыми #3A3F48 с сиреневым #B98AD9 — чтобы оставаться видимыми. - Пять форм. Каждую рисуй на скрытом canvas 512×512 белым, бери случайные точки, где альфа > 0.5, z — случайный от −30 до 30: 1) крест «✕» из двух толстых скруглённых брусков; 2) лента — 3 петли кривой Безье толщиной 6 px, растянутые на всю ширину экрана; 3) раскрытая ладонь с пятью пальцами (скруглённые прямоугольники + овал ладони); 4) волна-занавес — синусоида по диагонали, полоса высотой 35 % экрана; 5) дерево-бонсай: изогнутый ствол и 5–6 облаков-крон из кругов. - Переход между формами по прокрутке: позиция = mix(A, B, smoothstep(прогресс)) + завихрение (curl noise или сумма синусов), сила которого = sin(прогресс·π)·40 — в середине перехода частицы разлетаются искрами и собираются снова. Считай всё в вершинном шейдере (атрибуты posA, posB, uniform uProgress), не в JS-цикле. - Ладонь — только белые частицы, остальные формы — смесь с сиреневым. - Вся форма покачивается: rotation.y = sin(t·0.3)·0.2. Курсор отталкивает частицы в радиусе ~90 px, они пружиной возвращаются. - За формой — тонкая сетка-«стекло» 320×440: линии rgba(255,255,255,.08) через 16 px, полупрозрачная панель. СЕКЦИИ (каждая 100vh, ScrollTrigger со scrub: 1, частицы — в fixed canvas на заднем плане) 1. Первый экран. Старт: частицы разлетаются из центра на весь экран и за 1.2 с собираются в крест. Слева по центру [ВООБРАЗИ] / [IMAGINE], справа [ВОПЛОТИ] / [MANIFEST], 40 px. Внизу слева 4 плашки в 2 ряда (рамка 1 px rgba(255,255,255,.25), радиус 3 px, 11 px): [Генеративный ИИ · Моушн-системы · 3D в реальном времени · Миры брендов] / [Generative AI · Motion Systems · Realtime 3D · Brand Worlds]. Внизу по центру строка: [ДИЗАЙН, СИСТЕМЫ И ЖИВЫЕ ИНТЕРФЕЙСЫ. МАШИНА — НАШ ИНСТРУМЕНТ, ВИДЕНИЕ — ЧЕЛОВЕЧЕСКОЕ.] / [DESIGN, SYSTEMS, AND LIVING INTERFACES. THE MACHINE IS OUR MEDIUM — THE VISION STAYS HUMAN.]. Справа внизу кнопки: [Обсудить проект] (белая заливка, чёрный текст) и [Смотреть работы] (контур). 2. Росчерк. Крест рассыпается в 3 светящиеся ленты, они пролетают слева направо. Текста нет. 3. Рука. Ладонь собирается снизу вверх. Вверху слева 34 px: [ГДЕ ЗАМЫСЕЛ / ОБРЕТАЕТ ФОРМУ] / [WHERE INTENT / TAKES FORM]. Внизу справа: [СТУДИЯ / НОВОГО ПОКОЛЕНИЯ] / [STUDIO OF THE / NEXT GENERATION]. Внизу слева три цифры (число 28 px, подпись 11 px): [4.9 · оценка клиентов] [240+ · проектов] [16 лет · в профессии] / [4.9 Client Rating · 240+ Projects Shipped · 16yr In Practice]. 4. Занавес. Частицы ложатся волной, фон плавно светлеет до #828A94 → #B0B4BA. Справа заголовок [СОЗДАНО ДЛЯ / ТОГО, ЧТО ВПЕРЕДИ] / [SHAPED FOR / WHAT COMES NEXT] (тёмный текст #15171E) и сетка 2×2 белых карточек #F4F4F2, 220×200, радиус 2 px, номер сверху, текст снизу: [01 Айдентика под ключ] [02 3D-ролики о продукте] [03 Сайты, построенные на движении] [04 Арт-дирекшн для ИИ-продуктов] / [01 Generative brand systems] [02 Realtime 3D product films] [03 Interactive sites built around motion] [04 Art direction for AI-native products]. Карточки въезжают снизу по очереди с задержкой 0.08 с. 5. Финал. Светлый слой уезжает по диагонали, снова темно. Из тумана снизу растёт дерево из частиц. Над ним [ПРЕДСТАВЬ] / [ENVISION], под деревом форма в одну строку: поле [Имя], поле [Email], кнопка [Обсудить проект] (белая). Подпись: [Есть идея? Напиши, обсудим] / [Have something in mind? Let's talk]. ДВИЖЕНИЕ - Тексты секции никогда не заходят под шапку: отступ сверху у каждой секции не меньше 110 px. - Все тексты появляются маской снизу вверх (clip-path: inset(100% 0 0 0) → inset(0)), 0.9 с, ease "expo.out", при уходе — растворяются. - Камера: position.z от 120 до 95 за всю страницу + лёгкий наклон за мышью (lerp 0.05). АДАПТИВ И СКОРОСТЬ - Экран уже 768 px: 6 000 частиц, слова первого экрана над и под крестом, плашки в 2 колонки, карточки в 1 колонку, форма в столбик. - Если navigator.hardwareConcurrency < 4 — 8 000 частиц. Анимация на паузе, когда вкладка скрыта. prefers-reduced-motion: без вихря, просто плавная смена форм. ПРОВЕРЬ СЕБЯ ПЕРЕД ОТВЕТОМ - Файл открывается без сервера, в консоли нет ошибок, при прокрутке видны все 5 форм по порядку: крест → ленты → ладонь → занавес → дерево. - Частицы не превращаются в квадраты (круглая точка в фрагментном шейдере), текст читается поверх частиц. - Если что-то из списка не вышло — скажи прямо в конце ответа, что именно, и предложи исправление.
Как переделать под себя
Психолог.
Формы: сердце → раскрытая ладонь → волна → цветок. Заголовки: «Услышь себя / Отпусти тревогу». Вместо 4 услуг — консультация, курс, группа, интенсив.
Эксперт или блогер.
Формы: твои инициалы → микрофон → лампочка → рост-график. Цифры: подписчики, годы, ученики.
Онлайн-школа.
Формы: открытая книга → лампочка → ракета → диплом. Карточки 01–04 — четыре курса, кнопка «Выбрать курс».
02/05
Brewns
Стакан кофе и пачку можно покрутить мышкой. Айс-латте стоит на часах вместо стрелки, а внизу из принтера печатается чек. Сайт, который хочется трогать.
// ЧТО ПОДГОТОВИТЬ
Название, адреса, 4 позиции меню с ценами.
Фото не обязательны — без них сайт рисует напитки сам. Хочешь свои — в промте есть готовый текст для ChatGPT, он сделает студийные фото на прозрачном фоне.
ПРОМТ49 строк · вставляй целиком
ПРОМТ 02/05 · BREWNS — сайт кофейни с 3D-стаканом, часами из айс-кофе и печатающимся чеком Ты — креативный фронтенд-разработчик уровня Awwwards. Собери ОДИН файл index.html: HTML, CSS и JS внутри, без сборщиков. Сайт должен открываться двойным кликом и работать в окне предпросмотра Claude. Дай полный код целиком, без сокращений и «...». ТЕХНИКА (иначе будет белый экран) - three.js только как ES-модуль через importmap: "three": "https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js", "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/". Старый build/three.min.js не используй. - GSAP 3.12.5 + ScrollTrigger: https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js и .../ScrollTrigger.min.js. Плавная прокрутка lenis: https://cdn.jsdelivr.net/npm/lenis@1.1.20/dist/lenis.min.js. - Шрифты Google Fonts с кириллицей: Inter Tight 800 (заголовки), JetBrains Mono 400 (подписи), Marck Script (только одно рукописное слово). - Внешних картинок нет: стакан и пачку строишь в three.js, напитки и десерт рисуешь SVG/CSS. Для своих фото оставь в коде понятные места (см. КАРТИНКИ). БРЕНД (замени на своё) Название: [brewns] · подпись: [COFFEE HOUSE] · город и адреса: [ул. Кофейная, 120 · ул. Садовая, 35 · пр. Мира, 50] · часы: [07:00 – 21:00] · соцсеть: [@brewns.coffee] Напитки и цены: [Эспрессо 190 ₽ · Латте 250 ₽ · Айс-матча 320 ₽ · Синнабон 230 ₽] Язык текстов на сайте: [русский]. Ниже тексты RU / EN. СТИЛЬ - Тёмные секции: фон #0F0A07, в центре мягкое пятно света #3D2217 (radial-gradient 60 %). Светлые секции: #EDEDEA. Текст на тёмном #F3EFE8, на светлом #0F0A07. Акцент — тёплый крем #D3CEC5. - Подписи — JetBrains Mono 12 px, заглавные, трекинг 0.08em, начинаются с «//». - Шапка: слева [МАГАЗИН · МЕНЮ · О НАС · АДРЕСА], по центру логотип [brewns] (Inter Tight 800), справа [ЗАКАЗАТЬ ОНЛАЙН]. Mono 12 px. ПРЕЛОАДЕР Нарисованный тонкой линией стакан (SVG) за 1.2 с наполняется коричневым кофе снизу вверх, наклоняется и «выливается» — поток кофе закрашивает экран и уходит вниз, открывая сайт. СЕКЦИИ 1. Первый экран (тёмный). Слева: [// КОФЕЙНЯ СПЕШЕЛТИ] / [// SPECIALTY COFFEE HOUSE], заголовок 96 px, letter-spacing −0.04em: [КОФЕ / ДЛЯ ТВОЕГО] / [COFFEE / FOR YOUR], под ним рукописное слово [момента] / [moment], которое «пишется» слева направо (clip-path). Абзац заглавными 14 px: [ЗЁРНА С ФЕРМ, КОТОРЫМ МЫ ДОВЕРЯЕМ, ОБЖАРКА МАЛЕНЬКИМИ ПАРТИЯМИ] / [CAREFULLY SOURCED BEANS AND THOUGHTFULLY BREWED TO BRING OUT THE BEST IN EVERY CUP]. Ссылка [СМОТРЕТЬ МЕНЮ ↗]. Внизу слева [ОТКРЫТО КАЖДЫЙ ДЕНЬ / 07:00 – 21:00], адрес, соцсеть — тремя колонками через тонкие линии. Справа — three.js-сцена со студийным светом: бумажный стакан (CylinderGeometry с сужением книзу, молочно-белый #E9E6E0, чёрная крышка, чёрное дно) и крафтовая пачка кофе (BoxGeometry 1×1.5×0.6 со скосом сверху, цвет #E8E1D3). На пачку и стакан натяни CanvasTexture с надписями: [brewns] / [COFFEE HOUSE], на пачке крупно рукописное [slow roast] и 3 строки мелким текстом. Стакан и пачку можно крутить мышью (OrbitControls без зума и панорамы, с автовозвратом), без мыши они плавно покачиваются. Мягкие тени, ключевой свет сверху слева, тёплый контровой справа. Вверху справа стеклянная плашка (фон rgba(30,25,22,.7), blur 12 px): [// В СТАКАНЕ], название и цена, строка [250 МЛ · ВАРИМ КАЖДЫЙ ДЕНЬ · С СОБОЙ]. Каждые 3 с меняется: [ДОМАШНИЙ ЛАТТЕ 250 ₽] ↔ [МЕДЛЕННАЯ ОБЖАРКА 890 ₽]. 2. Меню (светлый фон). Заголовок 80 px: [ЛЮБИМОЕ / ГОТОВИМ / КАЖДЫЙ ДЕНЬ] / [FAVORITES / MADE / DAILY], на фоне огромный светло-серый рукописный росчерк (SVG-путь, #D9D6D0). Справа [СМОТРЕТЬ ВСЁ МЕНЮ →]. Ряд из 4 карточек (рамка 1 px #D2C9C0, фон #F3F2EF): в каждой SVG-иллюстрация напитка или десерта, внизу название и цена моноширинным. Карточки наклоняются к курсору (rotateX/rotateY до 8°, perspective 800 px) и подсвечиваются бликом. 3. Часы (светлый фон). Подпись [// НАШИ АДРЕСА]. В центре большой циферблат 420 px: тонкий круг, цифры 1–12, 60 рисок. Вместо центра — высокий стакан айс-кофе (SVG: прозрачный стакан, слои молока и кофе, кубики льда, чёрная трубочка). Стакан стоит ВЕРТИКАЛЬНО (трубочкой вверх) ровно в центре циферблата и при прокрутке покачивается на ±25° как маятник, а часовая и минутная стрелки за ним проходят полный круг (ScrollTrigger scrub). Слева столбиком адреса и часы работы. 4. Город (тёмный). Заголовок 56 px: [ГОРОД НЕ ОСТАНАВЛИВАЕТСЯ. / ТВОЙ КОФЕ ТОЖЕ НЕ ДОЛЖЕН.] / [THE CITY NEVER STOPS. / YOUR COFFEE SHOULDN'T / SLOW YOU DOWN.]. 40 кофейных зёрен (SVG-овал с бороздкой, #3A2318–#6B4430) парят на разной глубине с параллаксом и лёгким вращением, но не поверх заголовка (зёрна в слое ниже текста, над заголовком их нет); снизу въезжает и наклоняется стакан. 5. Заказ (тёмный). Слева [КОФЕ / ПРЯМО СЕЙЧАС.] / [COFFEE FOR / RIGHT NOW.]. По центру щель термопринтера (тёмная металлическая планка), из неё при прокрутке вниз «печатается» чек: белая бумага, зубчатый низ, mono-текст: логотип, 3 позиции с ценами, итого, крупно [БЕЗ ОЧЕРЕДИ. / ЗАКАЖИ ЗАРАНЕЕ.] / [SKIP THE LINE. / ORDER AHEAD.], штрихкод из полосок. Справа абзац и ссылка [ЗАКАЗАТЬ ↗]. 6. Подвал: 4 колонки ссылок, большой логотип, копирайт. ДВИЖЕНИЕ - Заголовки выезжают маской снизу вверх по строкам, 0.8 с, "power4.out". Переходы между тёмными и светлыми секциями — шторкой. - Всё по прокрутке со scrub: 1, без рывков. КАРТИНКИ (по желанию) Сайт полностью работает без фото. Если хочешь свои фото — оставь в коде константу PHOTOS с путями (пусто по умолчанию): hero-cup.png, menu-1.png … menu-4.png, dessert.png. Если путь задан — показывай фото вместо SVG. Фото кладутся в ту же папку, что index.html. (Для человека, Claude это пропускает.) Фото можно сделать в ChatGPT, промт: «Студийное фото предмета на прозрачном фоне, PNG, 2000×2000: [бумажный стакан кофе с чёрной крышкой и логотипом "brewns"], мягкий тёплый свет сверху слева, лёгкая тень, без текста вокруг, фотореализм, стиль рекламы кофейни». Меняй предмет в скобках: [айс-латте в прозрачном стакане со льдом], [латте в белом стакане], [айс-матча], [синнабон на белой тарелке], [кусок чизкейка с матчей на тёмной тарелке]. АДАПТИВ И СКОРОСТЬ - До 768 px: 3D-сцена под текстом высотой 60vh, карточки меню листаются вбок, циферблат 300 px, зёрен 20. - pixelRatio не больше 2, three.js на паузе, когда первый экран не виден. ПРОВЕРЬ СЕБЯ ПЕРЕД ОТВЕТОМ - Без сервера, консоль без ошибок. Прелоадер «выливается», стакан и пачка крутятся мышью, карточки наклоняются, стакан на часах поворачивается при прокрутке, чек печатается. - Рукописное слово только одно, остальное — Inter Tight и моноширинный. - Если что-то не вышло — скажи в конце ответа, что именно, и как починить.
Как переделать под себя
Психолог.
Стакан → чашка чая, пачка → твоя книга или рабочая тетрадь. Часы — «твой час тишины», чек → «запись на сессию».
Эксперт или блогер.
Пачка → обложка твоего гайда, карточки меню → 4 продукта, чек → «твой заказ: мини-курс».
Онлайн-школа.
Предметы → тетрадь и кружка, часы — расписание потоков, чек → «пропуск на курс» со штрихкодом.
03/05
Codescan
Темнота, туман и десятки старых телевизоров с помехами. Камера ходит за мышкой, а в углах экрана бежит таймер и мигает «REC». Атмосфера кино.
// ЧТО ПОДГОТОВИТЬ
Название, 3 кейса, имена команды. Фото не нужны: экраны телевизоров рисуются кодом, портреты команды — стильные силуэты.
ПРОМТ45 строк · вставляй целиком
ПРОМТ 03/05 · CODESCAN — сайт продакшна: комната парящих ретро-телевизоров с помехами Ты — креативный фронтенд-разработчик уровня Awwwards. Собери ОДИН файл index.html: HTML, CSS и JS внутри, без сборщиков. Сайт должен открываться двойным кликом и работать в окне предпросмотра Claude. Дай полный код целиком, без сокращений и «...». ТЕХНИКА (иначе будет белый экран) - three.js только как ES-модуль через importmap: "three": "https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js", "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/". Старый build/three.min.js не используй. - GSAP 3.12.5 + ScrollTrigger: https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js и .../ScrollTrigger.min.js. Плавная прокрутка: https://cdn.jsdelivr.net/npm/lenis@1.1.20/dist/lenis.min.js. - Шрифты Google Fonts с кириллицей: Oswald 300 (крупные заголовки — узкий гротеск, контуром), Unbounded или Manrope 500 (текст), JetBrains Mono (HUD). - Внешних картинок нет: всё, что показывают экраны телевизоров, рисуешь на canvas (CanvasTexture). БРЕНД (замени на своё) Название: [Codescan] · чем занимается: [видеопродакшн и брендинг] · кейсы: [Stride · Halcyon · Kestrel] · команда: [6 человек: Алекс Барон — арт-директор, Робин Вэнс — моушн-дизайнер, Сигне Даль — бренд-дизайнер, Йонас Вик — фронтенд, Надя Вайс — UX, Ли Чен — продюсер] Язык текстов на сайте: [русский]. Ниже тексты RU / EN. СТИЛЬ - Фон: тёмная сине-зелёная комната в дымке: #0C0F0E по краям, #1F2423 в центре, туман THREE.FogExp2 цвета #465451, плотность 0.035. Летают редкие светлые пылинки. - Заголовки — Oswald 300, ЗАГЛАВНЫЕ, без заливки, только контур: color transparent, -webkit-text-stroke 1.2px #D3FCFA, лёгкое свечение text-shadow. - HUD поверх всего (fixed, mono 13 px, #D3FCFA): рамка с уголками по краям экрана (отступ 16 px, радиус 18 px), вверху слева живой счётчик «[NN] fps», вверху справа «REC» с мигающей точкой, внизу слева текущая дата «[ ДД / ММ / ГГ ]», внизу справа таймер «[ 00 : 00 : 00 ]», который идёт с открытия страницы. - Меню — таблетка по центру сверху из трёх частей: [ <> ] [Меню ≡] (заливка #D1FDFC, чёрный текст) [Контакты]. - Поверх всего — слой помех: горизонтальные полосы (repeating-linear-gradient, 3 px, opacity .06), лёгкая виньетка и шум. ТЕЛЕВИЗОРЫ — ГЛАВНОЕ - 26 ретро-телевизоров висят в 3D: корпус RoundedBoxGeometry (из three/addons) тёмно-серый #1A1A1A с матовым металлом, выпуклый экран чуть меньше передней грани. Разные размеры и углы, разброс по x ±14, y ±7, z от −4 до −22. - Экран — CanvasTexture 256×192, перерисовывается 15 раз в секунду, свой контент у каждого: белый шум; настроечная таблица из цветных полос; плавный градиент неба; розовое свечение; радуга помех со сдвигом строк; пиксельный котик (нарисуй 20×14 пикселей). Сверху на каждом экране — CRT-шейдер: полосы развёртки, лёгкое искажение по краям, мерцание, сдвиг каналов RGB. - Экраны светятся (emissive + маленький PointLight рядом с 4 самыми яркими), подсвечивают туман цветными пятнами. - В центре стоит силуэт человека спиной к зрителю: плоскость с чёрной фигурой (голова, плечи), нарисованной на canvas, края размыты. - Камера плавно следует за мышью (до 6° по горизонтали, 3° по вертикали, lerp 0.04). Телевизор под курсором становится резче и ярче, остальные чуть размываются (DOF через уменьшение яркости и прозрачности дальних). СЕКЦИИ 1. Первый экран. Сверху по центру контурный заголовок 88 px в 2 строки: [МЫ ДЕЛАЕМ ПРОШЛОЕ / НОВЫМ] / [WE MAKE THE PAST / FEEL NEW]. Внизу по центру тонкий крестик «+», под ним абзац 16 px: [Делаем айдентику, арт-дирекшн и сайты, на которые хочется смотреть ещё и ещё.] / [We make identity, art direction, and websites that keep a room quiet — tuned until the last picture holds still.]. Кнопки: [Начать проект] (заливка #D1FDFC) и [Смотреть работы] (контур #D3FCFA). 2. Бегущая строка. При прокрутке камера пролетает сквозь стену телевизоров. На экране огромная строка 180 px, едет вбок по прокрутке: [сделано, чтобы держать внимание.] / [built to hold attention.]. Под ней 28 px, буквы проявляются вразнобой: [Сигнал, который пробивается сквозь шум.] / [A signal that cuts through the noise, tuned for you.]. 3. Кейсы. Сверху красное зарево (radial-gradient #5E312D, 60 % высоты). Заголовок [Наши кейсы] / [Our cases] (Oswald 300, 48 px, белый, без контура). По центру один большой телевизор, на экране — обложка кейса (canvas-градиент с крупным названием). Кнопки [← Назад] и [Вперёд →] по бокам; смена кейса — телевизор уезжает вбок, следующий въезжает, экран «включается» с белой вспышкой и полосой. Под телевизором название кейса и теги в квадратных скобках: [ UX/UI ] [ Брендинг ] [ Web 3D ], кнопка [Смотреть →]. 4. Переход: экран рассыпается на пиксели (canvas-дизеринг из квадратов 16 px), 0.6 с. 5. Команда (чёрный фон). [Наша команда] / [Meet our team] и счётчик [01/06]. Горизонтальная лента карточек 3:4, центральная в тонкой рамке. На карточках вместо фото — стилизованные портреты, нарисованные SVG: силуэт головы и плеч в синей подсветке на тёмно-синем фоне, у каждого свой цвет света. Ленту тянут мышью или пальцем, рядом с курсором бирка [Тяни, чтобы смотреть]. Под лентой имя и роль центральной карточки. 6. О нас. Слева [О нас] / [About], справа абзац 32 px, слова темнеют из серого в белый по мере прокрутки: [Нас шестеро. Мы делаем айдентику, арт-дирекшн и сайты, на которые смотрят дважды, — и доводим начатое до конца.] / [We are six people who make identity, art direction and websites for work that is meant to be looked at twice — and we finish what we draw.]. Ниже 3 серые карточки-принципа с иконками. 7. Финал. Пиксельный переход, слева [Есть идея? / Давай сделаем вместе] / [Have an idea? / Let's collaborate], справа большой телевизор, на экране зеркальная надпись [Начать проект] / [Start a Project], которая при наведении разворачивается в нормальную. Клик — mailto:[hello@codescan.studio]. АДАПТИВ И СКОРОСТЬ - До 768 px: 10 телевизоров, без PointLight, экраны перерисовываются 8 раз в секунду, заголовок 48 px, лента команды — свайп. - pixelRatio не больше 1.5, рендер на паузе, когда сцена не видна. ПРОВЕРЬ СЕБЯ ПЕРЕД ОТВЕТОМ - Без сервера, консоль без ошибок. Телевизоры видны в дымке, экраны живые, камера ходит за мышью, HUD считает fps и время. - Кейсы листаются кнопками, лента команды тянется, пиксельные переходы срабатывают. - Если что-то не вышло — скажи в конце ответа, что именно, и как починить.
Как переделать под себя
Психолог.
На экранах — тёплые воспоминания: море, рассвет, старое фото. Заголовок «Прошлое можно перемонтировать». Кейсы → истории клиентов.
Эксперт или блогер.
На экранах — кадры твоих роликов. «Наши кейсы» → лучшие видео, «Команда» → ты и помощники.
Онлайн-школа.
Каждый телевизор — урок. Кейсы → выпускники и их результаты, финальный телевизор «Записаться на поток».
04/05
Dantora
Огромная спираль ДНК из зелёной пыли расплывается, как чернила в воде, и обтекает курсор. Чистый светлый дизайн, блоки наезжают друг на друга. Выглядит как сайт клиники за миллион.
// ЧТО ПОДГОТОВИТЬ
Название, 5 услуг, цифры, телефон.
Фото по желанию: без них стоят красивые градиенты. Для своих — в промте готовый текст для ChatGPT.
ПРОМТ52 строки · вставляй целиком
ПРОМТ 04/05 · DANTORA — сайт клиники: спираль ДНК из зелёной пыли, как чернила в воде Ты — креативный фронтенд-разработчик уровня Awwwards. Собери ОДИН файл index.html: HTML, CSS и JS внутри, без сборщиков. Сайт должен открываться двойным кликом и работать в окне предпросмотра Claude. Дай полный код целиком, без сокращений и «...». ТЕХНИКА (иначе будет белый экран) - three.js только как ES-модуль через importmap: "three": "https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js". Старый build/three.min.js не используй. - GSAP 3.12.5 + ScrollTrigger: https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js и .../ScrollTrigger.min.js. Плавная прокрутка: https://cdn.jsdelivr.net/npm/lenis@1.1.20/dist/lenis.min.js. - Шрифт Google Fonts: Inter 400 и 500 с кириллицей. Жирного начертания на сайте нет. - Внешних картинок нет. Где в оригинале фото — красивые заглушки (см. КАРТИНКИ). БРЕНД (замени на своё) Название: [Dantora] · кто: [клиника диагностики] · с какого года: [2011] · пациентов: [40 000+] · услуги: [Чекапы · Диагностика · Генетические тесты · Лаборатория · Приём специалистов] · телефон: [+7 900 000-00-00] Язык текстов на сайте: [русский]. Ниже тексты RU / EN. СТИЛЬ - Фон #E9F0EC (мятно-серый), белые блоки #FFFFFF, текст #080A07, второстепенный текст #5B6660. - Главный цвет — тёмно-зелёный #216359 (кнопки, логотип, карточки). Акцент — лимонный #F6FDA9. Других цветов нет. - Скругления: кнопки — таблетки, карточки 20 px. Тени почти нет. - Шапка: слева логотип — зелёный квадрат 36 px со значком-спиралью + [Dantora]; рядом белая плашка с меню [Главная · О клинике · Услуги · Врачи]. Справа кнопка-таблетка [Связаться] (#216359, белый текст) с лимонным кружком и стрелкой ↗. СПИРАЛЬ ДНК — ГЛАВНОЕ - three.js на fixed canvas справа, занимает 60 % ширины, уходит за край экрана. - Двойная спираль из 90 000 точек (Points, ShaderMaterial, NormalBlending, прозрачность 0.5–0.95): два закрученных тяжа и перемычки между ними. Спираль КРУПНАЯ и ПЛОТНАЯ: по высоте больше экрана (уходит за верх и низ), ширина витка ~45 % экрана, толщина тяжа ~7 % ширины экрана; в середине тяжа точки сливаются почти в сплошной цвет, к краям редеют. Наклон 35°, медленное вращение вокруг своей оси. - Цвет точек — смесь трёх: тёмно-зелёный #2F5D4A, серо-зелёный #769883, лайм #D6EBA0. Точки мягкие, 1.5–4 px; 10 % — крупные размытые «капли» 8–14 px с прозрачностью 0.25, они дают эффект чернил. - «Чернила в воде»: каждая точка в шейдере сдвигается шумом (curl noise / 3D simplex), смещение растёт от оси спирали к краям — тяжи «дымятся», от них отрываются облачка и расплываются. Часть точек (15 %) живёт циклом: отрывается, уплывает на 2–4 единицы и гаснет, потом возрождается на спирали. - Курсор раздвигает облако: точки в радиусе ~120 px плавно обтекают его. - При прокрутке спираль уезжает вверх и бледнеет; в последнем блоке возвращается слева. СЕКЦИИ 1. Первый экран. Слева: подпись [О КЛИНИКЕ] / [ABOUT DANTORA] (#216359, 13 px, заглавные), заголовок 64 px: [Медицина, которая начинается / с понимания тебя] / [Medicine that starts with / understanding you], абзац 17 px: [Диагностика, генетика и врачи в одной клинике — а результаты объясняем простыми словами.] / [Advanced diagnostics, genetic screening and specialist care in one clinic — with results explained in language you actually understand.]. Внизу тонкая линия на всю ширину; под ней слева [Нам доверяют 40 000+ пациентов с 2011 года ——], кнопки [Записаться] (#216359) и [Наши услуги] (#F6FDA9, чёрный текст). Справа внизу 5 белых таблеток с услугами в 2 ряда. 2. Один кабинет. Белый блок с радиусом 32 px наезжает снизу на первый экран. По центру 40 px: [Одна клиника, одна карта, / одна команда рядом с тобой] / [One clinic, one record, / one team behind you] — слова проявляются из размытия по очереди. Под ним мелкий абзац и кнопки [Наши врачи] / [Как мы работаем]. 3. Услуги. Слева заголовок 48 px: [Всё для диагноза — / под одной крышей] / [Everything your diagnosis / needs, under one roof], справа маленький абзац. Ниже ряд из 5 карточек 360×440, который при прокрутке едет влево (секция закреплена, pin + scrub). Карточки: 01 лимонная #F6FDA9 со списком [Мужское здоровье ↗ · Женское здоровье ↗ · Чекап руководителя ↗]; 02, 04, 05 — «фото» (см. КАРТИНКИ) с названием сверху белым и круглой кнопкой ↗; 03 — тёмно-зелёная #216359. Внизу у каждой [Подробнее]. 4. Цифры. Широкая карточка-фото на всю ширину (радиус 24 px), затем 4 цифры, которые отсчитываются от нуля: [98% · довольных пациентов] [24ч · результаты анализов] [40+ · врачей] [15 · лет практики]. Справа абзац 28 px, слова темнеют по мере прокрутки: [Dantora — клиника на 4 000 м², построенная вокруг одной идеи: диагноз и лечение не должны быть порознь.] / [Dantora is a 4,000 m² clinic built around a single idea: diagnosis and treatment should never be separated.]. Кнопки [Записаться на консультацию] и [Цены]. 5. Врачи. Тёмно-зелёная карточка [Врачи, к которым ты / будешь ходить каждый раз] / [The doctors you'll / actually see, every visit.] наезжает сверху на предыдущий блок. Справа ряд из 4 портретов-заглушек с именем и специальностью на белой плашке внизу. За курсором над этой секцией тянется «хвост» из 3 маленьких карточек-миниатюр с задержкой. 6. Финал. Спираль возвращается слева. Заголовок [Не знаешь, к какому / врачу идти?] / [Not sure which specialist / you need?]. Справа белая форма [Заказать звонок]: поля Имя, Телефон, Сообщение, галочка согласия, кнопка [Отправить] (#216359, на всю ширину). Форма никуда не отправляет — показывает «Спасибо, перезвоним». ДВИЖЕНИЕ - Каждый следующий блок наезжает на предыдущий (position: sticky + scale 0.95 у уходящего), радиус 32 px сверху. - Заголовки — проявление из blur(10px) и opacity 0 по словам, 0.7 с. КАРТИНКИ (по желанию) Без фото сайт тоже красивый: вместо фото — мягкие градиенты в цветах сайта с крупной полупрозрачной иконкой (SVG). Оставь в коде константу PHOTOS с путями (пусто по умолчанию): service-2.jpg, service-4.jpg, service-5.jpg, team-wide.jpg, doctor-1.jpg … doctor-4.jpg. Если путь задан — ставь фото (object-fit: cover). Фото кладутся в папку с index.html. (Для человека, Claude это пропускает.) Фото можно сделать в ChatGPT, промт: «Фото для сайта частной клиники, горизонтальное 3:4, светлая современная лаборатория, [врач в синей форме смотрит в микроскоп], холодный голубой свет, чистые линии, без текста и логотипов, фотореализм, как в рекламе премиальной клиники». Меняй сюжет в скобках: [аппарат МРТ в светлом кабинете], [руки врачей сложены вместе в знак команды], [портрет врача 45 лет в тёмно-синей форме на светло-сером фоне]. АДАПТИВ И СКОРОСТЬ - До 768 px: 35 000 точек, спираль на фоне за текстом (прозрачность 0.5), карточки услуг листаются свайпом, цифры 2×2, форма под заголовком. - pixelRatio не больше 2, анимация на паузе в скрытой вкладке. ПРОВЕРЬ СЕБЯ ПЕРЕД ОТВЕТОМ - Без сервера, консоль без ошибок. Спираль видна сразу, «дымится», обтекает курсор. Блоки наезжают друг на друга, ряд услуг едет вбок, цифры считаются. - Текст на светлом фоне читается поверх спирали (при необходимости — белая подложка с blur под текстом). - Если что-то не вышло — скажи в конце ответа, что именно, и как починить.
Как переделать под себя
Психолог.
Спираль → два переплетённых тяжа «ты и твоё состояние», цвета — пыльная роза и шалфей. Услуги → форматы работы.
Эксперт или блогер.
Спираль → твоя «ДНК бренда», карточки услуг → твои продукты, цифры → результаты учеников.
Онлайн-школа.
Спираль → путь ученика, блок «Врачи» → преподаватели, форма «Заказать звонок» → «Подобрать курс».
05/05
Evolve
Голова из десятков тысяч светящихся точек поворачивается за твоим курсором. Синий свет спереди, красный сбоку. Один экран — и тебя запоминают.
// ЧТО ПОДГОТОВИТЬ
Ничего. Голова строится кодом. Заголовок, 4 цифры и 3 карточки — под себя.
ПРОМТ50 строк · вставляй целиком
ПРОМТ 05/05 · EVOLVE — первый экран ИИ-стартапа: голова из светящихся точек следит за курсором Ты — креативный фронтенд-разработчик уровня Awwwards. Собери ОДИН файл index.html: HTML, CSS и JS внутри, без сборщиков. Сайт должен открываться двойным кликом и работать в окне предпросмотра Claude. Дай полный код целиком, без сокращений и «...». ТЕХНИКА (иначе будет белый экран) - three.js только как ES-модуль через importmap: "three": "https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js". Старый build/three.min.js не используй. - GSAP 3.12.5: https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js. - Шрифты Google Fonts с кириллицей: Inter 400 (заголовки), JetBrains Mono 400 (мелкие подписи). - Никаких внешних моделей и картинок: голову строишь кодом (см. ниже). БРЕНД (замени на своё) Название: [Evolve] · чем занимается: [ИИ-платформа для бизнеса] · кнопка: [Начать] Язык текстов на сайте: [русский]. Ниже тексты RU / EN. СТИЛЬ - Фон почти чёрный синий: #02071B, к центру #0F1330. Поверх — тонкая сетка-чертёж: линии rgba(120,150,255,.07) через 80 px, крестики «+» на пересечениях через одну клетку. - Заголовки — Inter 400, 64 px, белые, letter-spacing −0.02em. Подписи — JetBrains Mono 11 px, заглавные, rgba(170,190,255,.6). - Шапка: слева [ПЛАТФОРМА · РЕШЕНИЯ · ИССЛЕДОВАНИЯ · ЦЕНЫ] (mono 11 px), по центру маленький логотип-галочка, справа кнопка в тонкой рамке #3D5BFF: [НАЧАТЬ ››››] / [GET STARTED ››››], стрелки бегут по очереди. ГОЛОВА ИЗ ТОЧЕК — ГЛАВНОЕ - Форму задай функцией расстояния (SDF). Голова высотой ~2 единицы, лицо смотрит в +z. Детали (smooth union, k = 0.12, для мелких черт k = 0.04): череп — эллипсоид центр (0, 0.35, −0.05), радиусы (0.78, 0.92, 0.92); лицо и скулы — (0, −0.05, 0.25), (0.62, 0.70, 0.60); челюсть и подбородок — (0, −0.55, 0.25), (0.42, 0.32, 0.40); надбровье — (0, 0.28, 0.62), (0.50, 0.10, 0.18); нос — капсула от (0, 0.05, 0.78) до (0, −0.22, 0.92), r 0.09; губы — (0, −0.42, 0.62), (0.22, 0.07, 0.10); уши — (±0.76, 0.05, −0.02), (0.08, 0.22, 0.15); глазницы — вычти сферы (±0.27, 0.15, 0.68), r 0.13 (smooth subtract, k 0.06); шея — капсула от (0, −0.7, −0.1) до (0, −1.6, −0.05), r 0.36; плечи — эллипсоид (0, −1.85, −0.1), (1.6, 0.42, 0.6). Всю фигуру поверни на 25° влево и наклони подбородок вверх на 10° — портрет в три четверти. - Набери 60 000 точек на поверхности: случайные точки в объёме, оставь те, где |sdf| < 0.012, сдвинь на поверхность по градиенту. Добавь 8 000 точек внутри с малой яркостью — для объёма. Нормаль бери из градиента SDF. Считай это один раз при загрузке пачками по 5 000 через requestAnimationFrame, чтобы страница не зависала. - Освещение точек в шейдере — голова ЯРКО светится, лицо читается за счёт света: база #2A3A8F; синий ключевой свет спереди слева L1 = normalize(−0.6, 0.3, 1), цвет #4F8BFF, сила 1.6. Красный контровой — по краю силуэта справа: rim = pow(1 − |dot(n, viewDir)|, 2) · max(0, n.x) · 2.0, цвет #E0245E; красным светятся правая скула, ухо, шея и плечо. - Черты лица выделяй яркостью: точки возле кончика носа, скул, надбровья, подбородка и губ — ярче в 2 раза (почти белые #CFE0FF), в глазницах — в 2 раза темнее. Тогда лицо узнаётся даже по точкам. - Размер точки 1.6–3 px (×devicePixelRatio, не больше 2), AdditiveBlending, мягкий край. За головой — мягкое радиальное сияние #1E2A6E. - Голова «дышит» (масштаб 1 ± 0.01 с периодом 4 с), точки чуть дрожат шумом. Поворачивается за курсором: до 15° по горизонтали и 8° по вертикали, плавно (lerp 0.05). - На краях силуэта 3 % точек осыпаются: медленно уплывают в сторону и вверх, гаснут и возвращаются. - Голова занимает центр и 80 % высоты экрана, плечи уходят за нижний край. - Canvas: position fixed, inset 0, 100vw × 100vh, один сплошной фон — никаких прямоугольников другого цвета. - Тексты первого экрана стоят в обычном потоке страницы (position: relative, не fixed и не sticky) и уезжают вверх при прокрутке. ТЕКСТЫ И РАСКЛАДКА (один экран 100vh) - Слева сверху: [Инженерный / интеллект] / [Engineering / Intelligence]. Буквы появляются по одной с размытием (blur 12 px → 0, 0.04 с на букву). - Справа снизу, с задержкой 0.6 с: [Который растёт / вместе с тобой.] / [That Evolves / With You.]. - Слева снизу, mono 11 px: [ОТ БАЗОВЫХ МОДЕЛЕЙ / ДО ГОТОВОЙ / ИНФРАСТРУКТУРЫ.] / [FROM FOUNDATION MODELS / TO PRODUCTION-READY / INFRASTRUCTURE.]. - Вокруг головы 4 мелкие подписи-метки с цифрами (mono, тонкая линия к точке на голове): [ТОЧНОСТЬ 98.4%] [ЗАДЕРЖКА 12 МС] [МОДЕЛЕЙ 140+] [АПТАЙМ 99.99%]. Цифры сначала крутятся случайными символами и через 1.2 с «собираются» в нужные (эффект scramble). ВТОРОЙ ЭКРАН (короткий) - При прокрутке голова отъезжает вправо и уменьшается, слева появляются 3 карточки в тонких рамках #3D5BFF (фон rgba(10,16,40,.6), blur): [01 Модели — подключаем лучшие ИИ под твою задачу] [02 Данные — бережно, внутри твоего контура] [03 Запуск — от идеи до продукта за недели] / [01 Models] [02 Data] [03 Deploy]. Ниже кнопка [Начать] / [Get started]. АДАПТИВ И СКОРОСТЬ - До 768 px: 25 000 точек, голова выше центра, заголовки 40 px, подписи-метки скрыты (кроме двух), карточки в столбик. - Если navigator.hardwareConcurrency < 4 — 25 000 точек. pixelRatio не больше 2. ПРОВЕРЬ СЕБЯ ПЕРЕД ОТВЕТОМ - Без сервера, консоль без ошибок. Голова узнаётся сразу: лоб, нос, подбородок, шея, плечи; синий спереди, красный по правому краю. Поворачивается за мышью. - Заголовок появляется по буквам, цифры «собираются» из символов. - Если что-то не вышло — скажи в конце ответа, что именно, и как починить.
Как переделать под себя
Психолог.
Цвета — тёплые: персик спереди, лаванда сбоку. Заголовок «Голова, в которой тихо». Цифры — годы практики, клиенты.
Эксперт или блогер.
Это идеальный первый экран личного сайта: «Маркетинг, который думает вместе с тобой». Цифры — охваты и подписчики.
Онлайн-школа.
«Знания, которые растут вместе с тобой», цифры — выпускники, курсы, рейтинг, карточки — 3 направления.
Не хочешь возиться с 3D? Сделай сайт на видео
Так устроена половина «дорогих» сайтов: сзади — видео, сгенерированное нейросетью, сверху — живые тексты и кнопки.
Видео делаешь в Higgsfield (или любой нейросети для видео), сайт поверх собирает Claude.
Выглядит как кино, а работает даже на слабом телефоне.
01Сгенерируй кадр
промт картинки, формат 16:9, пустое место слева под заголовок.
02Оживи его
промт движения: медленно, камера стоит, конец совпадает с началом.
03Собери сайт
положи hero.mp4 рядом с файлом и вставь в Claude промт «Сайт на видео».
Три готовых фона
Лицо из света
для ИИ, технологий, эксперта по нейросетям.
Облако искр
для студии, дизайна, креатива.
Перламутровый шёлк
для психолога, коуча, бьюти, онлайн-школы.
ПРОМТЫ ДЛЯ ВИДЕО · HIGGSFIELD79 строк · вставляй целиком
ПРОМТЫ ДЛЯ ВИДЕО-ФОНА · Higgsfield (или любая нейросеть для видео) — фон для «сайта на видео» КАК ДЕЛАТЬ (2 шага) 1. Картинка-кадр: Higgsfield → Image → модель GPT Image, формат 16:9 (для телефона отдельно 9:16). Вставь промт картинки. Выбери лучший вариант. 2. Оживление: Higgsfield → Video → модель Seedance, режим «картинка → видео», загрузи кадр как стартовый, вставь промт движения. Длина 8 с, без звука. Сначала черновик (дешевле), понравилось — делай в 1080p. 3. Скачай mp4, переименуй в hero.mp4, положи рядом с index.html и вставь в Claude промт «Сайт на видео». ПРАВИЛА, ЧТОБЫ ФОН РАБОТАЛ НА САЙТЕ - Всегда пиши «no text, no letters, no logos» — текст сверху ставит Claude, он чёткий и меняется. - Оставляй пустое место под заголовок: «left 40% of the frame is empty space for a headline». - Медленное движение и статичная камера: «very slow, static camera». Быстрое видео мешает читать. - Для бесконечного повтора: «the end matches the start for a seamless loop». - Вес видео для сайта — до 5 МБ (если не влезает, сожми бесплатно в HandBrake или попроси Claude Code с ffmpeg). ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 1) ЛИЦО ИЗ СВЕТЯЩИХСЯ ТОЧЕК (как Evolve) — ИИ, технологии, эксперт по нейросетям Картинка: Cinematic website hero background, 16:9. Deep navy-black background with a very faint thin blueprint grid. On the right-center: a realistic human head, neck and shoulders made entirely of tens of thousands of tiny glowing particles, like a point cloud. Three-quarter view, face turned slightly left and up. Strong [blue] key light from the front-left makes the forehead, nose, cheekbone and lips glow bright [electric blue] and almost white; a hot [magenta-red] rim light from behind on the right edge of the face, ear, neck and shoulder. Particles at the edges are sparser and drift away like dust. Left 40% of the frame is empty dark space for a headline. Shallow depth of field, subtle bloom, ultra detailed, premium tech brand aesthetic. Absolutely no text, letters, logos or UI. Движение — спокойное (фон под текст): The glowing particle head breathes and very slowly turns a few degrees toward the camera, then back. Tiny particles shimmer, a few particles at the edges drift away upward like glowing dust and fade. Static camera, very slow, the end matches the start for a seamless loop. No text. Движение — ВАУ-эффект «распыление и сборка» (загрузи один и тот же кадр как первый И последний): Dramatic particle disintegration effect. 0-2s: the glowing particle head breathes calmly, particles twinkle. 2-4s: starting from the back of the head, the face disintegrates into millions of glowing [blue and magenta] particles that blow sideways and swirl into a spiral vortex of light, like digital dust in the wind. 4-7s: the vortex spins, then streams back and precisely reassembles the head layer by layer from the neck up, light trails following the particles. 7-10s: the head is whole again, breathing calmly, exactly as at the start. Static camera, cinematic, high detail, smooth motion. Left side stays dark empty space. No text. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 2) ОБЛАКО СИРЕНЕВЫХ ИСКР (как Auralis) — студия, дизайн, креатив, коуч Картинка: Cinematic website hero background, 16:9. A dim silver-graphite studio with soft gradient from grey in the center to near-black at the edges, three diagonal soft light beams falling from the top right through haze. In the center floats a large [X-shaped cross] made of thousands of glowing [lilac] and white particles like sparkler embers, each particle with a soft halo, a few larger glowing beads. Behind it, a faint thin glass panel with a fine grid. Left and right thirds are calm dark space for headline words. Photoreal, dreamy, premium creative studio aesthetic. Absolutely no text, letters, logos or UI. Движение — ВАУ-эффект «превращение формы» (один и тот же кадр как первый и последний, длина 10 с): Magical particle transformation effect. 0-1.5s: the glowing particle [X cross] hovers and shimmers. 1.5-3s: it explodes into a burst of sparks that fly outward. 3-5s: the sparks stream into three glowing ribbons of light that loop and swirl through the air like sparkler trails. 5-7s: the ribbons wrap together and form [a large open human hand] made of glowing white particles, holding still for a moment. 7-10s: the [hand] dissolves into sparks that spiral back and reassemble into the same [X cross] exactly as at the start. Light beams breathe, haze drifts over the floor. Static camera, elegant, cinematic. No text. Что подставить вместо креста и руки: [an open hand] · [a heart] · [a blooming flower] · [a tree] · [your initials as a 3D shape]. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 3) ПЕРЛАМУТРОВЫЙ ШЁЛК — психолог, коуч, наставница, бьюти, онлайн-школа Видео сразу из текста (без картинки): Abstract slow-motion website background: layers of flowing pearlescent silk fabric in soft [peach, blush pink and lavender], gently waving in a soft breeze, diffused daylight, dreamy and calm, very slow motion, static camera, the motion at the end matches the start for a seamless loop. No people, no text, no logos. Другие палитры: [sage green, cream and sand] · [deep emerald and gold] · [ice blue and silver] · [terracotta and beige]. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 4) СВОЯ ИДЕЯ — шаблон Картинка: Cinematic website hero background, 16:9. [что в кадре — главный объект и где он стоит]. [фон и свет]. [палитра: 2–3 цвета]. Left 40% of the frame is empty space for a headline. Photoreal, premium aesthetic. Absolutely no text, letters, logos or UI. Движение: [что медленно движется: объект поворачивается / ткань колышется / частицы кружатся / облака плывут]. Static camera, very slow, the end matches the start for a seamless loop. No text. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ СЛОВАРЬ ЭФФЕКТОВ — вставляй в промт движения Главный приём для сайтов: загрузи ОДИН И ТОТ ЖЕ кадр как первый (start) и последний (end) и распиши середину по секундам: «0-2s: … 2-4s: … 4-7s: … 7-10s: exactly as at the start». Тогда видео крутится по кругу без шва, а в середине — эффект. - Распыление: disintegrates into millions of glowing particles that blow away like digital dust in the wind - Сборка из частиц: thousands of particles stream in from all sides and assemble the [object] layer by layer - Превращение формы: the [object A] melts into flowing particles that reshape into [object B] - Вихрь: particles swirl into a spiral vortex of light around the [object] - Взрыв искр: bursts into sparks like a sparkler, sparks leave glowing trails - Чернила в воде: dissolves like ink in water, soft plumes curl and spread through the frame - Жидкий металл: the surface turns into liquid chrome that ripples and reflects light, then hardens back - Стекло и преломление: the [object] turns into clear glass, light refracts into rainbow caustics - Глитч: brief digital glitch — RGB split, horizontal slices shift, scanlines flicker, then snaps back clean - Рассыпание на пиксели: breaks into small square pixels that scatter and reassemble - Шёлк и ткань: wrapped in flowing silk that unfurls and reveals the [object] - Цветение: tiny particles bloom into [flowers] and then fold back - Свет: light sweeps across the [object] like a scanner, leaving a glowing edge - Пролёт камеры (только если нужен — текст на сайте читается хуже): slow dolly-in through the [clouds] toward the [object] Чтобы эффект был сильным, а сайт читаемым: - эффект держи в правой части кадра, слева — пустое место под заголовок; - одна трансформация на видео, не три сразу; - называй цвета частиц так же, как цвета бренда; - длина 8–10 секунд; в конце пиши «exactly as at the start».
ПРОМТ САЙТА · CLAUDE46 строк · вставляй целиком
ПРОМТ · САЙТ НА ВИДЕО — Claude собирает сайт поверх твоего видео-фона (видео делаешь в Higgsfield или любой нейросети для видео) Ты — креативный фронтенд-разработчик уровня Awwwards. Собери ОДИН файл index.html: HTML, CSS и JS внутри, без сборщиков. Дай полный код целиком, без сокращений и «...». ЧТО У МЕНЯ ЕСТЬ - Видео-фон: файл [hero.mp4] лежит в той же папке, что и index.html. Длина [8] секунд, горизонтальное 16:9. - Для телефона (если есть): [hero-mobile.mp4], вертикальное 9:16. Если файла нет — используй hero.mp4 с object-fit: cover. - Постер (первый кадр картинкой): [hero.jpg]. Если файла нет — сделай фон-градиент в цветах видео: [#02071B → #1D2557]. ТЕХНИКА - Видео: <video autoplay muted loop playsinline preload="auto" poster="hero.jpg">, position: fixed, inset: 0, object-fit: cover, на весь экран. Без звука — иначе браузер не запустит его сам. - Если видео не загрузилось (например, в окне предпросмотра Claude) — показываются постер или градиент, сайт не ломается. - Поверх видео — затемнение для читаемости: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 55%), подстрой под светлое или тёмное видео. - GSAP 3.12.5 + ScrollTrigger: https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js и .../ScrollTrigger.min.js. Плавная прокрутка: https://cdn.jsdelivr.net/npm/lenis@1.1.20/dist/lenis.min.js. - Шрифты Google Fonts с кириллицей: [Inter 400 для заголовков, JetBrains Mono для мелких подписей]. БРЕНД (замени на своё) Название: [Evolve] · кто ты: [ИИ-платформа для бизнеса] · главная кнопка: [Начать] → ссылка [https://t.me/username] Заголовок первого экрана: [Инженерный / интеллект] Подзаголовок: [Который растёт / вместе с тобой.] Мелкая подпись: [ОТ БАЗОВЫХ МОДЕЛЕЙ / ДО ГОТОВОЙ ИНФРАСТРУКТУРЫ.] Цифры: [98.4% точность · 12 мс задержка · 140+ моделей · 99.99% аптайм] 3 карточки: [01 Модели — подключаем лучшие ИИ под твою задачу · 02 Данные — бережно, внутри твоего контура · 03 Запуск — от идеи до продукта за недели] ПЕРВЫЙ ЭКРАН (100vh, видео играет по кругу) - Шапка: слева 4 пункта меню (моно 11 px, заглавные), справа кнопка в тонкой рамке со стрелками «››››», которые бегут по очереди. - Заголовок 72 px слева сверху: появляется ПО БУКВАМ — каждая буква из blur(12px) и прозрачности, 0.04 с на букву. - Подзаголовок 44 px справа снизу, с задержкой 0.6 с, поднимается снизу маской. - Мелкая моно-подпись слева снизу печатается как на машинке. - 4 цифры в тонких рамках по краям: сначала крутятся случайными символами, через 1.2 с «собираются» в нужные. - Курсор: маленький круг 24 px с mix-blend-mode: difference, на кнопках увеличивается. ВТОРОЙ ЭКРАН — ВИДЕО ПО ПРОКРУТКЕ - Видео-фон при прокрутке плавно уменьшается до карточки с радиусом 24 px (scale 1 → 0.62, ScrollTrigger scrub) и уезжает вправо; слева въезжают 3 карточки со стеклом (backdrop-filter: blur(14px), фон rgba(10,16,40,.55), рамка 1 px rgba(120,150,255,.35)). - Под карточками кнопка [Начать]. ФИНАЛ - Видео снова на весь экран, затемнение сильнее, по центру крупно [Давай начнём] и кнопка. Подвал: копирайт и ссылки. ТЕЛЕФОН - До 768 px: заголовок 44 px, цифры 2×2 под заголовком, карточки в столбик, видео не уменьшается (только затемнение сильнее). Шрифт не мельче 15 px. ПРОВЕРЬ СЕБЯ ПЕРЕД ОТВЕТОМ - Видео стартует само без звука и на iPhone (muted + playsinline), без видео сайт показывает постер или градиент. - Текст читается поверх видео в любом кадре. - Если что-то не вышло — скажи в конце ответа, что именно, и как починить.
Пиши в промте видео «no text» — надписи ставит Claude, они чёткие и легко меняются. Фон-видео держи до 2–3 МБ, иначе сайт грузится долго.
Бонусы 
бонус 1Промт-переделка
Вставь любой из пяти промтов и расскажи о себе в 8 строках. Claude поменяет формы, тексты и цвета под твою нишу и сразу соберёт сайт.
ПРОМТ28 строк · вставляй целиком
БОНУС · ПРОМТ-ПЕРЕДЕЛКА — превращает любой из пяти сайтов в сайт под твою нишу Ты — арт-директор и фронтенд-разработчик. Ниже — промт, по которому собирается сайт с эффектным движением. Я хочу такой же уровень, но под мой проект. Перепиши промт под меня и сразу собери по нему сайт. ОБО МНЕ - Кто я и чем занимаюсь: [психолог, работаю с тревогой у женщин 30–45] - Название или имя на сайте: [Анна Морозова] - Главное действие на сайте: [записаться на бесплатную консультацию] - Ссылка для кнопки: [https://t.me/username] - Мои услуги или продукты (3–5): [личная консультация · курс «Спокойствие за 21 день» · групповая терапия] - Цифры, которыми горжусь: [8 лет практики · 1 200 клиентов · 4.9 средняя оценка] - Цвета бренда (если есть): [пыльная роза #D8A7A0 и графит #2B2B2B] - Настроение сайта одним словом: [бережный] ЧТО СДЕЛАТЬ 1. Сохрани всё, что делает сайт «вау»: главную анимацию, плавную прокрутку, появление текстов, раскладку блоков, адаптив, технику подключения библиотек. 2. Замени смысл: форму частиц / предметы / образы — на те, что подходят моей нише (например, для психолога: вместо креста и руки — сердце, раскрытая ладонь, цветок, волна; для онлайн-школы — книга, лампочка, ракета). Выбери сама и объясни выбор одной фразой. 3. Перепиши все тексты на русском под мою аудиторию: коротко, тепло, на «ты», без канцелярита. Заголовки — тезисы, которые цепляют. Не выдумывай отзывы и дипломы — где нужны, поставь [заглушку в скобках]. 4. Перекрась сайт в мои цвета: один главный цвет, один акцент, остальное — нейтральные. Проверь, что текст читается (контраст). 5. Оставь блок записи / формы, кнопка ведёт по моей ссылке. ПОРЯДОК ОТВЕТА - Сначала 5 строк: что поменяла и почему. - Потом новый промт целиком (чтобы я сохранила его себе). - Потом готовый index.html целиком, без сокращений. ВОТ ИСХОДНЫЙ ПРОМТ: [вставь сюда один из пяти промтов целиком]
бонус 2Промт-ремонт
Белый экран, всё съехало на телефоне, анимация не крутится? Опиши, что видишь, — Claude найдёт причину и пришлёт исправленный файл.
ПРОМТ20 строк · вставляй целиком
БОНУС · ПРОМТ-РЕМОНТ — если сайт собрался не так Сайт по прошлому промту работает не так, как нужно. Найди и почини причину, не ломая остальное. ЧТО Я ВИЖУ [опиши своими словами: белый экран / анимации нет / на телефоне всё съехало / текст не видно / тормозит / кнопка не работает] Где открываю: [в окне предпросмотра Claude / двойным кликом на компьютере / на телефоне] Ошибка из консоли (если есть, F12 → Console): [вставь текст ошибки или напиши «не знаю»] ПРОВЕРЬ ПО ПОРЯДКУ 1. Библиотеки: three.js подключена как модуль через importmap с cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js; GSAP, ScrollTrigger и lenis — тоже с cdn.jsdelivr.net. Никаких build/three.min.js и библиотек с других сайтов. 2. Код не обрезан: файл заканчивается на </html>, все скобки закрыты. Если ответ был длинный и оборвался — допиши недостающее. 3. Ошибки в JS: переменные объявлены до использования, нет опечаток в именах, шейдеры компилируются (нет ошибок GLSL). 4. Картинки: внешние ссылки на фото не работают в предпросмотре — замени на градиенты или проверь, что файлы лежат рядом с index.html и имена совпадают. 5. Телефон: ширина 375 px, ничего не вылезает вбок (overflow-x: hidden у body), частиц втрое меньше, шрифты не мельче 15 px. 6. Скорость: pixelRatio не больше 2, анимация на паузе в скрытой вкладке, тяжёлые расчёты — в шейдере. ОТВЕТ - Сначала одной-двумя фразами: в чём была причина. - Потом исправленный index.html целиком, без сокращений.
Сайт готов. Как дать на него ссылку?
Быстро, чтобы показать
опубликуй прямо из Claude. Открой готовый сайт в чате и нажми «Поделиться» / «Опубликовать»: получишь ссылку, которую можно отправить. Если кнопки нет — значит, на твоём тарифе её нет, бери способ ниже.
Бесплатно, на свой адрес
Netlify Drop (app.netlify.com/drop). Перетащи туда папку с index.html — через минуту получишь ссылку. Важно: зарегистрируйся и нажми «забрать сайт», иначе он закрыт паролем и удалится примерно через час.
Свой домен
после регистрации в Netlify открой настройки сайта → Domain management и подключи домен, который купила у регистратора.
Свои фото клади в ту же папку, что index.html, и пиши Claude их имена: «вставь фото anna.jpg в блок Обо мне».
Если что-то пошло не так
01Белый экран.
Обычно Claude подключил библиотеку не по той ссылке. Напиши:
Белый экран. Подключи three.js через importmap с cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js, GSAP и lenis — тоже с cdn.jsdelivr.net. Пришли файл целиком
02Код оборвался на середине.
Ответ был слишком длинный. Напиши:
Продолжи с места, где остановился
а потом:
Собери весь файл целиком одним блоком
03Сайт есть, но ничего не двигается.
Анимация не работает. Проверь ScrollTrigger и lenis: они должны быть подключены и связаны. Исправь и пришли файл целиком
04На телефоне всё съехало.
На телефоне шириной 375 px текст вылезает и есть прокрутка вбок. Сделай мобильную версию: всё в одну колонку, шрифт не мельче 15 px, частиц втрое меньше
05Тормозит.
Сайт тормозит. Уменьши число частиц вдвое, ограничь pixelRatio до 1.5, останавливай анимацию, когда вкладка скрыта
06Не видно моих фото.
Фото должны лежать в одной папке с index.html. Напиши:
Мои фото лежат рядом с файлом: hero.jpg, menu-1.jpg. Вставь их в нужные блоки
PS. В окне предпросмотра Claude фото из интернета не показываются — это нормально. Открой файл у себя на компьютере.
07Получилось «не так, как в видео».
Это нормально: каждый раз Claude собирает чуть по-своему. Напиши, что именно не так:
Частицы должны быть мельче и сиреневые, а заголовок — тоньше
Хочешь ещё? Вот где брать бесплатно
GetLayers — бесплатные слои.Откуда эти пять сайтов. Пять шаблонов и пять 3D-сцен с полными промтами бесплатно: Soda, Kimi, Lumora, Laocoon, Baseline.getlayers.ai/templatesmeez.design62 полных промта лендингов, без регистрации.meez.design/free-promptsWandy3Dоколо 400 промтов 3D-сцен, у каждого видео результата.wandy3d.com/promptsРазбор «6 промтов 3D-сайтов»честно, что получилось, а что сломалось.aireiter.com/ru/blog/3d-website-prompts
Ссылки проверены 10 ноября 2026. Это чужие сайты, условия там могут поменяться.
сайты на Claude@mama_mozg
Ещё больше —
в моём канале
Я разбираю ИИ-инструменты для экспертов: что реально работает, а что — пыль в глаза.
Без воды и с готовыми промтами.
AI-ЛавкаГотовые ИИ-агенты для контента и маркетингаДля контента, маркетинга, исследований, дизайна и автоматизации. Не курс, а рабочие инструменты: агент получает задачу один раз и сам отдаёт готовый файл — ролик, презентацию, лид-магнит, сценарий.Выбрать агента
К промтам ↑ 
Маргарита Захарова · @mama_mozg · t.me/marketing_dir
Видео-примеры — превью сайтов с getlayers.ai, права на них у авторов. Промты на этой странице написаны мной с нуля и проверены: сайты в блоках «Что получилось у меня» собраны по ним.
