Conception du shader Aurora Veil

Aurora Veil comme conception de shader

Cet exemple officiel OpenDesign présente une composition WebGL2 plein écran construite autour du titre créé « AURORA VEIL ». Le titre est réparti sur deux lignes, avec « AURORA », plus lourd, au-dessus de « VEIL », plus léger, ce qui donne à la zone inférieure gauche un point d’entrée typographique marqué tout en laissant le champ animé ouvert à droite.

La phrase d’accompagnement définit directement l’idée visuelle : « Layered light curtains warped over a night sky, scattered with stars. » Cette formulation correspond au traitement visible : une large illumination cyan et bleu-vert occupe le centre gauche, tandis qu’un champ bleu marine plus sombre et de petits points lumineux composent le ciel alentour. Il en résulte une composition hero où le shader apporte l’atmosphère et la typographie l’orientation.

En haut, « OPENDESIGN · WEBGL PREVIEW » identifie le contexte de l’artefact, tandis que « REAL-TIME · GPU » décrit le format de rendu prévu. Ces libellés présentent la pièce comme une expérimentation visuelle plutôt que comme une page éditoriale conventionnelle. Ils maintiennent également le contexte technique en périphérie, afin que le titre principal reste le premier message lisible.

Où cette composition trouve sa place

Cette conception convient à un hero de landing page, à un portfolio de creative coding expérimental ou à une introduction visuelle à un projet de technologie créative. Son usage le plus pertinent se situe dans un contexte où l’atmosphère peut porter la première impression et où le visiteur peut prendre un moment pour observer le mouvement plutôt que parcourir des informations denses.

Le libellé « SWAY THE VEIL ↗ » en bas à droite donne au mouvement une invitation explicite. Comme l’instruction décrit un mouvement du curseur au lieu de présenter un menu ou un panneau de contrôle, l’interaction reste légère et l’attention demeure portée sur la toile. En contrepartie, l’expérience dépend d’un contexte orienté pointeur ; les éléments fournis n’établissent pas l’existence d’une interaction tactile équivalente.

Comment le champ visuel tient ensemble

La composition utilise une colonne de lecture stable à gauche, face à un arrière-plan en évolution continue. « AURORA » est composé en capitales larges et grasses, tandis que « VEIL » est plus léger et plus étroit sous le premier mot. Ce contraste crée une lecture en deux temps : le premier mot établit l’échelle et l’identité, et le second complète le nom sans rivaliser avec lui par le même poids visuel.

D’une capture à l’autre, la lueur centrale passe d’un champ principalement turquoise à un état où une région violette est plus visible en haut à droite. La position du titre et le texte d’accompagnement restent fixes. Cette séparation est importante : le mouvement peut modifier la couleur et la répartition de la lumière sans obliger le lecteur à rechercher le message principal.

Le fragment shader construit trois rideaux de lumière sur un dégradé bleu marine, en utilisant cinq couches de bruit pour faire varier leur largeur et leurs courbures. Une valeur temporelle modifie leur position et leur teinte, tandis que des étoiles procédurales clairsemées occupent la partie supérieure du ciel. Une palette allant du vert au turquoise puis au violet distingue les rubans sans textures externes ni maillages de scène. Ce traitement en couches produit une profondeur atmosphérique, tandis que la typographie claire et fixe reste l’ancrage de lecture.

Comportement visible et limites

La source démarre une boucle d’animation locale et écoute les mouvements du pointeur. Bien qu’elle enregistre les deux coordonnées du pointeur, le shader utilise la coordonnée horizontale pour faire balancer ses trois rideaux ; la valeur actuelle se rapproche progressivement de sa cible à chaque image. Les trois captures sont des instants de ce même hero, et non des écrans ou des vues de données distincts. L’instruction en bas à droite est un libellé statique, pas une commande cliquable.

Il s’agit, d’après les éléments disponibles, d’un exemple de shader conçu uniquement à des fins de conception. Le libellé visible « REAL-TIME · GPU » et les éléments de preuve d’un rendu local ne vérifient ni un niveau de performance en production, ni un service connecté, ni un système de stockage, ni une compatibilité avec l’ensemble des appareils. Ils n’établissent pas non plus que le mouvement représenté convient à toutes les méthodes d’entrée. Évaluez la composition comme un traitement visuel WebGL et adaptez séparément les détails de l’interaction au contexte produit visé.