mozgi ← 所有提示詞
Claude Opus 5.5

OBLT 電動自行車互動式3D模型，滑鼠懸停時可顯示內部零件的「X光」效果

提示詞

# OBLT E-bike Header

一個全視窗、深色電影感的 OBLT 品牌電動自行車產品頁首，以 React（client component）、純 CSS，以及互動式跟隨游標的「x-ray」聚光燈揭示效果打造——移動滑鼠時，會擦去自行車的外觀照片，露出下方的內部碳纖維／變速箱結構。僅使用 React 建立（不使用動畫函式庫）。

## 技術堆疊（實際匯入的函式庫）
- 僅使用 React — `useRef`、`useState` 與 `MouseEvent` 型別。不使用 framer-motion、GSAP 或圖示函式庫。所有動畫皆以手寫 CSS keyframes + inline 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`，絕不套用至全域）。

## Section 容器
- 根 `<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;`。
- 內部垂直流程：頂部導覽列，接著是 flex-grow 間隔「stage」，最後是固定於底部的內容。

## 結構，依區段說明

### 1. Reveal 背景（`.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"`。
- **X-ray 圖層**（`.vt-bg-xray`，z-index 1）：包含自行車 X-ray／內部圖片（相同的 cover／center 尺寸設定）。此圖層由游標位置驅動的 radial gradient 遮罩（詳見 Animations）。`will-change: -webkit-mask-image, mask-image;` 以及 `transition: -webkit-mask-image .12s linear, mask-image .12s linear;`。
- **Veil 覆蓋層**（`.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;`。
- **Logo**（左側，`.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;` hover → 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;` hover → opacity .65。
  - **漢堡按鈕**（`.vt-burger`，桌面版隱藏）：34×34px，三條 `#E0E1CC` 的 22×2px 橫線，radius 2px，gap 5px。在 `.open` 狀態下：橫線 1 `translateY(7px) rotate(45deg)`，橫線 2 `opacity:0`，橫線 3 `translateY(-7px) rotate(-45deg)`。Transition `transform .25s ease, opacity .2s ease`。
- **行動版下拉選單**（`.vt-mobile-menu`，僅在 `menuOpen` 時 render）：絕對定位於導覽列下方（`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. Stage 間隔區（`.vt-stage`，z-index 30，`flex: 1 1 0%`）
- `display: flex; align-items: flex-start; justify-content: flex-end; padding-top: 22px;`。目前的 markup 中，它是一個空的 `aria-hidden` 間隔元素（`.vt-hint` 的脈動圓點樣式存在於 CSS 中，但 hint 元素並未 render）。
- （參考：`.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>` 包含 word-stagger 元件。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`。Hover → `gap: 14px`。內部圓形 `.circ`：40×40px，`border-radius:50%; background:#000;` 包含 SVG（stroke `#E0E1CC`）；按鈕 hover 時 `.circ` 縮放至 `1.1`（`transition: transform .25s ease`）。

## 素材（所有 URL）
- 外觀照片（基礎圖層）：`https://cdn.jiro.build/ARS/OBLT%20E%20Bike/bike-exterior.png`
- X-ray／內部照片（揭示圖層）：`https://cdn.jiro.build/ARS/OBLT%20E%20Bike/bike-xray-original.png`
- CTA 箭頭圖示：inline SVG，16×16，`viewBox="0 0 24 24"`，`stroke="currentColor"`，`stroke-width="2.2"`，圓角端點／接角，path：
  ```
  M5 12h14M13 6l6 6-6 6
  ```

## 動畫

