Möbius: web conceptual de un colegio e instituto con área personal para alumnos, familias y profesores

VITON¹³ crea sitios conceptuales para mostrar su alcance en sectores donde aún no tiene un proyecto de cliente que enseñar. Möbius es el de la educación: la web de un colegio e instituto ficticio para alumnos de 5 a 25 años, con primaria, secundaria y un instituto universitario con grados y másteres en un mismo campus. Sigue el género de las webs escolares inmersivas cuya portada es un globo de tarjetas con historias. El colegio, su gente, sus cifras, sus precios y su dirección son inventados, y la web está en inglés y ruso.

El encargo nos lo pusimos nosotros: ir más allá de un folleto. La web de un colegio tiene que convencer a las familias nuevas, y después la usan a diario los alumnos, padres y profesores que se quedan. Por eso el concepto cubre las dos mitades: la web pública que presenta el colegio y el área personal tras el inicio de sesión.

Catorce páginas, siete por idioma: la portada, Quiénes somos, Programas, Admisiones, Campus, el área My Möbius y una página 404. En la portada, 40 tarjetas de historias recorren una banda de Möbius real en three.js: un solo carril da dos vueltas al lazo, así que las tarjetas se voltean en el giro. Al arrastrar, la cinta gira; al hacer scroll, se despliega en un lienzo infinito de 8 × 5 tarjetas que se repite en todas direcciones, donde las fotos en blanco y negro se vuelven de color bajo el cursor. Dos selectores, «Soy una familia nueva / un aspirante al Instituto…» y «Explorando…», atenúan el resto y llevan a la historia adecuada, y cada una de las 31 historias tiene su propio enlace.

Quiénes somos abre con una película de 52 segundos montada con 16 clips de stock de Mixkit y etalonada en los colores de la marca, con la música «A New Life» de Eugenio Mininni (Mixkit) y subtítulos en inglés y ruso colocados encima como texto HTML, no incrustados en la imagen. Programas reúne 16 programas con filtros y un recorrido desde infantil hasta el máster. Admisiones tiene una calculadora de cuotas, un calendario de visitas que guarda la cita en el calendario del móvil como archivo .ics y una solicitud en cuatro pasos. Campus es un mapa ilustrado de nueve edificios, cada uno con su foto y una breve descripción. Un asistente, Ask Möbius, responde a las preguntas frecuentes y enlaza a la página con la respuesta completa.

My Möbius es una demo front-end funcional del área personal con tres roles y 19 pantallas en total. El alumno (7 pantallas) ve su día con la clase en curso, el horario, las tareas, las notas, los mensajes, un tutor de IA y la biblioteca; la familia (7), un resumen con el seguimiento de una solicitud, notas, pagos, autorizaciones, reuniones, el autobús escolar en vivo y mensajes; el profesor (5), sus grupos, la lista de asistencia, el cuaderno de notas, las tareas y los mensajes. La demo funciona con datos inventados y cambia de rol con un clic.

El nombre y el símbolo vienen de la banda de Möbius: una cara, un borde, sin final. El logotipo se genera con código —una cinta en forma de ocho cuya cara ámbar se da la vuelta en la punta izquierda y vuelve en cobalto— y los dos puntos de la ö (la ё en ruso) son los dos colores de la banda. La pantalla de carga dibuja la línea central de la cinta mientras cuenta los archivos cargados, y las fotos de las tarjetas son fotogramas de los mismos clips que la película.

La web está escrita con three.js y JavaScript sin framework y se compila con esbuild en páginas estáticas con URL relativas, así que funciona desde cualquier carpeta: en el portafolio vive en /demos/mobius/. La cinta y el lienzo son una sola escena: las tarjetas se dibujan en un atlas de texturas y la tarjeta gráfica calcula el paso de la cinta a la cuadrícula plana. Junto a la escena 3D, «All stories as a list» abre las mismas historias como una lista normal; cada página tiene un selector de idioma, y a quien pide menos movimiento la cinta se le muestra sin introducción y las páginas cambian sin transiciones.

Hoy existe un concepto que funciona en tarasovvitalii.com/demos/mobius/, hecho el 28 de septiembre de 2026: 14 páginas, 31 historias en 40 tarjetas, 16 programas y 19 pantallas en la demo del área personal. Ese mismo día contamos fotogramas con requestAnimationFrame durante tres segundos, dos veces en la cinta y dos en el lienzo, en Chrome headless con ANGLE Metal en un MacBook con Apple M5, a 1600 × 1000 con escala Retina: la mediana fue de 60 fps y la lectura más baja, de 59,7. La portada carga 0,18 MB de JavaScript con gzip, three.js incluido; la build completa ocupa 17 MB, de los cuales 13 MB son la película en MP4 y WebM.

Ese mismo día Lighthouse 13.4 se ejecutó tres veces por dispositivo sobre una copia local de la demo, servida con las cabeceras de producción del portafolio antes de que la demo se publicara. Las medianas: rendimiento de 81 en móvil y 93 en escritorio, accesibilidad 100, buenas prácticas 100 y CLS 0; el LCP es de 2,6 s en móvil y 0,7 s en escritorio, y la portada transfiere 1,4 MB al cargar, 0,94 MB de ellos en las 22 fotos de las tarjetas. Lo que frena la puntuación en móvil es el arranque de la escena 3D: la cinta y sus tarjetas se van formando durante varios segundos después del primer pintado (Speed Index 7,1 s), y dibujar las tarjetas en su atlas de texturas añade 0,3 s de bloqueo en un móvil simulado. La máquina estaba muy cargada ese día, y las ejecuciones fueron de 68 a 86 en móvil y de 92 a 100 en escritorio.

Möbius es un concepto que VITON¹³ hizo para mostrar lo que podemos crear para colegios, institutos y universidades, no un proyecto por encargo. El colegio, su gente, sus cifras, sus precios y su dirección son ficticios; las personas de la película y las fotos son imágenes de stock de Mixkit, no alumnos. La web no tiene cliente, ni dominio propio, ni usuarios, ni tráfico, ni solicitudes, y no demuestra nada sobre admisiones ni conversión.

El asistente y el tutor de IA responden con un guion fijo, no con un modelo de lenguaje, y la demo del área personal funciona con datos inventados en el navegador: no hay inicio de sesión, base de datos, pagos ni correos detrás, así que un colegio real aún necesitaría cuentas, un servidor, protección de datos y conexión con sus propios sistemas. La tasa de fotogramas procede de una sola máquina con un chip de Apple reciente, en Chrome headless y en un solo día, y no dice nada de móviles antiguos; Lighthouse es una prueba de laboratorio y se ejecutó sobre una copia local, no sobre la dirección real.

Cómo revisar el portafolio de un estudio web →