mozgi ← Все промпты
Claude Opus 5.5

Кинематографичная 3D-сцена с космическим стражем в стиле фэнтези, управляемая прокруткой

Промпт

# Заголовок Auren

Кинематографичный 3D hero-заголовок для luxury/fantasy-бренда "AUREN" с прокруткой по кадрам: полноэкранное фоновое видео воспроизводится кадр за кадром по мере прокрутки пользователем секции высотой 500vh, а последовательные оверлеи с заданными моментами времени (заголовок, описание, карточки функций, финальный заголовок) появляются на определённых временных отметках видео.

## Технологический стек
- React 18+ с директивой "use client" (совместимо с Next.js App Router)
- framer-motion (все анимации появления/исчезновения оверлеев, AnimatePresence, поэлементное появление символов с задержкой)
- gsap + gsap/ScrollTrigger (управляемая прокруткой синхронизация, сопоставляющая прогресс прокрутки со значением video.currentTime)
- Библиотека иконок не используется; стрелка — это обычный символ →, а кнопка оверлея карточки — обычный символ +

## Шрифты и глобальные стили
- Импортировать через: `https://fonts.googleapis.com/css2?family=Italiana&family=Inter+Tight:wght@400;500&display=swap`
- Дисплейный / серифный шрифт: 'Italiana', serif — используется для логотипа AUREN, hero-заголовков, номеров карточек и заголовков карточек.
- Основной / гротескный шрифт: 'Inter Tight', sans-serif — начертания 400 и 500 — используются для текста навигации, описаний, пунктов меню, подзаголовков/описаний/кнопок карточек.
- `box-sizing: border-box` применяется ко всей секции и всем её дочерним элементам.
- Ограничить все стили областью секции; НЕ задавать глобальные правила для body/html.

## Контейнер секции
- Корневой элемент: `.auren-header-section` — position: relative; width: 100%; height: 500vh; background: #FEFFFE. Высота 500vh создаёт пространство прокрутки для синхронизации.
- Внутренняя sticky-обёртка: `.auren-sticky-content` — position: sticky; top: 0; width: 100%; height: 100vh; overflow: hidden. Всё видимое содержимое находится внутри этого sticky-экрана.