### 游標「x-ray」聚光燈（核心互動）
- State：`hovering`（bool）與 `pos`（相對於 section bounding rect 的 px 座標 `{x,y}`）。`handleMove` 計算 `e.clientX - rect.left`、`e.clientY - http://rect.top`。
- 常數：`RADIUS = 165` px（聚光燈半徑）、`FEATHER = 45` px（柔和邊緣）。內部完全透明半徑 = `RADIUS - FEATHER` = 120px。
- X-ray 圖層的 `maskImage`／`WebkitMaskImage` 以 inline 方式設定。Hover 時：
  ```
  radial-gradient(circle 165px at {x}px {y}px, #000 0, #000 120px, transparent 165px)
  ```
  未 Hover 時（收合至無）：
  ```
  radial-gradient(circle 0px at 50% 50%, transparent 0, transparent 0)
  ```
- 遮罩以 `.12s linear` 進行 transition，讓揭示效果平順地追隨游標。注意：在 CSS `mask` 中，不透明的（`#000`）區域會保留該圖層——圓形區域會揭示 X-ray 圖片，而該圖層其餘部分會被隱藏（顯示下方的外觀圖片）。

### 標題單字上移（`WordsPullUp` 元件）
- 以空格分割標題；每個單字都是 `inline-block` span（`margin-right: 0.22em`，最後一個為 0）。每個單字以 `cubic-bezier(.16,1,.3,1) both` 執行 `wpuUp`，預設 `duration = 0.6s`，並以 `delayStep = 0.08s` 依序延遲（`animationDelay: i * 0.08s`）。
- 選用的上標星號（`.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`。

## Responsive
- **≤1000px**：padding `24px 28px 32px`；導覽列變為 `1fr auto`（logo + right）；中央 `.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`；logo `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`）。
- 產品揭示效果就是主視覺：游標如同 X-ray 手電筒，在一對疊加的照片上移動。
- 編輯感的超大型標題（line-height 0.85、緊密的 `-0.07em` 字距）固定於左下方；輔助文案與 CTA 位於右下方。
- 以交錯、平滑（`cubic-bezier(.16,1,.3,1)`）的進場動畫建立層次。

## 常見錯誤與避免方式
- 不要反轉遮罩邏輯：radial gradient 中的不透明 `#000` 會揭示 X-ray 圖層；透明環帶會隱藏它。若邏輯顛倒，內部結構會出現在游標以外的所有區域。
- 保持 `RADIUS - FEATHER`（120px）為內部實心停止點，並以 `RADIUS`（165px）作為透明停止點——這個 45px 的區段就是柔和羽化範圍。
- 滑鼠座標必須相對於 section rect（`getBoundingClientRect`），而非視窗。
- 遮罩 transition 僅為 `.12s linear`——較長或帶有 easing 的 transition 會讓聚光燈產生延遲感。
- 標題上的 `white-space: nowrap` 在桌面版是刻意設定；僅在 ≤600px 時切換為 `normal`。
- 所有 reset 與 Almarai `@import` 都必須限定於元件；不要修改全域 `body`／`html`。

## Page title
OBLT — Ready For The Ride

## Integration（建置安全性 — 不可略過）
- 將此區段加入一個**新的**元件檔案，使用獨特名稱。除新增其 import 與 render 外，不要編輯或覆寫任何現有檔案。
- 在**所有現有區段之後** render；保持所有先前建立的區段完全不變——絕不替換或移除它們。
- 如果不存在專案，建立一個最小化 React + Tailwind app；如果已存在專案，直接使用現有專案——不要重新建立腳手架，也不要變更 Tailwind／build 設定或版本。
- 保持自包含：將字型與任何 reset 限定於此區段；絕不設定全域 `body`／`html`／`*` 樣式或全域字型。
- 僅安裝此區段所指定的函式庫。
在目錄中開啟
此提示詞的權利屬於作者 @iamtanzil_。任何商業使用（推廣 AI 工具、聚合平台、Telegram 機器人）由你自行負責，mozgi.io 不承擔任何責任。 詳情 →
模型
Claude Opus 5.5
比例
3/2
作者
@iamtanzil_
原文
x.com ↗

檢舉 / 移除 · 使用條款

相似提示詞

全部提示詞： Claude Opus 5.5

已複製