mozgi ← Tutti i prompt
Claude Opus 5.5

Modello 3D interattivo della e-bike OBLT con rivelazione "a raggi X" delle parti interne al passaggio del cursore

Prompt

# OBLT E-bike Header

Un header di prodotto per e-bike scuro e cinematografico, a viewport intero, per il brand **OBLT**, realizzato in React (componente client) con CSS puro e un reveal interattivo a effetto “radiografia” che segue il cursore: muovendo il mouse, la foto esterna della bici viene rimossa per mostrare la struttura interna in carbonio e il cambio sottostante. Realizzato esclusivamente con React (nessuna libreria di animazione).

## Stack tecnologico (librerie effettivamente importate)
- Solo React — `useRef`, `useState` e il tipo `MouseEvent`. Niente framer-motion, niente GSAP, nessuna libreria di icone. Tutte le animazioni sono scritte manualmente con keyframe CSS + una `mask-image` CSS inline.
- Icona SVG (la freccia della CTA) inserita direttamente nel codice, non proveniente da una libreria.

## Font e stili globali
- Un singolo Google font, importato all’interno di un blocco `<style>`:
  ```
  @import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap');
  ```
- Stack dei font: `"Almarai","Helvetica Neue",Helvetica,Arial,sans-serif`.
- `-webkit-font-smoothing: antialiased`. `box-sizing: border-box` applicato al root e a tutti i discendenti (con scope limitato a `.vt-header`, mai globale).

## Contenitore della sezione
- Il root `<header className="vt-header">` è l’elemento che rileva il mouse (handler: `onMouseEnter`, `onMouseMove`, `onMouseLeave`).
- Stili: `position: relative; display: flex; flex-direction: column; min-height: 100vh; overflow: hidden; padding: 32px 56px 44px; background-color: #272727; color: #fff;`.
- Flusso verticale interno: navigazione superiore, poi uno spacer flessibile “stage”, quindi il contenuto inferiore ancorato alla base.

## Struttura, sezione per sezione

### 1. Sfondo del reveal (`.vt-bg`, absolute inset:0, z-index 0, pointer-events:none)
Tre livelli sovrapposti:
- **Immagine esterna di base** (`.vt-bg-img`): foto completa dell’esterno della bici, `object-fit: cover; object-position: center;`, riempie il livello. `user-select:none`, `-webkit-user-drag:none`, `referrerPolicy="no-referrer"`.
- **Livello radiografia** (`.vt-bg-xray`, z-index 1): contiene l’immagine radiografica/interna della bici (stesse dimensioni cover/center). Questo livello è mascherato da un gradiente radiale guidato dalla posizione del cursore (vedi Animazioni). `will-change: -webkit-mask-image, mask-image;` e `transition: -webkit-mask-image .12s linear, mask-image .12s linear;`.
- **Sovrapposizione velata** (`.vt-bg-veil`, z-index 2): un gradiente verticale scuro per mantenere leggibile il testo in alto e in basso:
  ```
  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. Navigazione superiore (`.vt-nav`, z-index 30)
- `display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;`.
- **Logo** (a sinistra, `.vt-logo`): testo `OBLT` seguito da uno span `.`. `font-size: 28px; font-weight: 700; letter-spacing: 0.5px; color: #E0E1CC;` (anche il punto è `#E0E1CC`).
- **Menu centrale** (`.vt-menu`, gap 40px): tre link — `E-bike`, `Caratteristiche`, `Contatti`. Ciascuno: `font-size: 16px; font-weight: 400; letter-spacing: .3px; color: #E0E1CC; opacity: .85; transition: opacity .2s ease;` hover → opacity 1.
- **Gruppo di destra** (`.vt-nav-right`, gap 18px): un link esplorativo in maiuscolo più un pulsante hamburger.
  - Testo del link `.vt-explore`: `Esplora la bici` — `font-size: 14px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #E0E1CC;` hover → opacity .65.
  - **Hamburger** (`.vt-burger`, nascosto su desktop): 34×34px, tre barre `#E0E1CC` da 22×2px, raggio 2px, gap 5px. Su `.open`: barra 1 `translateY(7px) rotate(45deg)`, barra 2 `opacity:0`, barra 3 `translateY(-7px) rotate(-45deg)`. Transizione `transform .25s ease, opacity .2s ease`.