## Структура по секциям
1. **Фоновое видео** `.auren-video-bg`: position absolute; inset 0; width/height 100%; object-fit: cover; object-position: center; z-index: 1. Элемент — `<video muted playsInline>` (НЕ autoplay — воспроизведение управляется прокруткой). Источник: `https://cdn.jiro.build/Header%20Section/Auren3d/output.mp4` (type video/mp4). При ширине ≤768px object-position меняется на 70% center.
2. **Навигация** `.auren-nav`: position absolute; top 0; left 0; width 100%; padding 40px 60px; display flex; justify-content space-between; align-items flex-start; z-index 2.
   - Логотип `.auren-logo`: текст "AUREN", Italiana 400, 26px, line-height 1, color #000000, letter-spacing 0.05em.
   - Центральная навигация `.auren-nav-center`: абсолютно центрирована (left 50%, translateX(-50%)); display flex; gap 15vw. Два блока `.auren-nav-text` (Inter Tight 500, 16px, line-height 1.2, uppercase, color #000000, выравнивание по центру): первый содержит "COSMIC ARMORION" / "FORGED IN LIGHT" (две строки через <br/>); второй содержит "CHAPTER 07" / "CELESTIAL ARCHIVE".
   - Гамбургер `.auren-menu-btn`: flex column; align-items flex-end; gap 5px; прозрачный, без границы. Три полосы `.auren-menu-line`, height 2px, background #161414; ширина 22px / 15px / 22px. При наведении средняя полоса анимируется до ширины 22px (transition width 0.3s ease).
   - Выпадающее меню `.auren-menu-dropdown` (переключается гамбургером): position absolute; top 60px; right 60px; width 150px; background rgba(255,255,255,0.8); backdrop-filter blur(10px); border-radius 8px; padding 10px; flex column gap 10px; border 1px solid rgba(0,0,0,0.1); z-index 20. Элементы `.auren-menu-item` (Inter Tight 500, 16px, #000, padding 8px, border-radius 4px, выравнивание по правому краю, при наведении background rgba(0,0,0,0.05)): "Home", "About", "Contact".
3. **Временный hero-заголовок (начальный, отображается при videoTime < 2.5s)** `.auren-hero-title`: position absolute; left 60px; bottom 80px; max-width 400px; Italiana 400; 90px; line-height 1.13; color #000000; z-index 2. Слова: "RISE", "OF THE", "ASTRAL", "GUARD", "MAN" — каждое на своей строке (через <br/>), отрисовываются посимвольно для анимации появления.
4. **Временное hero-описание (начальное, videoTime < 2.5s)** `.auren-hero-desc`: position absolute; right 60px; bottom 80px; max-width 320px; Inter Tight 400; 20px; line-height 1.4; color #2E2A2A; z-index 2. Текст дословно: "Enter a realm where ancient artistry meets futuristic armor. Discover legendary warriors, cosmic relics".
5. **Оверлей с карточками функций (отображается при 3s ≤ videoTime ≤ 4s)** `.auren-cards-container`: position absolute; bottom 100px; left 0; width 100%; flex; justify-content center; gap 60px; z-index 10. Две `.auren-card` (каждая 560px × 320px; background linear-gradient(135deg, rgba(250,246,240,0.95), rgba(240,235,225,0.95)); border-radius 24px; padding 32px; flex; gap 30px; border 1px solid rgba(200,180,150,0.3); box-shadow 0 12px 40px rgba(0,0,0,0.15)):
     - Колонка с содержимым карточки: строка заголовка с номером (Italiana 24px, #000) + линия размером 30px × 1px rgba(0,0,0,0.2); подзаголовок (Inter Tight 10px, letter-spacing 0.1em, uppercase, #666); заголовок (Italiana 32px, line-height 1, #000, каждое слово принудительно переносится на отдельную строку через `.auren-br`); описание (Inter Tight 12px, line-height 1.5, #444, margin-bottom auto); строка кнопки (`.auren-card-btn`, cursor pointer, color #000) с `.auren-card-btn-text` (Inter Tight 11px, weight 500, letter-spacing 0.05em), за которым следует символ → размером 14px.
     - Изображение карточки `.auren-card-image`: ширина 240px, полная высота, border-radius 16px, background-image из URL с параметрами center/cover, с бейджем `.auren-card-plus` в правом нижнем углу (круг 32px, background #111, color #FFF, содержит "+").
     - Карточка 1: номер "01", подзаголовок "THE WARRIOR", заголовок "ASTRAL GUARDIAN", описание "Forged in celestial alloy, the Guardian represents a balance of precision, power, and ancient craft.", кнопка "EXPLORE GUARDIAN", изображение `https://cdn.jiro.build/Header%20Section/Auren3d/auren1.png`.
     - Карточка 2: номер "02", подзаголовок "THE ARMOR", заголовок "FORGED IN LIGHT", описание "Layered armor, luminous cores, and hand-forged celestial details built for the unknown.", кнопка "DISCOVER THE ARMOR", изображение `https://cdn.jiro.build/Header%20Section/Auren3d/auren2.png`.
6. **Финальный hero-заголовок (отображается при videoTime ≥ 5s)** — те же стили `.auren-hero-title`, но с переопределёнными inline-параметрами: right: 60px; left: auto; text-align: right. Слова: "THE FINAL", "CHAPTER", "UNFOLDS" (каждое на своей строке).
7. **Финальное hero-описание (videoTime ≥ 5s)** — те же стили `.auren-hero-desc`, переопределённые inline-параметрами: left: 60px; right: auto. Текст дословно: "Witness the culmination of celestial engineering and ancient magic. The archive awaits your discovery."

## Ресурсы
- Видео: `https://cdn.jiro.build/Header%20Section/Auren3d/output.mp4`
- Изображение карточки 1: `https://cdn.jiro.build/Header%20Section/Auren3d/auren1.png`
- Изображение карточки 2: `https://cdn.jiro.build/Header%20Section/Auren3d/auren2.png`

## Анимации
- **Синхронизация видео с прокруткой** (ключевой эффект): зарегистрировать ScrollTrigger и сопоставить прогресс прокрутки в секции высотой 500vh со значением currentTime видео, также сохраняя это значение в состоянии, чтобы оверлеи могли появляться/исчезать в заданные моменты времени.
```tsx
st = ScrollTrigger.create({
  trigger: ".auren-header-section",
  start: "top top",
  end: "bottom bottom",
  scrub: 1.5,
  onUpdate: (self) => {
    if (video.duration) {
      const time = self.progress * video.duration;
      video.currentTime = time;
      setVideoTime(time);
    }
  },
});
```
Инициализировать только после того, как метаданные видео станут доступны (readyState >= 1 или событие "loadedmetadata"), и уничтожать trigger при размонтировании.
- **Появление навигации**: исчезновение + сдвиг вниз, initial { opacity: 0, y: -20 } → { opacity: 1, y: 0 }, duration 0.8, ease "easeOut".
- **Выпадающее меню**: AnimatePresence, initial/exit { opacity: 0, y: -10, scale: 0.95 } → animate { opacity: 1, y: 0, scale: 1 }, duration 0.2.
- **Посимвольное появление заголовка** (для обоих заголовков): вариант родительского элемента задаёт stagger для дочерних элементов 0.05 (начальный заголовок также задерживает дочерние элементы на 0.3); каждый символ начинается с { opacity: 0, y: 50 } и анимируется до { opacity: 1, y: 0 } с duration 0.6 и ease "easeOut". Каждое слово обёрнуто в span с display inline-block и overflow:hidden, чтобы буквы появлялись снизу вверх. Заголовки исчезают через AnimatePresence (начальный заголовок: exit { opacity: 0, y: -50 } за 0.5s).
- **Появление описания через clip**: initial { opacity: 0, clipPath: 'inset(100% 0 0 0)' } → animate { opacity: 1, clipPath: 'inset(0% 0 0 0)' }, duration 1, начальное описание задерживается на 0.8s, оба используют ease "easeOut"; при исчезновении используется соответствующий clip-path.
- **Оверлей с карточками**: для контейнера initial { opacity: 0, y: 100 } → { opacity: 1, y: 0 }, exit { opacity: 0, y: -150 }, duration 0.6, ease "easeInOut"; каждая карточка дополнительно сдвигается от { y: 50, opacity: 0 } к { y: 0, opacity: 1 } с задержками 0.1 и 0.2, exit { y: -100, opacity: 0 }.
- Все оверлеи отображаются в зависимости от временных диапазонов videoTime: заголовок/описание №1 при time < 2.5, карточки при 3 ≤ time ≤ 4, заголовок/описание №2 при time ≥ 5.

## Адаптивное поведение
- **≤1200px**: gap центральной навигации уменьшается до 5vw; gap карточек — 20px с боковыми отступами 20px; ширина карточек — 450px, padding 24px, gap 20px; изображение карточки — 180px.
- **≤1024px**: padding навигации 30px 40px; hero-заголовок left 40px / font-size 70px; hero-описание right 40px / bottom 60px / 18px; центральная навигация скрыта; dropdown right 40px top 50px; карточки располагаются вертикально по центру, gap 20px, bottom 40px; карточки занимают всю доступную ширину (max 560px), height 280px; изображение карточки — 240px.
- **≈768px**: padding навигации 20px с элементами, выровненными по центру; hero-заголовок и описание скрыты (display none); object-position видео — 70% center; dropdown right 20px top 50px; карточки становятся position relative с margin-top 100px, gap 16px, боковыми отступами 16px; каждая карточка занимает всю доступную ширину, height auto, flex-direction column-reverse, padding 20px, gap 16px; изображение карточки занимает всю ширину, height 180px; заголовок карточки — 28px; span `.auren-br` с принудительным переносом скрываются.

## Ключевые принципы дизайна
- Редакционная эстетика luxury: дисплейный серифный шрифт Italiana на чистом белом фоне, минимум декоративных элементов, много свободного пространства.
- Кинематографичная синхронизация с прокруткой — главный интерактивный элемент: видео является временной шкалой, а не autoplay.
- Контент синхронизирован с временными отметками видео, а не напрямую с позицией прокрутки.
- Высококонтрастный чёрный текст на светлом видео для удобства чтения; эффект матового стекла у выпадающего меню добавляет глубину.
- Маски посимвольного появления придают типографике премиальный и продуманный эффект входа.

## Распространённые ошибки, которых следует избегать
- НЕ включать autoplay видео — оставить muted + playsInline и управлять currentTime через ScrollTrigger.
- НЕ регистрировать ScrollTrigger на верхнем уровне модуля без проверки window в окружении SSR/Next.js.
- НЕ забыть высоту корневого элемента 500vh + внутреннюю sticky-обёртку; без обоих элементов не будет пространства для прокрутки, и видео не будет синхронизироваться.
- Каждому дочернему элементу AnimatePresence должен быть назначен key, чтобы анимации исчезновения запускались корректно.
- Инициализировать ScrollTrigger только после загрузки метаданных видео и уничтожать его при размонтировании во избежание утечек.

## Заголовок страницы
AUREN — Восхождение астрального стража

## Интеграция (безопасность сборки — не пропускать)
- Добавить эту секцию как **новый** файл компонента с уникальным именем. Не редактировать и не перезаписывать существующие файлы, за исключением добавления импорта и рендера этого компонента.
- Рендерить её **после** всех существующих секций; сохранить каждую ранее созданную секцию в исходном виде — никогда не заменять и не удалять их.
- Если проекта нет, создать минимальное приложение React + Tailwind; если проект существует, использовать его как есть — не создавать проект заново и не менять конфигурацию или версию Tailwind/build.
- Сохранить компонент автономным: ограничить область действия его шрифтов и любых reset-стилей этой секцией; никогда не задавать глобальные стили для `body`/`html`/`*` или глобальный шрифт.
- Устанавливать только библиотеки, названные в этой секции.
Открыть в каталоге
Права на промпт принадлежат автору @iamtanzil_. За коммерческое использование — продвижение нейросетей, агрегаторов, Telegram-ботов — отвечаете вы: mozgi.io ответственности не несёт. Подробнее →
Модель
Claude Opus 5.5
Формат
3/2
Автор
@iamtanzil_
Оригинал
x.com ↗

Пожаловаться / удалить · Условия использования

Похожие промпты

Все промпты для Claude Opus 5.5

Скопировано