Möbius: a concept site for a school and institute, with a personal account for students, parents and teachers

VITON¹³ builds concept sites to show its range in sectors where it has no client project to point to yet. Möbius is the one for education: the site of a fictional school and institute for ages 5 to 25, with a Junior School, a Senior School and an Institute that awards bachelor’s and master’s degrees, all on one campus. It follows the genre of immersive school sites whose home page is a globe of story cards. The school, its people, its numbers, its prices and its address are invented, and the site is in English and Russian.

The brief we set ourselves: go further than a brochure. A school site has to win over new families, and after that it is used every day by the students, parents and teachers who stayed. So the concept covers both halves: the public site that presents the school, and the personal account behind the login.

Fourteen pages, seven in each language: the home page, Who we are, Programmes, Admissions, Campus, the My Möbius account and a 404 page. On the home page 40 story cards ride along a real Möbius band in three.js: one lane runs twice round the loop, so the cards turn over at the twist. Dragging spins the ribbon; scrolling unrolls it into an endless canvas of 8 × 5 cards that wraps in every direction, where black-and-white photos turn to colour under the cursor. Two pickers, “I am a new parent / an Institute applicant…” and “Exploring…”, dim everything else and fly to the right story, and each of the 31 stories has its own link.

Who we are opens with a 52-second film cut from 16 Mixkit stock clips and graded to the brand colours, set to “A New Life” by Eugenio Mininni (Mixkit), with captions in English and Russian laid over it as HTML text rather than burned into the picture. Programmes holds 16 programmes with filters and a path from Early years to a master’s degree. Admissions has a fee calculator, a tour calendar that saves a visit to a phone calendar as an .ics file and a four-step application. Campus is an illustrated map of nine buildings, each with a photo and a short description. An assistant, Ask Möbius, answers common questions and links to the page with the full answer.

My Möbius is a working front-end demo of the account in three roles, 19 screens in all. A student (7 screens) sees the day with the lesson happening now, the timetable, assignments, grades, messages, an AI tutor and the library; a parent (7) sees an overview with an application tracker, grades, payments, consent forms, meetings, a live school-bus route and messages; a teacher (5) has classes, the register, a gradebook, assignments and messages. The demo runs on invented data and switches roles in one click.

The name and the mark come from the Möbius strip: one side, one edge, no end. The logo is generated in code: a figure-eight ribbon whose amber face turns over at the left tip and comes back as cobalt, and the two dots over the ö (ё in Russian) are the band’s two colours. The loader draws the ribbon’s centre line while it counts the loaded files, and the photos on the story cards are frames from the film’s own clips.

The site is written with three.js and plain JavaScript and built with esbuild into static pages with relative URLs, so it runs from any folder: on the portfolio it lives at /demos/mobius/. The ribbon and the canvas are one scene: the cards are drawn into a texture atlas, and the graphics card computes the change from the band to the flat grid. Next to the 3D scene, “All stories as a list” opens the same stories as an ordinary list; every page has a language switch, and for visitors who ask for reduced motion the ribbon skips its intro and pages change without transitions.

What exists now is a working concept at tarasovvitalii.com/demos/mobius/, built on 28 September 2026: 14 pages, 31 stories on 40 ribbon cards, 16 programmes and 19 screens in the account demo. The same day we counted frames with requestAnimationFrame for three seconds, twice on the ribbon and twice on the canvas, in headless Chrome with ANGLE Metal on a MacBook with an Apple M5 at 1600 × 1000 on a Retina scale: the median was 60 fps and the lowest reading 59.7. The home page loads 0.18 MB of JavaScript with gzip, three.js included; the whole build is 17 MB, 13 MB of which is the film in MP4 and WebM.

The same day Lighthouse 13.4 ran three times per device on a local copy of the demo, served with the portfolio’s production headers before the demo went live. The medians: performance 81 on mobile and 93 on desktop, accessibility 100, best practices 100 and CLS 0; LCP is 2.6 s on mobile and 0.7 s on desktop, and the home page transfers 1.4 MB on load, 0.94 MB of it the 22 card photos. What holds the mobile score back is the start of the 3D scene: the ribbon and its cards build up over several seconds after the first paint (Speed Index 7.1 s), and drawing the cards into their texture atlas adds 0.3 s of blocking time on a simulated phone. The machine was heavily loaded that day, and the runs spread from 68 to 86 on mobile and from 92 to 100 on desktop.

Möbius is a concept VITON¹³ built to show what we can make for schools, colleges and universities, not a commissioned project. The school, its people, numbers, prices and address are fictional; the people in the film and the photos are Mixkit stock footage, not students. The site has no client, no domain of its own, no users, no traffic and no enquiries, and it proves nothing about admissions or conversion.

The assistant and the AI tutor answer from a fixed script, not a language model, and the account demo runs on invented data in the browser: there is no sign-in, database, payment or email behind it, so a real school would still need accounts, a server, data protection and a link to its own systems. The frame rate comes from one machine with a recent Apple chip, in headless Chrome, on one day, and says nothing about older phones; Lighthouse is a lab test, and it ran on a local copy, not on the live address.

How to check a web studio’s portfolio →