Galerie de shaders procéduraux

Créez un site de showroom cinématographique pour une marque fictive de véhicules électriques, Nexus Automotive. Le hero est un shader de fragment procédural plein écran — de la lumière qui s'écoule en temps réel — derrière deux lignes de texte serif surdimensionné et un court slogan, suivi au défilement d'une section présentant le manifeste de la marque. L'élément central est un index des modèles : quatre véhicules (une berline haut de gamme, un SUV de voyage, une supercar de performance et une citadine compacte) présentés sous forme de grandes lignes typographiques. Au survol d'une ligne, l'image de la voiture correspondante apparaît à côté de la liste tandis que les autres entrées s'estompent ; un clic ouvre une page de détail dédiée avec une introduction de positionnement et trois chapitres de texte (design, habitacle, performances), ainsi qu'un moyen de revenir à la liste. Ajoutez une section vidéo consacrée à l'expérience de la marque et un pied de page de contact avec l'adresse et les horaires d'ouverture du centre d'expérience. Conservez une palette quasi monochrome, associez une police serif de titrage à une police mono pour les libellés, et utilisez un défilement fluide avec un léger effet de parallaxe et des transitions en fondu. Livrez un site statique qui s'exécute directement dans le navigateur : le défilement, les révélations au survol et la navigation entre les pages doivent tous fonctionner réellement. Remplacez le contenu présenté par une marque de cafés de spécialité : les cinq gammes de produits deviennent cinq cafés d'origine unique, le hero en shader passe à une vapeur brun chaud et à des particules de grains de café, et chaque page de détail ajoute l'origine, le procédé, les notes aromatiques et des conseils de préparation. 

Créez un site de showroom cinématographique pour une marque fictive de véhicules électriques, Nexus Automotive. Le hero est un shader de fragment procédural plein écran — de la lumière qui s'écoule en temps réel — derrière deux lignes de texte serif surdimensionné et un court slogan, suivi au défilement d'une section présentant le manifeste de la marque. L'élément central est un index des modèles : quatre véhicules (une berline haut de gamme, un SUV de voyage, une supercar de performance et une citadine compacte) présentés sous forme de grandes lignes typographiques. Au survol d'une ligne, l'image de la voiture correspondante apparaît à côté de la liste tandis que les autres entrées s'estompent ; un clic ouvre une page de détail dédiée avec une introduction de positionnement et trois chapitres de texte (design, habitacle, performances), ainsi qu'un moyen de revenir à la liste. Ajoutez une section vidéo consacrée à l'expérience de la marque et un pied de page de contact avec l'adresse et les horaires d'ouverture du centre d'expérience. Conservez une palette quasi monochrome, associez une police serif de titrage à une police mono pour les libellés, et utilisez un défilement fluide avec un léger effet de parallaxe et des transitions en fondu. Livrez un site statique qui s'exécute directement dans le navigateur : le défilement, les révélations au survol et la navigation entre les pages doivent tous fonctionner réellement. Passez tous les textes du site en anglais, y compris le grand index, le corps de texte des pages de détail et la navigation. Réajustez les tailles de police et les interlignes pour l'anglais, sans modifier les visuels en shader ni les interactions au survol.