mozgi ← Tüm promptlar
Claude Opus 5.5

İnteraktif OBLT elektrikli bisiklet 3D modeli, fareyle üzerine gelindiğinde dahili parçaların "röntgen" görünümünü ortaya çıkarır

Prompt

# OBLT E-bike Header

**OBLT** markası için, React (client component) ile saf CSS kullanılarak oluşturulmuş, tam viewport kaplayan, karanlık ve sinematik bir e-bike ürün header’ı. Etkileşimli, imleci takip eden bir “x-ray” spot ışığı açığa çıkarma efekti bulunur — fare hareket ettirildiğinde bisikletin dış yüzey fotoğrafı silinerek altındaki dahili karbon/şanzıman yapısı ortaya çıkar. Yalnızca React kullanılarak oluşturulmuştur (animasyon kütüphaneleri yok).

## Teknoloji yığını (gerçekte içe aktarılan kütüphaneler)
- Yalnızca React — `useRef`, `useState` ve `MouseEvent` türü. framer-motion yok, GSAP yok, ikon kütüphanesi yok. Tüm animasyonlar elle yazılmış CSS keyframe’leri + satır içi CSS `mask-image` ile oluşturulur.
- SVG ikon (CTA oku) bir kütüphaneden değil, doğrudan satır içine yazılmıştır.

## Fontlar ve global stiller
- `<style>` bloğu içinde içe aktarılan tek Google font:
  ```
  @import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap');
  ```
- Font yığını: `"Almarai","Helvetica Neue",Helvetica,Arial,sans-serif`.
- `-webkit-font-smoothing: antialiased`. `box-sizing: border-box`, root ve tüm alt öğelere uygulanır (`.vt-header` kapsamında, hiçbir zaman global değildir).

## Section container
- Root `<header className="vt-header">`, fare takibi yapan öğedir (handler’lar: `onMouseEnter`, `onMouseMove`, `onMouseLeave`).
- Stiller: `position: relative; display: flex; flex-direction: column; min-height: 100vh; overflow: hidden; padding: 32px 56px 44px; background-color: #272727; color: #fff;`.
- Dikey iç akış: üst navigasyon, ardından flex-grow spacer “stage”, son olarak tabana sabitlenmiş alt içerik.

## Yapı, section bazında

### 1. Açığa çıkarma arka planı (`.vt-bg`, absolute inset:0, z-index 0, pointer-events:none)
Üst üste yerleştirilmiş üç katman:
- **Temel dış yüzey görseli** (`.vt-bg-img`): bisikletin tamamını gösteren dış yüzey fotoğrafı, `object-fit: cover; object-position: center;`, katmanı tamamen doldurur. `user-select:none`, `-webkit-user-drag:none`, `referrerPolicy="no-referrer"`.
- **X-ray katmanı** (`.vt-bg-xray`, z-index 1): bisikletin x-ray/iç yapı görselini içerir (aynı cover/center boyutlandırması). Bu katman, imleç konumuyla kontrol edilen bir radial gradient tarafından maskelenir (bkz. Animasyonlar). `will-change: -webkit-mask-image, mask-image;` ve `transition: -webkit-mask-image .12s linear, mask-image .12s linear;`.
- **Perde overlay’i** (`.vt-bg-veil`, z-index 2): metnin üst ve alt bölümlerde okunabilir kalması için dikey koyulaştırma gradient’i:
  ```
  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. Üst navigasyon (`.vt-nav`, z-index 30)
- `display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;`.
- **Logo** (sol, `.vt-logo`): ardından bir `.` span’i gelen `OBLT` metni. `font-size: 28px; font-weight: 700; letter-spacing: 0.5px; color: #E0E1CC;` (nokta da `#E0E1CC`).
- **Orta menü** (`.vt-menu`, gap 40px): üç bağlantı — `E-bikes`, `Features`, `Connect`. Her biri: `font-size: 16px; font-weight: 400; letter-spacing: .3px; color: #E0E1CC; opacity: .85; transition: opacity .2s ease;` hover → opacity 1.
- **Sağ grup** (`.vt-nav-right`, gap 18px): büyük harfli bir explore bağlantısı ve hamburger butonu.
  - `.vt-explore` bağlantı metni: `Explore the bike` — `font-size: 14px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #E0E1CC;` hover → opacity .65.
  - **Hamburger** (`.vt-burger`, masaüstünde gizli): 34×34px, her biri 22×2px boyutunda üç `#E0E1CC` çubuğu, radius 2px, gap 5px. `.open` durumunda: çubuk 1 `translateY(7px) rotate(45deg)`, çubuk 2 `opacity:0`, çubuk 3 `translateY(-7px) rotate(-45deg)`. Transition `transform .25s ease, opacity .2s ease`.
