Möbius : site concept d’une école et d’un institut, avec un espace personnel pour les élèves, les parents et les enseignants

VITON¹³ conçoit des sites concepts pour montrer sa palette dans des secteurs où elle n’a pas encore de projet client à présenter. Möbius est celui de l’éducation : le site d’une école et d’un institut fictifs pour les élèves de 5 à 25 ans, avec une Junior School, une Senior School et un institut qui délivre licences et masters, sur un seul campus. Il reprend le genre des sites d’école immersifs dont l’accueil est une sphère de cartes d’histoires. L’école, ses personnes, ses chiffres, ses tarifs et son adresse sont inventés, et le site est en anglais et en russe.

La commande que nous nous sommes donnée : aller plus loin qu’une brochure. Le site d’une école doit convaincre les nouvelles familles, puis il sert chaque jour aux élèves, aux parents et aux enseignants qui sont restés. Le concept couvre donc les deux moitiés : le site public qui présente l’école et l’espace personnel derrière la connexion.

Quatorze pages, sept par langue : l’accueil, Who we are, les programmes, les admissions, le campus, l’espace My Möbius et une page 404. Sur l’accueil, 40 cartes d’histoires défilent le long d’un véritable ruban de Möbius en three.js : une seule voie fait deux fois le tour de la boucle, si bien que les cartes se retournent à la torsion. Un glisser fait tourner le ruban ; le défilement le déroule en un canevas infini de 8 × 5 cartes qui se répète dans toutes les directions, où les photos en noir et blanc prennent leurs couleurs sous le curseur. Deux sélecteurs, « I am a new parent / an Institute applicant… » et « Exploring… », estompent le reste et mènent à la bonne histoire, et chacune des 31 histoires a son propre lien.

Who we are s’ouvre sur un film de 52 secondes monté à partir de 16 clips de banque d’images Mixkit et étalonné aux couleurs de la marque, sur la musique « A New Life » d’Eugenio Mininni (Mixkit), avec des sous-titres en anglais et en russe posés dessus en texte HTML plutôt qu’incrustés dans l’image. Les programmes en présentent 16, avec des filtres et un parcours de la maternelle au master. Les admissions proposent un calculateur de frais, un calendrier des visites qui enregistre le rendez-vous dans l’agenda du téléphone sous forme de fichier .ics et une candidature en quatre étapes. Le campus est un plan illustré de neuf bâtiments, chacun avec sa photo et une courte description. Un assistant, Ask Möbius, répond aux questions fréquentes et renvoie vers la page qui contient la réponse complète.

My Möbius est une démo front-end fonctionnelle de l’espace personnel en trois rôles, soit 19 écrans. L’élève (7 écrans) voit sa journée avec le cours du moment, l’emploi du temps, les devoirs, les notes, les messages, un tuteur IA et la bibliothèque ; le parent (7), une vue d’ensemble avec le suivi d’une candidature, les notes, les paiements, les autorisations, les rendez-vous, le bus scolaire en direct et les messages ; l’enseignant (5), ses classes, l’appel, le carnet de notes, les devoirs et les messages. La démo tourne sur des données inventées et change de rôle en un clic.

Le nom et l’emblème viennent du ruban de Möbius : une face, un bord, pas de fin. Le logo est généré par le code : un ruban en huit dont la face ambre se retourne à la pointe gauche et revient en bleu cobalt, et les deux points du ö (le ё en russe) sont les deux couleurs du ruban. Le préchargeur dessine la ligne médiane du ruban en comptant les fichiers chargés, et les photos des cartes sont des images tirées des mêmes clips que le film.

Le site est écrit avec three.js et du JavaScript sans framework, et assemblé par esbuild en pages statiques aux URL relatives : il fonctionne depuis n’importe quel dossier, et sur le portfolio il vit dans /demos/mobius/. Le ruban et le canevas forment une seule scène : les cartes sont dessinées dans un atlas de textures, et la carte graphique calcule le passage du ruban à la grille plane. À côté de la scène 3D, « All stories as a list » ouvre les mêmes histoires sous forme de liste ordinaire ; chaque page a un sélecteur de langue, et pour qui demande moins d’animations, le ruban s’affiche sans introduction et les pages changent sans transition.

Il existe aujourd’hui un concept qui fonctionne, à l’adresse tarasovvitalii.com/demos/mobius/, réalisé le 28 septembre 2026 : 14 pages, 31 histoires sur 40 cartes, 16 programmes et 19 écrans dans la démo de l’espace personnel. Le même jour, nous avons compté les images avec requestAnimationFrame pendant trois secondes, deux fois sur le ruban et deux fois sur le canevas, dans Chrome en mode headless avec ANGLE Metal, sur un MacBook doté d’une puce Apple M5, en 1600 × 1000 à l’échelle Retina : la médiane est de 60 fps et le relevé le plus bas de 59,7. L’accueil charge 0,18 Mo de JavaScript en gzip, three.js compris ; le build complet pèse 17 Mo, dont 13 Mo pour le film en MP4 et WebM.

Le même jour, Lighthouse 13.4 a été lancé trois fois par appareil sur une copie locale de la démo, servie avec les en-têtes de production du portfolio avant sa mise en ligne. Les médianes : performance de 81 sur mobile et de 93 sur ordinateur, 100 en accessibilité, 100 en bonnes pratiques et un CLS de 0 ; le LCP est de 2,6 s sur mobile et de 0,7 s sur ordinateur, et l’accueil transfère 1,4 Mo au chargement, dont 0,94 Mo pour les 22 photos des cartes. Ce qui freine le score sur mobile, c’est le démarrage de la scène 3D : le ruban et ses cartes se construisent pendant plusieurs secondes après le premier affichage (Speed Index 7,1 s), et dessiner les cartes dans leur atlas de textures ajoute 0,3 s de blocage sur un téléphone simulé. La machine était très chargée ce jour-là, et les passages vont de 68 à 86 sur mobile et de 92 à 100 sur ordinateur.

Möbius est un concept réalisé par VITON¹³ pour montrer ce que nous savons faire pour les écoles, les lycées et les universités, pas une commande de client. L’école, ses personnes, ses chiffres, ses tarifs et son adresse sont fictifs ; les personnes du film et des photos viennent de la banque d’images Mixkit, ce ne sont pas des élèves. Le site n’a ni client, ni domaine propre, ni utilisateurs, ni trafic, ni demandes, et il ne prouve rien sur les admissions ni sur la conversion.

L’assistant et le tuteur IA répondent selon un script fixe, pas avec un modèle de langage, et la démo de l’espace personnel tourne sur des données inventées dans le navigateur : il n’y a derrière ni connexion, ni base de données, ni paiement, ni e-mail, si bien qu’une vraie école aurait encore besoin de comptes, d’un serveur, de la protection des données et d’un lien avec ses propres systèmes. La fréquence d’images provient d’une seule machine équipée d’une puce Apple récente, dans Chrome en mode headless, un seul jour, et ne dit rien des téléphones plus anciens ; Lighthouse est un test de laboratoire, lancé sur une copie locale et non sur l’adresse réelle.

Comment vérifier le portfolio d’une agence web →