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

Интерактивная 3D-модель электровелосипеда OBLT с функцией "рентгеновского" проявления внутренних деталей при наведении курсора

Промпт

# Заголовок e-bike OBLT

Полноэкранный тёмный кинематографичный заголовок продукта e-bike для бренда **OBLT**, созданный в React (клиентский компонент) с использованием чистого CSS и интерактивного эффекта «рентгеновского» прожектора, следующего за курсором: при перемещении мыши внешняя фотография велосипеда стирается, открывая находящуюся под ней внутреннюю структуру из карбона и редуктора. Создан только с помощью React (без библиотек анимации).

## Технологический стек (фактически импортируемые библиотеки)
- Только React — `useRef`, `useState` и тип `MouseEvent`. Без framer-motion, без GSAP, без библиотеки иконок. Вся анимация написана вручную с помощью CSS keyframes + встроенного CSS `mask-image`.
- SVG-иконка (стрелка CTA) встроена вручную, а не взята из библиотеки.

## Шрифты и глобальные стили
- Единственный шрифт Google, импортируемый внутри блока `<style>`:
  ```
  @import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap');
  ```
- Стек шрифтов: `"Almarai","Helvetica Neue",Helvetica,Arial,sans-serif`.
- `-webkit-font-smoothing: antialiased`. `box-sizing: border-box` применяется к корневому элементу и всем дочерним элементам (область действия ограничена `.vt-header`, глобальные стили не используются).

## Контейнер секции
- Корневой `<header className="vt-header">` — элемент, отслеживающий движение мыши (обработчики: `onMouseEnter`, `onMouseMove`, `onMouseLeave`).
- Стили: `position: relative; display: flex; flex-direction: column; min-height: 100vh; overflow: hidden; padding: 32px 56px 44px; background-color: #272727; color: #fff;`.
- Внутренний вертикальный поток: верхняя навигация, затем гибкий отступ «сцена», затем нижний контент, закреплённый у основания.

## Структура по секциям

### 1. Фоновый слой с эффектом проявления (`.vt-bg`, absolute inset:0, z-index 0, pointer-events:none)
Три наложенных друг на друга слоя:
- **Базовое внешнее изображение** (`.vt-bg-img`): полноразмерная фотография велосипеда снаружи, `object-fit: cover; object-position: center;`, заполняет слой. `user-select:none`, `-webkit-user-drag:none`, `referrerPolicy="no-referrer"`.
- **Рентгеновский слой** (`.vt-bg-xray`, z-index 1): содержит изображение велосипеда в рентгеновском виде/с внутренними компонентами (тот же размер `cover/center`). Этот слой маскируется радиальным градиентом, зависящим от положения курсора (см. раздел «Анимации»). `will-change: -webkit-mask-image, mask-image;` и `transition: -webkit-mask-image .12s linear, mask-image .12s linear;`.
- **Затемняющая вуаль** (`.vt-bg-veil`, z-index 2): вертикальный градиент затемнения, чтобы текст оставался читаемым сверху и снизу:
  ```
  linear-gradient(180deg, rgba(39,38,38,.62) 0%, rgba(39,38,38,.10) 26%, rgba(39,38,38,.10) 60%, rgba(39,38,38,.82) 100%)
  ```

### 2. Верхняя навигация (`.vt-nav`, z-index 30)
- `display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;`.
- **Логотип** (слева, `.vt-logo`): текст `OBLT`, за которым следует span с `.`. `font-size: 28px; font-weight: 700; letter-spacing: 0.5px; color: #E0E1CC;` (точка также имеет цвет `#E0E1CC`).
- **Центральное меню** (`.vt-menu`, gap 40px): три ссылки — `E-bikes`, `Features`, `Connect`. Для каждой: `font-size: 16px; font-weight: 400; letter-spacing: .3px; color: #E0E1CC; opacity: .85; transition: opacity .2s ease;` при наведении → opacity 1.
- **Правая группа** (`.vt-nav-right`, gap 18px): ссылка explore в верхнем регистре и кнопка-гамбургер.
  - Текст ссылки `.vt-explore`: `Explore the bike` — `font-size: 14px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #E0E1CC;` при наведении → opacity .65.
  - **Гамбургер** (`.vt-burger`, скрыт на десктопе): 34×34px, три полосы `#E0E1CC` размером 22×2px, радиус 2px, расстояние 5px. В состоянии `.open`: полоса 1 — `translateY(7px) rotate(45deg)`, полоса 2 — `opacity:0`, полоса 3 — `translateY(-7px) rotate(-45deg)`. Переход `transform .25s ease, opacity .2s ease`.