- **Mobil açılır menü** (`.vt-mobile-menu`, yalnızca `menuOpen` durumunda oluşturulur): navigasyonun altında mutlak konumlandırılır (`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;`. Bağlantılar (`E-bikes`, `Features`, `Connect`, `Explore the bike`): `color:#E0E1CC; font-size:18px; padding:14px 4px; border-bottom:1px solid rgba(255,255,255,.08)`; son bağlantıda `border-bottom:none; font-weight:700`. Her bağlantı tıklandığında menüyü kapatır.

### 3. Stage spacer (`.vt-stage`, z-index 30, `flex: 1 1 0%`)
- `display: flex; align-items: flex-start; justify-content: flex-end; padding-top: 22px;`. Mevcut markup’ta boş bir `aria-hidden` spacer’dır (`.vt-hint` için pulse eden nokta stilleri CSS’te mevcut olsa da hint öğesi render edilmez).
- (Referans: `.vt-hint`, büyük harfli 11px/600 bir etiket ve `border:1px solid rgba(46,211,176,.5); color:#2ed3b1;` özelliklerine sahip, 36px çapında dairesel bir nokta olarak stillendirilmiştir ve `vtPulse 1.8s ease-in-out infinite` animasyonunu çalıştırır.)

### 4. Alt içerik (`.vt-bottom`, z-index 30)
12 sütunlu grid: `grid-template-columns: repeat(12, 1fr); align-items: end; gap: 18px 32px;`.
- **Başlık** (`.vt-headline`, `grid-column: 1 / span 8`): kelime kademelendirme bileşenini içeren bir `<h1>`. h1 stili: `color: #E0E1CC; font-weight: 500; font-size: clamp(36px, 7vw, 116px); line-height: 0.85; letter-spacing: -0.07em; white-space: nowrap; margin:0;`. Metin: **Ready For The Ride**.
- **Sağ blok** (`.vt-right`, `grid-column: 9 / span 4; align-self: end; transform: translateY(22px);`):
  - Paragraf (aynen): `An integrated gearbox, battery, and motor engineered in carbon and built to be seen. Every system, in the open.` Stil: `font-size: 16px; line-height: 1.2; color: rgba(225,224,204,.7);` ve `vtFadeUp .8s cubic-bezier(.16,1,.3,1) both` ile görünür hale gelir; `animation-delay: .5s`.
  - **CTA butonu** (`.vt-cta`): dairesel ok ile birlikte **Reserve yours** etiketi. Pill: `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` ile animasyon uygulanır; `animation-delay: .7s`. Hover → `gap: 14px`. İç daire `.circ`: 40×40px, `border-radius:50%; background:#000;`, SVG’yi içerir (`stroke="#E0E1CC"`); buton hover olduğunda `.circ`, `transition: transform .25s ease` ile `1.1` ölçeğine çıkar.

## Asset’ler (her URL)
- Dış yüzey fotoğrafı (temel katman): `https://cdn.jiro.build/ARS/OBLT%20E%20Bike/bike-exterior.png`
- X-ray / iç yapı fotoğrafı (açığa çıkarılan katman): `https://cdn.jiro.build/ARS/OBLT%20E%20Bike/bike-xray-original.png`
- CTA ok ikonu: satır içi SVG, 16×16, `viewBox="0 0 24 24"`, `stroke="currentColor"`, `stroke-width="2.2"`, yuvarlak uçlar/birleşimler, path:
  ```
  M5 12h14M13 6l6 6-6 6
  ```

## Animasyonlar

### İmleç “x-ray” spot ışığı (temel etkileşim)
- State: `hovering` (bool) ve `pos` ({x,y}, section’ın bounding rect’ine göre px cinsinden). `handleMove`, `e.clientX - rect.left`, `e.clientY - http://rect.top` değerlerini hesaplar.
- Sabitler: `RADIUS = 165` px (spot ışığı yarıçapı), `FEATHER = 45` px (yumuşak kenar). İçte tamamen saydam yarıçap = `RADIUS - FEATHER` = 120px.
- X-ray katmanının `maskImage` / `WebkitMaskImage` değeri satır içinde ayarlanır. Hover durumunda:
  ```
  radial-gradient(circle 165px at {x}px {y}px, #000 0, #000 120px, transparent 165px)
  ```
  Hover yokken (sıfıra daraltılmış):
  ```
  radial-gradient(circle 0px at 50% 50%, transparent 0, transparent 0)
  ```
- Mask geçişleri `.12s linear` süresindedir; böylece açığa çıkarma imleci yumuşak biçimde takip eder. NOT: CSS `mask` içinde opak (`#000`) alanlar katmanı TUTAR — bu nedenle daire x-ray görselini açığa çıkarırken katmanın geri kalanı gizlenir (altındaki dış yüzey görünür).

### Başlık kelimelerinin yukarı çekilmesi (`WordsPullUp` bileşeni)
- Başlığı boşluklardan böler; her kelime bir `inline-block` span’idir (`margin-right: 0.22em`, son kelime 0). Her kelime, `cubic-bezier(.16,1,.3,1) both` ile `wpuUp` animasyonunu çalıştırır; varsayılan `duration = 0.6s`, `delayStep = 0.08s` ile kademelendirilir (`animationDelay: i * 0.08s`).
- İsteğe bağlı üst simge yıldız işareti (`.wpu-ast`, `font-size:0.31em; vertical-align:top; top:0.15em; left:-0.05em;`) — burada etkin değildir (`asterisk` varsayılan olarak false).
- `@media (prefers-reduced-motion: reduce)` tercihlerine uyar → `.wpu-word { animation: none; }`.

### Sağ blok için yukarı doğru belirme (`vtFadeUp`)
```
@keyframes vtFadeUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
```
Paragraf gecikmesi `.5s`, CTA gecikmesi `.7s`; her ikisi de `.8s cubic-bezier(.16,1,.3,1) both`.

### Pulse (hint noktası için tanımlı)
```
@keyframes vtPulse { 0%,100%{transform:scale(1);opacity:.7} 50%{transform:scale(1.12);opacity:1} }
```
`vtPulse 1.8s ease-in-out infinite` uygulanır.

## Responsive
- **≤1000px**: padding `24px 28px 32px`; nav `1fr auto` (logo + sağ grup) haline gelir; orta `.vt-menu` ve `.vt-explore` gizlenir; hamburger gösterilir; `.vt-bottom` tek sütuna düşer (`gap:16px`); başlık ve sağ blok tam genişliğe yayılır; `.vt-right` `transform:none; align-self:start; margin-top:4px; max-width:520px`.
- **≤600px**: padding `18px 20px 26px`; logo `font-size:22px`; başlık `white-space:normal; font-size: clamp(40px, 13vw, 72px); line-height:0.92`; paragraf `font-size:15px; margin-bottom:16px`; CTA `font-size:14px; padding:5px 5px 5px 20px`; `.circ` 36×36px.

## Temel tasarım ilkeleri
- Tek sıcak krem vurgu (`#E0E1CC`) ve isteğe bağlı pulse hint için ayrılmış teal vurgu (`#2ed3b1`) kullanılan karanlık stage (`#272727`).
- Ürün açığa çıkarma efekti hero’nun kendisidir: imleç, üst üste yerleştirilmiş bir fotoğraf çifti üzerinde x-ray feneri gibi davranır.
- Sol alt köşeye sabitlenmiş editoryal, büyük boyutlu başlık (line-height 0.85, sıkı `-0.07em` harf aralığı); destekleyici metin + CTA sağ altta.
- Hiyerarşi için kademeli, easing uygulanmış (`cubic-bezier(.16,1,.3,1)`) giriş animasyonu.

## Kaçınılması gereken yaygın hatalar
- Mask mantığını tersine çevirmeyin: radial gradient içindeki opak `#000`, x-ray katmanını AÇIĞA ÇIKARIR; transparent halka katmanı gizler. Bunu ters yapmak, iç yapının imlecin altı dışında her yerde görünmesine neden olur.
- İçteki katı durak olarak `RADIUS - FEATHER` (120px), transparent durak olarak `RADIUS` (165px) değerlerini koruyun — bu 45px’lik bant yumuşak feather alanıdır.
- Fare koordinatları viewport’a göre değil, section rect’ine göre olmalıdır (`getBoundingClientRect`).
- Mask geçişi yalnızca `.12s linear` olmalıdır — daha uzun/eased bir geçiş spot ışığının gecikmeli hissettirmesine neden olur.
- Başlıktaki `white-space: nowrap` masaüstünde bilerek kullanılır; yalnızca ≤600px’te `normal` değerine geçin.
- Tüm reset’leri ve Almarai `@import` ifadesini bileşen kapsamında tutun; global `body`/`html` stillerine dokunmayın.

## Sayfa başlığı
OBLT — Ready For The Ride

## Entegrasyon (build güvenliği — atlamayın)
- Bu section’ı benzersiz bir ada sahip **yeni** bir component dosyası olarak ekleyin. Import ve render eklemek dışında mevcut hiçbir dosyayı düzenlemeyin veya üzerine yazmayın.
- Mevcut tüm section’lardan **sonra** render edin; önceden oluşturulmuş her section’ı olduğu gibi koruyun — hiçbir zaman değiştirmeyin veya kaldırmayın.
- Proje yoksa minimal bir React + Tailwind uygulaması oluşturun; varsa olduğu gibi kullanın — yeniden scaffold oluşturmayın ve Tailwind/build config’ini veya sürümünü değiştirmeyin.
- Kendi içinde bağımsız olsun: fontlarını ve reset’lerini bu section kapsamında tanımlayın; hiçbir zaman global `body`/`html`/`*` stili veya global font ayarlamayın.
- Yalnızca bu section’ın belirttiği kütüphaneleri yükleyin.
Katalogda aç
Bu promptun hakları yazarı @iamtanzil_'a aittir. Ticari kullanımdan — yapay zekâ araçlarının, toplayıcıların, Telegram botlarının tanıtımı — siz sorumlusunuz: mozgi.io sorumluluk kabul etmez. Ayrıntılar →
Model
Claude Opus 5.5
Format
3/2
Yazar
@iamtanzil_
Orijinal
x.com ↗

Bildir / kaldır · Kullanım koşulları

Benzer promptlar

Tüm promptlar: Claude Opus 5.5

Kopyalandı