Mondes de science-fiction en shader
Une page d’accueil de science-fiction pilotée par shader, où quatre univers distincts se fondent l’un dans l’autre au défilement. Copiez la consigne pour créer la vôtre.
Loading preview...
2507 views
Commencez avec cette consigne
Générez une page d’accueil en shader avec quatre univers
Forêt des quatre saisons
Remplacez les quatre univers par des scènes de forêt au fil des saisons.
Essayer Kimi BuildCréez une page d’accueil de science-fiction pilotée par shader, conçue comme une étude en direct du ray marching en temps réel : la page n’embarque ni textures, ni maillages, ni ressources — quatre scènes cosmiques sont calculées entièrement par les mathématiques d’un shader de fragment et se fondent continuellement l’une dans l’autre au défilement du visiteur. Première scène, Singularité : un trou noir avec un disque d’accrétion, dont la lumière est intégrée le long de géodésiques sur environ 200 pas, afin que la face éloignée du disque se replie par-dessus, avec une amplification relativiste Doppler qui illumine davantage un côté. Deuxième scène, Nébuleuse : un champ de densité fBm à 4 octaves, éclairé par environ 44 échantillons de diffusion simple d’avant en arrière. Troisième scène, Marées : un champ de hauteur océanique composé de huit octaves d’ondes interférentes, déterminé par dichotomie, reflétant selon Fresnel un ciel d’aurore à 32 couches. Quatrième scène, Première lumière : un terrain multifractal strié, tracé par sphères jusqu’à l’horizon à l’aube. Chaque chapitre associe un titre poétique à une courte liste de paramètres techniques (nombre d’échantillons, pas d’intégration). Une barre latérale gauche suit les chapitres avec un indicateur de progression ; un HUD dans un coin affiche la scène actuelle, le buffer de rendu, la fréquence d’images et la profondeur de défilement ; une barre supérieure indique WebGPU · temps réel. Typographie monospace, palette noir et blanc rehaussée d’un unique accent orange et superposition de grain de film. Les transitions pilotées par le défilement doivent fonctionner réellement et de manière fluide dans tout navigateur compatible WebGPU. Remplacez les quatre univers par une forêt au printemps, en été, en automne et en hiver, tout en conservant la structure de fondus enchaînés pilotés par le défilement. Donnez à chaque saison sa propre palette et ses particules (pétales, lucioles, feuilles tombantes, neige), puis réécrivez les textes autour du thème de la nature.
Créez une page d’accueil de science-fiction pilotée par shader, conçue comme une étude en direct du ray marching en temps réel : la page n’embarque ni textures, ni maillages, ni ressources — quatre scènes cosmiques sont calculées entièrement par les mathématiques d’un shader de fragment et se fondent continuellement l’une dans l’autre au défilement du visiteur. Première scène, Singularité : un trou noir avec un disque d’accrétion, dont la lumière est intégrée le long de géodésiques sur environ 200 pas, afin que la face éloignée du disque se replie par-dessus, avec une amplification relativiste Doppler qui illumine davantage un côté. Deuxième scène, Nébuleuse : un champ de densité fBm à 4 octaves, éclairé par environ 44 échantillons de diffusion simple d’avant en arrière. Troisième scène, Marées : un champ de hauteur océanique composé de huit octaves d’ondes interférentes, déterminé par dichotomie, reflétant selon Fresnel un ciel d’aurore à 32 couches. Quatrième scène, Première lumière : un terrain multifractal strié, tracé par sphères jusqu’à l’horizon à l’aube. Chaque chapitre associe un titre poétique à une courte liste de paramètres techniques (nombre d’échantillons, pas d’intégration). Une barre latérale gauche suit les chapitres avec un indicateur de progression ; un HUD dans un coin affiche la scène actuelle, le buffer de rendu, la fréquence d’images et la profondeur de défilement ; une barre supérieure indique WebGPU · temps réel. Typographie monospace, palette noir et blanc rehaussée d’un unique accent orange et superposition de grain de film. Les transitions pilotées par le défilement doivent fonctionner réellement et de manière fluide dans tout navigateur compatible WebGPU. Insérez une section produits entre les deuxième et troisième scènes : trois cartes produit côte à côte, chacune avec un titre, un argument de vente et un bouton, qui apparaissent séquentiellement au défilement et sont stylisées pour correspondre aux visuels en shader.
Mode performances mobiles
Réduisez le coût des particules et de l’éclairage sur mobile.
Essayer Kimi BuildCréez une page d’accueil de science-fiction pilotée par shader, conçue comme une étude en direct du ray marching en temps réel : la page n’embarque ni textures, ni maillages, ni ressources — quatre scènes cosmiques sont calculées entièrement par les mathématiques d’un shader de fragment et se fondent continuellement l’une dans l’autre au défilement du visiteur. Première scène, Singularité : un trou noir avec un disque d’accrétion, dont la lumière est intégrée le long de géodésiques sur environ 200 pas, afin que la face éloignée du disque se replie par-dessus, avec une amplification relativiste Doppler qui illumine davantage un côté. Deuxième scène, Nébuleuse : un champ de densité fBm à 4 octaves, éclairé par environ 44 échantillons de diffusion simple d’avant en arrière. Troisième scène, Marées : un champ de hauteur océanique composé de huit octaves d’ondes interférentes, déterminé par dichotomie, reflétant selon Fresnel un ciel d’aurore à 32 couches. Quatrième scène, Première lumière : un terrain multifractal strié, tracé par sphères jusqu’à l’horizon à l’aube. Chaque chapitre associe un titre poétique à une courte liste de paramètres techniques (nombre d’échantillons, pas d’intégration). Une barre latérale gauche suit les chapitres avec un indicateur de progression ; un HUD dans un coin affiche la scène actuelle, le buffer de rendu, la fréquence d’images et la profondeur de défilement ; une barre supérieure indique WebGPU · temps réel. Typographie monospace, palette noir et blanc rehaussée d’un unique accent orange et superposition de grain de film. Les transitions pilotées par le défilement doivent fonctionner réellement et de manière fluide dans tout navigateur compatible WebGPU. Ajoutez une adaptation des performances pour mobile : sous 768 px de large, réduisez le nombre de particules et la résolution de rendu, désactivez l’éclairage volumétrique le plus coûteux et affichez un interrupteur « mode hautes performances » que les visiteurs peuvent activer eux-mêmes.