- **Мобильное выпадающее меню** (`.vt-mobile-menu`, отображается только при `menuOpen`): абсолютно позиционируется под навигацией (`top:100%; margin-top:16px; z-index:40`), `background: rgba(20,19,19,.97); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 8px 18px;`. Ссылки (`E-bikes`, `Features`, `Connect`, `Explore the bike`): `color:#E0E1CC; font-size:18px; padding:14px 4px; border-bottom:1px solid rgba(255,255,255,.08)`; у последней ссылки `border-bottom:none; font-weight:700`. Каждая ссылка закрывает меню по клику.

### 3. Отступ сцены (`.vt-stage`, z-index 30, `flex: 1 1 0%`)
- `display: flex; align-items: flex-start; justify-content: flex-end; padding-top: 22px;`. В текущей разметке это пустой отступ с `aria-hidden` (стили пульсирующей точки `.vt-hint` существуют в CSS, но сам элемент подсказки не отображается).
- (Справочно: `.vt-hint` оформлен как подпись в верхнем регистре размером 11px/600 и круглая точка диаметром 36px, `border:1px solid rgba(46,211,176,.5); color:#2ed3b1;`, с анимацией `vtPulse 1.8s ease-in-out infinite`.)

### 4. Нижний контент (`.vt-bottom`, z-index 30)
Сетка из 12 колонок: `grid-template-columns: repeat(12, 1fr); align-items: end; gap: 18px 32px;`.
- **Заголовок** (`.vt-headline`, `grid-column: 1 / span 8`): `<h1>`, содержащий компонент поочерёдного появления слов. Стили h1: `color: #E0E1CC; font-weight: 500; font-size: clamp(36px, 7vw, 116px); line-height: 0.85; letter-spacing: -0.07em; white-space: nowrap; margin:0;`. Текст: **Ready For The Ride**.
- **Правый блок** (`.vt-right`, `grid-column: 9 / span 4; align-self: end; transform: translateY(22px);`):
  - Абзац (дословно): `An integrated gearbox, battery, and motor engineered in carbon and built to be seen. Every system, in the open.` Стили: `font-size: 16px; line-height: 1.2; color: rgba(225,224,204,.7);` появляется с помощью `vtFadeUp .8s cubic-bezier(.16,1,.3,1) both` с задержкой анимации `animation-delay: .5s`.
  - **Кнопка CTA** (`.vt-cta`): текст **Reserve yours** и круглая стрелка. Пилюля: `color:#000; background:#E0E1CC; border:none; border-radius:9999px; padding:6px 6px 6px 22px; font-size: clamp(14px, 1vw, 16px); font-weight:500; display:inline-flex; align-items:center; gap:10px;`. Анимируется через `vtFadeUp .8s cubic-bezier(.16,1,.3,1) both`, `animation-delay: .7s`. При наведении → `gap: 14px`. Внутренний круг `.circ`: 40×40px, `border-radius:50%; background:#000;`, содержит SVG (`stroke="#E0E1CC"`); при наведении на кнопку `.circ` увеличивается до `1.1` (`transition: transform .25s ease`).

## Ресурсы (все URL)
- Внешняя фотография (базовый слой): `https://cdn.jiro.build/ARS/OBLT%20E%20Bike/bike-exterior.png`
- Фотография в рентгеновском виде / внутренних компонентов (проявляемый слой): `https://cdn.jiro.build/ARS/OBLT%20E%20Bike/bike-xray-original.png`
- Иконка стрелки CTA: встроенный SVG, 16×16, `viewBox="0 0 24 24"`, `stroke="currentColor"`, `stroke-width="2.2"`, закруглённые окончания и соединения, path:
  ```
  M5 12h14M13 6l6 6-6 6
  ```

## Анимации

### Рентгеновский прожектор, следующий за курсором (ключевая интеракция)
- Состояния: `hovering` (bool) и `pos` ({x,y} в пикселях относительно ограничивающего прямоугольника секции). `handleMove` вычисляет `e.clientX - rect.left`, `e.clientY - http://rect.top`.
- Константы: `RADIUS = 165` px (радиус прожектора), `FEATHER = 45` px (мягкий край). Внутренний радиус полного просвета = `RADIUS - FEATHER` = 120px.
- Свойства `maskImage` / `WebkitMaskImage` рентгеновского слоя задаются встроенными стилями. При наведении:
  ```
  radial-gradient(circle 165px at {x}px {y}px, #000 0, #000 120px, transparent 165px)
  ```
  Когда курсор не наведен (свёрнуто до нулевого размера):
  ```
  radial-gradient(circle 0px at 50% 50%, transparent 0, transparent 0)
  ```
