Видео-фон
Промпт, которым я это сделал
Сделай первый экран сайта с видео-фоном одним файлом index.html. Видео сделай сам, без стока: абстрактная сцена на 8 секунд, 1920×1080, плавные светящиеся волны-ленты на тёмно-синем фоне в цветах #E8723C и фиолетовом, бесшовная петля. Нарисуй её в canvas, запиши в MP4 (Playwright + ffmpeg) и положи рядом как bg.mp4. Поверх видео — меню (логотип и 3 пункта), заголовок «Видео-фон без стока и без монтажа», подзаголовок одной строкой и кнопка «Начать». Снизу затемнение, чтобы текст читался. На телефоне видео тоже играет (muted, playsinline), есть постер-кадр.
Что получится
- Своё видео без лицензий на сток
- Петля без рывка: последний кадр совпадает с первым
- Фон играет и на телефоне, пока грузится — постер
Подойдёт
- Первый экран лендинга в стиле motionsites
- Фон для промо-страницы или страницы запуска
Не подойдёт
- Съёмку реальных людей и предметов: волны рисует код
Похожие работы
-
GSAP
Окно продукта раскрывается при скролле
Первый экран с заголовком и маленьким окном интерфейса. При прокрутке окно вырастает на весь экран, заголовок разлетается.
-
Three.js
3D-шар из частиц, который следит за курсором
Шар из 6 тысяч светящихся частиц поворачивается к курсору, а частицы под ним разлетаются и возвращаются на место.
-
GSAP
Анимации сайта на GSAP
Шоурил библиотеки GSAP. Официальные скиллы учат агента писать такие анимации: по скроллу, на таймлайне, с SplitText и Flip.
-
Transitions.dev
Переходы интерфейса, которые агент ставит сам
Агент добавляет в проект проверенные CSS-переходы: модалки, меню, тосты, аккордеоны, скелетоны загрузки.
Новые ролики и разборы — в TelegramПишу, как я делаю свои ролики, и добавляю сюда новые скиллы.
Открыть канал