Видео недоступно для предпросмотра
Смотреть в Telegram
🤍 Такой frontend для сайта сейчас можно сделать по одному промпту в GPT 5.6 Sol (ultra)
Пример промпта:
Сделай frontend-компонент "kinetic text player" — анимация текста, синхронизированная с озвучкой (эффект как в мотивационных рилсах: слова проявляются по одному в такт голосу).
Стек: один HTML-файл (vanilla JS + CSS), без сборки. Потом адаптирую под Next.js сам.
Визуальный стиль:
→ фон: тёплый кремовый #E3D6BD, лёгкая бумажная текстура через noise (SVG feTurbulence, opacity 0.03)
→ текст: тёмно-коричневый #4A382C
→ шрифт: serif с кириллицей (Playfair Display или PT Serif с Google Fonts), вес 500-600
→ кегль крупный: clamp(32px, 6vw, 72px), line-height 1.25, letter-spacing -0.01em
→ текст по центру экрана, max-width 80vw, выравнивание по центру
Механика анимации:
→ каждая фраза = экран, слова внутри фразы появляются последовательно
→ появление слова: opacity 0.0 → 1.0, filter blur(6px) → blur(0), translateY(8px) → 0, transition 300ms ease-out
→ уже показанные слова остаются полностью видимыми, ничего не мигает
→ после последнего слова фразы — пауза 400-600ms, затем вся фраза fade-out 300ms, экран очищается, начинается следующая
→ последний экран — CTA, остаётся висеть
Синхронизация с озвучкой:
→ данные — массив фраз, каждая фраза — массив объектов { word: "текст", start: 1.24 } где start — секунда в аудиофайле
→ элемент + requestAnimationFrame: на каждом кадре сверяем audio.currentTime с таймингами и добавляем класс .visible нужным словам
→ не использовать setTimeout-цепочки — только привязка к currentTime, чтобы при перемотке/лагах ничего не разъезжалось
→ autoplay со звуком браузеры блокируют — сделай стартовый экран с кнопкой Play (в том же стиле), по клику audio.play() и старт анимации
→ кнопка Replay в конце
Данные для примера:
→ вставь заглушку: 3-4 фразы по 4-7 слов с равномерными таймингами, аудио — путь /voiceover.mp3
→ структуру данных вынеси в отдельную константу PHRASES в начале файла с комментарием, как её заменить
→ добавь комментарий: word-level тайминги получаю из ElevenLabs (timestamps в ответе API) или whisper --word_timestamps True
Качество:
→ 60fps: анимировать только opacity/filter/transform, никаких layout-свойств
→ prefers-reduced-motion: показывать фразы целиком без blur
Пример промпта:
Сделай frontend-компонент "kinetic text player" — анимация текста, синхронизированная с озвучкой (эффект как в мотивационных рилсах: слова проявляются по одному в такт голосу).
Стек: один HTML-файл (vanilla JS + CSS), без сборки. Потом адаптирую под Next.js сам.
Визуальный стиль:
→ фон: тёплый кремовый #E3D6BD, лёгкая бумажная текстура через noise (SVG feTurbulence, opacity 0.03)
→ текст: тёмно-коричневый #4A382C
→ шрифт: serif с кириллицей (Playfair Display или PT Serif с Google Fonts), вес 500-600
→ кегль крупный: clamp(32px, 6vw, 72px), line-height 1.25, letter-spacing -0.01em
→ текст по центру экрана, max-width 80vw, выравнивание по центру
Механика анимации:
→ каждая фраза = экран, слова внутри фразы появляются последовательно
→ появление слова: opacity 0.0 → 1.0, filter blur(6px) → blur(0), translateY(8px) → 0, transition 300ms ease-out
→ уже показанные слова остаются полностью видимыми, ничего не мигает
→ после последнего слова фразы — пауза 400-600ms, затем вся фраза fade-out 300ms, экран очищается, начинается следующая
→ последний экран — CTA, остаётся висеть
Синхронизация с озвучкой:
→ данные — массив фраз, каждая фраза — массив объектов { word: "текст", start: 1.24 } где start — секунда в аудиофайле
→ элемент + requestAnimationFrame: на каждом кадре сверяем audio.currentTime с таймингами и добавляем класс .visible нужным словам
→ не использовать setTimeout-цепочки — только привязка к currentTime, чтобы при перемотке/лагах ничего не разъезжалось
→ autoplay со звуком браузеры блокируют — сделай стартовый экран с кнопкой Play (в том же стиле), по клику audio.play() и старт анимации
→ кнопка Replay в конце
Данные для примера:
→ вставь заглушку: 3-4 фразы по 4-7 слов с равномерными таймингами, аудио — путь /voiceover.mp3
→ структуру данных вынеси в отдельную константу PHRASES в начале файла с комментарием, как её заменить
→ добавь комментарий: word-level тайминги получаю из ElevenLabs (timestamps в ответе API) или whisper --word_timestamps True
Качество:
→ 60fps: анимировать только opacity/filter/transform, никаких layout-свойств
→ prefers-reduced-motion: показывать фразы целиком без blur