Three.js
Промпт, которым я это сделал
Сделай первый экран с интерактивной 3D-сценой на Three.js (с CDN), одним файлом index.html. Справа шар из 5–6 тысяч светящихся частиц: он медленно вращается и поворачивается к курсору, частицы рядом с курсором разлетаются и плавно возвращаются на место. Слева заголовок «3D-сцена на сайте за один промпт», строка пояснения и кнопка. Тёмный фон, частицы в градиенте от #E8723C к фиолетовому, мягкое свечение. На телефоне шар над текстом, частиц меньше, реагирует на касание. Не должно тормозить.
Что получится
- Живую 3D-сцену без аккаунта в Spline
- Реакцию на курсор и на касание пальцем
- Запасной вариант без WebGL и режим без анимации
Подойдёт
- Первый экран сайта про AI, технологии или продукт
- Страницу, которой нужен «вау» на первой секунде
Не подойдёт
- Готовые 3D-модели и персонажей: для них нужен Spline или Blender
Похожие работы
-
GSAP
Окно продукта раскрывается при скролле
Первый экран с заголовком и маленьким окном интерфейса. При прокрутке окно вырастает на весь экран, заголовок разлетается.
-
Видео-фон
Видео-фон в первом экране без стока
Claude Code нарисовал светящиеся волны в canvas, записал их в бесшовное видео на 8 секунд и поставил фоном под заголовок.
-
GSAP
Анимации сайта на GSAP
Шоурил библиотеки GSAP. Официальные скиллы учат агента писать такие анимации: по скроллу, на таймлайне, с SplitText и Flip.
-
Transitions.dev
Переходы интерфейса, которые агент ставит сам
Агент добавляет в проект проверенные CSS-переходы: модалки, меню, тосты, аккордеоны, скелетоны загрузки.
Новые ролики и разборы — в TelegramПишу, как я делаю свои ролики, и добавляю сюда новые скиллы.
Открыть канал