Galleria di shader procedurali

Crea un sito web showroom cinematografico per un marchio fittizio di veicoli elettrici, Nexus Automotive. La sezione hero è uno shader procedurale a frammenti a schermo intero — luce che fluisce in tempo reale — sullo sfondo di due righe di testo serif di grandi dimensioni e di un breve slogan, seguita durante lo scorrimento da una sezione con il manifesto del brand. Il fulcro è un indice dei modelli: quattro veicoli (una berlina di punta, un SUV da turismo, una supercar ad alte prestazioni e una city car compatta) elencati in grandi righe tipografiche. Passando il mouse su una riga viene mostrata accanto all'elenco l'immagine dell'auto corrispondente e le altre voci si attenuano; facendo clic si apre una pagina di dettaglio dedicata con un'introduzione sul posizionamento e tre capitoli di testo (forma, abitacolo, prestazioni), oltre a un modo per tornare all'elenco. Aggiungi una sezione video dedicata all'esperienza del brand e un footer di contatto con l'indirizzo dell'experience center e gli orari di apertura. Mantieni una palette quasi monocromatica, abbina un carattere serif da display a un carattere monospaziato per le etichette e usa uno scorrimento fluido con un leggero parallasse e transizioni in dissolvenza. Realizza un sito statico eseguibile direttamente nel browser: lo scorrimento, la comparsa al passaggio del mouse e la navigazione tra pagine devono funzionare davvero. Sostituisci i contenuti presentati con quelli di un marchio di caffè specialty: cinque linee di prodotti diventano cinque caffè monorigine, lo shader hero passa a vapore marrone caldo e particelle di chicchi di caffè, e ogni pagina di dettaglio aggiunge origine, processo, note aromatiche e consigli per la preparazione. 

Crea un sito web showroom cinematografico per un marchio fittizio di veicoli elettrici, Nexus Automotive. La sezione hero è uno shader procedurale a frammenti a schermo intero — luce che fluisce in tempo reale — sullo sfondo di due righe di testo serif di grandi dimensioni e di un breve slogan, seguita durante lo scorrimento da una sezione con il manifesto del brand. Il fulcro è un indice dei modelli: quattro veicoli (una berlina di punta, un SUV da turismo, una supercar ad alte prestazioni e una city car compatta) elencati in grandi righe tipografiche. Passando il mouse su una riga viene mostrata accanto all'elenco l'immagine dell'auto corrispondente e le altre voci si attenuano; facendo clic si apre una pagina di dettaglio dedicata con un'introduzione sul posizionamento e tre capitoli di testo (forma, abitacolo, prestazioni), oltre a un modo per tornare all'elenco. Aggiungi una sezione video dedicata all'esperienza del brand e un footer di contatto con l'indirizzo dell'experience center e gli orari di apertura. Mantieni una palette quasi monocromatica, abbina un carattere serif da display a un carattere monospaziato per le etichette e usa uno scorrimento fluido con un leggero parallasse e transizioni in dissolvenza. Realizza un sito statico eseguibile direttamente nel browser: lo scorrimento, la comparsa al passaggio del mouse e la navigazione tra pagine devono funzionare davvero. Passa tutti i testi del sito all'inglese, inclusi l'indice di grandi dimensioni, il testo delle pagine di dettaglio e la navigazione. Riadatta le dimensioni dei caratteri e l'interlinea per l'inglese, mantenendo invariati gli elementi visivi dello shader e le interazioni al passaggio del mouse.