Motion — премиальный лендинг пейдж для SaaS-продукта

Motion - интерактивная SaaS лендинг-страница с анимациями и демонстрацией code-diff

Основной акцент сделан на интерактивности. Scroll-reveal анимации, fade-in эффекты и блок code-diff реализованы на чистом JavaScript.

Что реализовано:
- Статическая структура HTML/CSS/JS без фреймворков
- Локальные шрифты, изображения, CSS, аудио и медиа
- Ребрендинг интерфейса под Motion
- Правки header/footer: логотип, типографика, ссылки
- Scroll-reveal и fade-in анимации
- Интерактивный блок code-diff
- Редактируемая правая панель кода
- Подсветка вставленного текста зеленым
- Синхронизация левой и правой частей diff
- Сохранение подсветки синтаксиса во время редактирования
- Адаптивная верстка
- Чистая папка для продакшена/деплоя
- Проверка зависимостей ассетов и отсутствие 404

Технические детали:
- HTML5, CSS3, vanilla JavaScript
- Без React, Next.js, Vue
- Без Webpack/Vite/esbuild
- Полностью статический сайт
- 100% локальные runtime-ассеты
- IntersectionObserver для reveal-анимаций
- Модуль на vanilla JS для взаимодействия с code-diff

Вызовы и решенные проблемы:
- Воспроизведение сложного UI без оригинального React/Next runtime
- Перенос интерактивной логики на vanilla JS
- Сохранение подсветки синтаксиса во время live editing
- Синхронизация diff-панелей
- Корректная работа opacity/transform в reveal-анимациях
- Локализация ассетов без CDN
- Подготовка чистого deploy-пакета

Результат:
Готовая автономная статическая лендинг-страница под брендом Motion, которая сохраняет визуальную сложность референса, работает без build-процесса и деплоится как обычный HTML/CSS/JS сайт.

Стек:
HTML5 · CSS3 · Vanilla JavaScript · IntersectionObserver · GitHub · Vercel