«Мёбиус»: концепт сайта школы и института с личным кабинетом для учеников, родителей и учителей

VITON¹³ делает концепт-сайты, чтобы показать диапазон в отраслях, где у нас пока нет клиентского проекта. «Мёбиус» — концепт для образования: сайт вымышленных школы и института для учеников от 5 до 25 лет, где на одном кампусе младшая школа, старшая школа и институт с бакалавриатом и магистратурой. Он сделан в жанре иммерсивных сайтов школ, где главная страница — шар из карточек-историй. Школа, её люди, цифры, цены и адрес придуманы; сайт написан на английском и русском.

Задачу мы поставили себе сами: сделать больше, чем буклет. Сайт школы должен убедить новые семьи, а потом им каждый день пользуются ученики, родители и учителя, которые остались. Поэтому концепт закрывает обе половины: публичный сайт, который представляет школу, и личный кабинет за входом.

Четырнадцать страниц, по семь на каждом языке: главная, «Кто мы», программы, поступление, кампус, кабинет «Мой Мёбиус» и страница 404. На главной 40 карточек-историй едут по настоящей ленте Мёбиуса в three.js: одна дорожка проходит петлю дважды, поэтому на перекруте карточки переворачиваются. Перетаскивание вращает ленту, прокрутка разворачивает её в бесконечное полотно 8 × 5 карточек, которое замыкается во все стороны, а чёрно-белые фото под курсором становятся цветными. Два переключателя — «Я — будущий родитель / абитуриент института…» и «Смотрю…» — приглушают всё лишнее и подводят к нужной истории, а у каждой из 31 истории своя ссылка.

«Кто мы» открывается 52-секундным фильмом из 16 стоковых роликов Mixkit с цветокором в цветах бренда, под музыку «A New Life» Eugenio Mininni (Mixkit); титры на английском и русском лежат поверх видео HTML-текстом, а не вшиты в кадр. В разделе программ — 16 программ с фильтрами и путь от дошкольной группы до магистратуры. В поступлении — калькулятор стоимости, календарь экскурсий, который сохраняет визит в календарь телефона файлом .ics, и заявка в четыре шага. Кампус — иллюстрированная карта из девяти зданий, у каждого фото и короткое описание. Ассистент «Спросите Мёбиуса» отвечает на частые вопросы и даёт ссылку на страницу с полным ответом.

«Мой Мёбиус» — рабочее фронтенд-демо кабинета в трёх ролях, всего 19 экранов. Ученик (7 экранов) видит свой день с текущим уроком, расписание, задания, оценки, сообщения, ИИ-тьютора и библиотеку; родитель (7) — обзор с трекером заявки, оценки, платежи, согласия, встречи, школьный автобус онлайн и сообщения; у учителя (5) — классы, журнал посещаемости, журнал оценок, задания и сообщения. Демо работает на выдуманных данных, а роль переключается одним нажатием.

Название и знак взяты от ленты Мёбиуса: одна сторона, один край, нет конца. Логотип сгенерирован кодом — лента-восьмёрка, янтарная сторона которой переворачивается на левом конце и возвращается синей, а две точки над ö (в русском — над ё) окрашены в два цвета ленты. Прелоадер рисует осевую линию ленты, пока считает загруженные файлы, а фото на карточках историй — кадры из тех же роликов, что и фильм.

Сайт написан на three.js и чистом JavaScript и собран esbuild в статические страницы с относительными ссылками, поэтому работает из любой папки: в портфолио он лежит в /demos/mobius/. Лента и полотно — одна сцена: карточки рисуются в текстурный атлас, а переход от ленты к плоской сетке считает видеокарта. Рядом с 3D-сценой кнопка «Все истории списком» открывает те же истории обычным списком; на каждой странице есть переключатель языка, а тем, кто просит ограничить анимацию, лента показывается без вступления и страницы меняются без переходов.

Сейчас это работающий концепт по адресу tarasovvitalii.com/demos/mobius/, сделанный 28 сентября 2026 года: 14 страниц, 31 история на 40 карточках ленты, 16 программ и 19 экранов в демо кабинета. В тот же день мы считали кадры через requestAnimationFrame по три секунды — дважды на ленте и дважды на полотне — в Chrome в headless-режиме с ANGLE Metal на MacBook с Apple M5, в окне 1600 × 1000 при Retina-масштабе: медиана — 60 fps, самый низкий замер — 59,7. Главная загружает 0,18 МБ JavaScript в gzip вместе с three.js; вся сборка весит 17 МБ, из них 13 МБ — фильм в MP4 и WebM.

В тот же день Lighthouse 13.4 прогнали по три раза на каждое устройство на локальной копии демо, отданной с заголовками боевого сервера портфолио, — до того, как демо вышло в сеть. Медианы: производительность 81 на телефоне и 93 на компьютере, доступность 100, рекомендации 100, CLS 0; LCP — 2,6 с на телефоне и 0,7 с на компьютере, а при загрузке главная передаёт 1,4 МБ, из них 0,94 МБ — 22 фото карточек. Оценку на телефоне сдерживает запуск 3D-сцены: лента с карточками собирается несколько секунд после первой отрисовки (Speed Index 7,1 с), а отрисовка карточек в текстурный атлас добавляет смоделированному телефону 0,3 с блокировки. Компьютер в тот день был сильно загружен, и прогоны разошлись от 68 до 86 на телефоне и от 92 до 100 на компьютере.

«Мёбиус» — концепт, который VITON¹³ сделал, чтобы показать, что мы умеем для школ, колледжей и вузов, а не заказной проект. Школа, её люди, цифры, цены и адрес вымышлены; люди в фильме и на фото — стоковые кадры Mixkit, а не ученики. У сайта нет заказчика, собственного домена, пользователей, трафика и заявок, и о поступлении или конверсии он ничего не доказывает.

Ассистент и ИИ-тьютор отвечают по заготовленному сценарию, а не языковой моделью, а демо кабинета работает на выдуманных данных в браузере: за ним нет входа, базы данных, оплаты и писем, так что настоящей школе ещё понадобятся учётные записи, сервер, защита данных и связь с её собственными системами. Частота кадров измерена на одном компьютере со свежим чипом Apple, в Chrome в headless-режиме и в один день, и ничего не говорит о старых телефонах; Lighthouse — лабораторный тест, и запускали его на локальной копии, а не на живом адресе.

Как проверить портфолио веб-студии →