- Переход маски длится `.12s linear`, поэтому проявление плавно следует за курсором. ПРИМЕЧАНИЕ: в CSS непрозрачные (`#000`) области СОХРАНЯЮТ слой — круг открывает рентгеновское изображение, а остальная часть слоя скрыта (под ней видно внешнее изображение).

### Подъём слов в заголовке (компонент `WordsPullUp`)
- Заголовок разделяется по пробелам; каждое слово — span с `inline-block` (`margin-right: 0.22em`, у последнего — 0). Каждое слово анимируется через `wpuUp` с `cubic-bezier(.16,1,.3,1) both`, стандартная `duration = 0.6s`, задержка между словами `delayStep = 0.08s` (`animationDelay: i * 0.08s`).
- Keyframes:
  ```
  @keyframes wpuUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
  ```
- Необязательная надстрочная звёздочка (`.wpu-ast`, `font-size:0.31em; vertical-align:top; top:0.15em; left:-0.05em;`) — здесь не включена (`asterisk` по умолчанию имеет значение false).
- Учитывает `@media (prefers-reduced-motion: reduce)` → `.wpu-word { animation: none; }`.

### Появление правого блока снизу (`vtFadeUp`)
```
@keyframes vtFadeUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
```
Задержка абзаца `.5s`, задержка CTA `.7s`; для обоих используются `.8s cubic-bezier(.16,1,.3,1) both`.

### Пульсация (определена для точки подсказки)
```
@keyframes vtPulse { 0%,100%{transform:scale(1);opacity:.7} 50%{transform:scale(1.12);opacity:1} }
```
Применяется `vtPulse 1.8s ease-in-out infinite`.

## Адаптивность
- **≤1000px**: padding `24px 28px 32px`; навигация превращается в `1fr auto` (логотип + правая группа); центральное `.vt-menu` и `.vt-explore` скрыты; гамбургер отображается; `.vt-bottom` сворачивается в одну колонку (`gap:16px`); заголовок и правый блок занимают всю ширину; у `.vt-right` `transform:none; align-self:start; margin-top:4px; max-width:520px`.
- **≤600px**: padding `18px 20px 26px`; у логотипа `font-size:22px`; у заголовка `white-space:normal; font-size: clamp(40px, 13vw, 72px); line-height:0.92`; у абзаца `font-size:15px; margin-bottom:16px`; у CTA `font-size:14px; padding:5px 5px 5px 20px`; `.circ` размером 36×36px.

## Ключевые принципы дизайна
- Тёмная сцена (`#272727`) с единственным тёплым кремовым акцентом (`#E0E1CC`) и бирюзовым акцентом (`#2ed3b1`), зарезервированным для (необязательной) пульсирующей подсказки.
- Проявление продукта — главный визуальный элемент: курсор действует как рентгеновский фонарь над парой наложенных фотографий.
- Крупный редакционный заголовок (line-height 0.85, плотный трекинг `-0.07em`), закреплённый внизу слева; вспомогательный текст и CTA — внизу справа.
- Последовательное плавное появление (`cubic-bezier(.16,1,.3,1)`) для создания визуальной иерархии.

## Распространённые ошибки, которых следует избегать
- Не инвертируйте логику маски: непрозрачный `#000` в радиальном градиенте ОТКРЫВАЕТ рентгеновский слой; прозрачное кольцо скрывает его. При обратной логике внутренние компоненты будут видны повсюду, кроме области под курсором.
- Сохраняйте `RADIUS - FEATHER` (120px) как внутреннюю сплошную границу, а `RADIUS` (165px) — как прозрачную границу: эта полоса шириной 45px создаёт мягкий край.
- Координаты мыши должны вычисляться относительно прямоугольника секции (`getBoundingClientRect`), а не окна просмотра.
- Переход маски должен быть только `.12s linear` — более длительный переход или easing создаст ощущение запаздывания прожектора.
- `white-space: nowrap` у заголовка на десктопе используется намеренно; переключайте на `normal` только при ≤600px.
- Ограничьте все сбросы стилей и `@import` шрифта Almarai этим компонентом; не изменяйте глобальные стили `body`/`html`.

## Заголовок страницы
OBLT — Ready For The Ride

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

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

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

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

Скопировано