- **Menu a tendina mobile** (`.vt-mobile-menu`, visualizzato solo quando `menuOpen`): posizionato in modo assoluto sotto la navigazione (`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;`. Link (`E-bike`, `Caratteristiche`, `Contatti`, `Esplora la bici`): `color:#E0E1CC; font-size:18px; padding:14px 4px; border-bottom:1px solid rgba(255,255,255,.08)`; ultimo link `border-bottom:none; font-weight:700`. Ogni link chiude il menu al clic.

### 3. Spacer dello stage (`.vt-stage`, z-index 30, `flex: 1 1 0%`)
- `display: flex; align-items: flex-start; justify-content: flex-end; padding-top: 22px;`. Nel markup attuale è uno spacer vuoto `aria-hidden` (gli stili del punto pulsante `.vt-hint` esistono nel CSS, ma l’elemento hint non viene renderizzato).
- (Riferimento: `.vt-hint` è definito come un’etichetta in maiuscolo da 11px/600 con un punto circolare da 36px, `border:1px solid rgba(46,211,176,.5); color:#2ed3b1;` che esegue `vtPulse 1.8s ease-in-out infinite`.)

### 4. Contenuto inferiore (`.vt-bottom`, z-index 30)
Griglia a 12 colonne: `grid-template-columns: repeat(12, 1fr); align-items: end; gap: 18px 32px;`.
- **Titolo** (`.vt-headline`, `grid-column: 1 / span 8`): `<h1>` contenente il componente word-stagger. Stile 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;`. Testo: **Pronto per il viaggio**.
- **Blocco di destra** (`.vt-right`, `grid-column: 9 / span 4; align-self: end; transform: translateY(22px);`):
  - Paragrafo (testo esatto): `Un cambio integrato, batteria e motore progettati in carbonio e costruiti per essere visti. Ogni sistema, a vista.` Stile: `font-size: 16px; line-height: 1.2; color: rgba(225,224,204,.7);` entra con `vtFadeUp .8s cubic-bezier(.16,1,.3,1) both` con `animation-delay: .5s`.
  - **Pulsante CTA** (`.vt-cta`): etichetta **Prenota la tua** più una freccia circolare. 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;`. Animazione tramite `vtFadeUp .8s cubic-bezier(.16,1,.3,1) both`, `animation-delay: .7s`. Hover → `gap: 14px`. Il cerchio interno `.circ`: 40×40px, `border-radius:50%; background:#000;` contiene l’SVG (`stroke="#E0E1CC"`); al passaggio del mouse sul pulsante `.circ` viene ridimensionato a `1.1` (`transition: transform .25s ease`).

## Risorse (ogni URL)
- Foto esterna (livello di base): `https://cdn.jiro.build/ARS/OBLT%20E%20Bike/bike-exterior.png`
- Foto radiografica / componenti interni (livello rivelato): `https://cdn.jiro.build/ARS/OBLT%20E%20Bike/bike-xray-original.png`
- Icona freccia CTA: SVG inline, 16×16, `viewBox="0 0 24 24"`, `stroke="currentColor"`, `stroke-width="2.2"`, estremità/giunzioni arrotondate, path:
  ```
  M5 12h14M13 6l6 6-6 6
  ```

## Animazioni

### Spotlight “radiografia” del cursore (interazione principale)
- Stato: `hovering` (bool) e `pos` ({x,y} in px relative al bounding rect della sezione). `handleMove` calcola `e.clientX - rect.left`, `e.clientY - http://rect.top`.
- Costanti: `RADIUS = 165` px (raggio dello spotlight), `FEATHER = 45` px (bordo sfumato). Raggio interno completamente trasparente = `RADIUS - FEATHER` = 120px.
- `maskImage` / `WebkitMaskImage` del livello radiografico viene impostato inline. Durante l’hover:
  ```
  radial-gradient(circle 165px at {x}px {y}px, #000 0, #000 120px, transparent 165px)
  ```
  Quando non è in hover (ridotto a nulla):
  ```
  radial-gradient(circle 0px at 50% 50%, transparent 0, transparent 0)
  ```
- Le maschere hanno una transizione di `.12s linear`, così il reveal segue fluidamente il cursore. NOTA: nel CSS, le aree opache (`#000`) MANTENGONO il livello — quindi il cerchio rivela l’immagine radiografica mentre il resto di quel livello viene nascosto (mostrando l’esterno sottostante).

### Sollevamento delle parole del titolo (componente `WordsPullUp`)
- Divide il titolo in corrispondenza degli spazi; ogni parola è uno span `inline-block` (`margin-right: 0.22em`, ultima parola 0). Ogni parola esegue `wpuUp` con `cubic-bezier(.16,1,.3,1) both`, `duration = 0.6s` predefinita, con ritardo progressivo `delayStep = 0.08s` (`animationDelay: i * 0.08s`).
- Asterisco opzionale in apice (`.wpu-ast`, `font-size:0.31em; vertical-align:top; top:0.15em; left:-0.05em;`) — non abilitato qui (`asterisk` è false per impostazione predefinita).
- Rispetta `@media (prefers-reduced-motion: reduce)` → `.wpu-word { animation: none; }`.

### Dissolvenza verso l’alto per il blocco di destra (`vtFadeUp`)
```
@keyframes vtFadeUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
```
Ritardo del paragrafo `.5s`, ritardo della CTA `.7s`; entrambi `.8s cubic-bezier(.16,1,.3,1) both`.

### Pulsazione (definita per il punto dell’hint)
```
@keyframes vtPulse { 0%,100%{transform:scale(1);opacity:.7} 50%{transform:scale(1.12);opacity:1} }
```
Applicata come `vtPulse 1.8s ease-in-out infinite`.

## Responsive
- **≤1000px**: padding `24px 28px 32px`; la navigazione diventa `1fr auto` (logo + destra); il menu centrale `.vt-menu` e `.vt-explore` vengono nascosti; hamburger visibile; `.vt-bottom` passa a una singola colonna (`gap:16px`); titolo e blocco di destra occupano tutta la larghezza; `.vt-right` `transform:none; align-self:start; margin-top:4px; max-width:520px`.
- **≤600px**: padding `18px 20px 26px`; logo `font-size:22px`; titolo `white-space:normal; font-size: clamp(40px, 13vw, 72px); line-height:0.92`; paragrafo `font-size:15px; margin-bottom:16px`; CTA `font-size:14px; padding:5px 5px 5px 20px`; `.circ` 36×36px.

## Principi fondamentali del design
- Stage scuro (`#272727`) con un singolo accento crema caldo (`#E0E1CC`) e un accento teal (`#2ed3b1`) riservato al punto pulsante (opzionale).
- Il reveal del prodotto È l’hero: il cursore agisce come una torcia a raggi X su una coppia di foto sovrapposte.
- Titolo editoriale sovradimensionato (line-height 0.85, tracking compatto `-0.07em`) ancorato in basso a sinistra; testo di supporto + CTA in basso a destra.
- Entrata gerarchica sfalsata e con easing (`cubic-bezier(.16,1,.3,1)`).

## Errori comuni da evitare
- Non invertire la logica della maschera: l’opacità `#000` nel gradiente radiale RIVELA il livello radiografico; l’anello trasparente lo nasconde. Invertire questa logica mostra i componenti interni ovunque tranne che sotto il cursore.
- Mantieni `RADIUS - FEATHER` (120px) come stop solido interno e `RADIUS` (165px) come stop trasparente — quella fascia da 45px è la sfumatura morbida.
- Le coordinate del mouse devono essere relative al rect della sezione (`getBoundingClientRect`), non alla viewport.
- La transizione della maschera deve essere esclusivamente `.12s linear` — una transizione più lunga o con easing rende lo spotlight lento e poco reattivo.
- `white-space: nowrap` sul titolo è intenzionale su desktop; passa a `normal` solo a ≤600px.
- Applica tutti i reset e l’`@import` di Almarai con scope limitato al componente; non modificare `body`/`html` globali.

## Titolo della pagina
OBLT — Pronto per il viaggio

## Integrazione (sicurezza della build — non saltare)
- Aggiungi questa sezione come **nuovo** file componente con un nome univoco. Non modificare né sovrascrivere file esistenti, salvo aggiungere il relativo import e renderizzarlo.
- Eseguila **dopo** tutte le sezioni esistenti; mantieni ogni sezione già realizzata esattamente com’è — non sostituirla né rimuoverla.
- Se non esiste alcun progetto, crea un’app React + Tailwind minimale; se ne esiste uno, usalo così com’è — non ricreare la struttura né modificare la configurazione o la versione di Tailwind/build.
- Mantienila autonoma: limita font e reset a questa sezione; non impostare stili globali per `body`/`html`/`*` né un font globale.
- Installa solo le librerie indicate in questa sezione.
Apri nel catalogo
I diritti su questo prompt appartengono all'autore @iamtanzil_. Dell'uso commerciale — promozione di strumenti IA, aggregatori, bot Telegram — rispondi tu: mozgi.io non si assume alcuna responsabilità. Dettagli →
Modello
Claude Opus 5.5
Formato
3/2
Autore
@iamtanzil_
Originale
x.com ↗

Segnala / rimuovi · Termini d'uso

Prompt simili

Tutti i prompt per Claude Opus 5.5

Copiato