कॉन्सेप्टकॉन्सेप्ट — ग्राहक का ऑर्डर नहीं

Möbius: एक स्कूल और इंस्टीट्यूट की कॉन्सेप्ट साइट, छात्रों, अभिभावकों और शिक्षकों के पर्सनल अकाउंट के साथ

Möbius 5 से 25 साल के विद्यार्थियों के लिए एक काल्पनिक स्कूल और इंस्टीट्यूट है, और यह उसकी साइट है, जिसे VITON¹³ ने स्कूलों, कॉलेजों और विश्वविद्यालयों के लिए कॉन्सेप्ट के तौर पर बनाया। होम पेज पर 40 कहानी-कार्ड three.js में बने असली मोबियस बैंड पर चलते हैं; उसके पीछे “Who we are” फ़िल्म, प्रोग्राम, एडमिशन टूल, कैंपस मैप और My Möbius है, जो छात्रों, अभिभावकों और शिक्षकों के पर्सनल अकाउंट का काम करता डेमो है।

कॉन्सेप्ट साइट · three.js · अंग्रेज़ी, रूसी · 2026

प्रोजेक्ट खोलें

गहरे नेवी रंग पर Möbius का होम पेज: ब्लैक-एंड-व्हाइट कहानी-कार्डों के मुड़े हुए रिबन के ऊपर बड़े सफ़ेद सेरिफ़ अक्षरों में हेडलाइन “Only further.”, उसके ऊपर पंक्ति “School & Institute · Ages 5 to 25”, बीच में गोल Continue बटन और नीचे चयनकर्ता “I am a visitor” और “Exploring everything”।

मोबियस रिबन पर कहानी-कार्ड (31 कहानियाँ): 40
अकाउंट डेमो में भूमिकाएँ: छात्र, अभिभावक, शिक्षक (19 स्क्रीन): 3
Apple M5 वाले MacBook पर रिबन और कैनवस पर फ़्रेम रेट का माध्यिका मान (न्यूनतम 59.7): 60 fps
gzip में होम पेज का JavaScript, three.js सहित: 0.18 MB

काम

VITON¹³ कॉन्सेप्ट साइटें बनाता है ताकि उन क्षेत्रों में भी अपनी रेंज दिखा सके जहाँ अभी दिखाने लायक़ कोई क्लाइंट प्रोजेक्ट नहीं है। Möbius शिक्षा के क्षेत्र का कॉन्सेप्ट है: 5 से 25 साल के विद्यार्थियों के लिए एक काल्पनिक स्कूल और इंस्टीट्यूट की साइट, जिसमें एक ही कैंपस पर जूनियर स्कूल, सीनियर स्कूल और बैचलर व मास्टर डिग्री देने वाला इंस्टीट्यूट है। यह उन इमर्सिव स्कूल साइटों की शैली में है जिनका होम पेज कहानी-कार्डों का एक गोला होता है। स्कूल, उसके लोग, आँकड़े, फ़ीस और पता काल्पनिक हैं, और साइट अंग्रेज़ी और रूसी में है।

हमने ख़ुद को जो ब्रीफ़ दिया, वह था: एक ब्रोशर से आगे जाना। स्कूल की साइट को पहले नए परिवारों का भरोसा जीतना होता है, और फिर जो छात्र, अभिभावक और शिक्षक रह जाते हैं, वे रोज़ उसका इस्तेमाल करते हैं। इसलिए कॉन्सेप्ट दोनों हिस्सों को कवर करता है: स्कूल को पेश करने वाली सार्वजनिक साइट, और लॉगिन के पीछे का पर्सनल अकाउंट।

हमने क्या किया

चौदह पेज, हर भाषा में सात: होम पेज, Who we are, प्रोग्राम, एडमिशन, कैंपस, My Möbius अकाउंट और एक 404 पेज। होम पेज पर 40 कहानी-कार्ड three.js में बने असली मोबियस बैंड पर चलते हैं: एक ही लेन लूप के दो चक्कर लगाती है, इसलिए मोड़ पर कार्ड पलट जाते हैं। ड्रैग करने से रिबन घूमता है; स्क्रॉल करने पर वह 8 × 5 कार्डों के अंतहीन कैनवस में खुल जाता है, जो हर दिशा में दोहराता है, और कर्सर के नीचे ब्लैक-एंड-व्हाइट तस्वीरें रंगीन हो जाती हैं। दो चयनकर्ता, “I am a new parent / an Institute applicant…” और “Exploring…”, बाक़ी सब कुछ धुंधला करके सही कहानी तक ले जाते हैं, और 31 कहानियों में से हर एक का अपना लिंक है।

Who we are पेज 52 सेकंड की एक फ़िल्म से खुलता है, जो Mixkit के 16 स्टॉक क्लिप से काटकर ब्रांड के रंगों में ग्रेड की गई है; संगीत Eugenio Mininni का “A New Life” (Mixkit) है, और अंग्रेज़ी व रूसी कैप्शन वीडियो में जलाए नहीं गए, बल्कि उसके ऊपर HTML टेक्स्ट के रूप में रखे गए हैं। प्रोग्राम पेज पर फ़िल्टर के साथ 16 प्रोग्राम हैं और अर्ली ईयर्स से मास्टर डिग्री तक का रास्ता। एडमिशन में फ़ीस कैलकुलेटर, कैंपस टूर का कैलेंडर जो विज़िट को .ics फ़ाइल के रूप में फ़ोन के कैलेंडर में सहेज देता है, और चार चरणों वाला आवेदन है। कैंपस नौ इमारतों का इलस्ट्रेटेड मैप है, हर इमारत की तस्वीर और छोटे विवरण के साथ। Ask Möbius नाम का असिस्टेंट आम सवालों के जवाब देता है और पूरे जवाब वाले पेज का लिंक देता है।

My Möbius तीन भूमिकाओं वाले अकाउंट का काम करता फ़्रंट-एंड डेमो है, कुल 19 स्क्रीन। छात्र (7 स्क्रीन) अपना दिन और अभी चल रहा पाठ, टाइमटेबल, असाइनमेंट, ग्रेड, संदेश, AI ट्यूटर और लाइब्रेरी देखता है; अभिभावक (7) आवेदन ट्रैकर वाला ओवरव्यू, ग्रेड, भुगतान, सहमति फ़ॉर्म, मीटिंग, लाइव स्कूल बस और संदेश; शिक्षक (5) के पास कक्षाएँ, हाज़िरी रजिस्टर, ग्रेडबुक, असाइनमेंट और संदेश हैं। डेमो काल्पनिक डेटा पर चलता है और एक क्लिक में भूमिका बदल देता है।

यह कैसे काम करता है

नाम और प्रतीक-चिह्न मोबियस पट्टी से आए हैं: एक ही सतह, एक ही किनारा, कोई अंत नहीं। लोगो कोड से बनाया गया है: आठ के आकार का एक रिबन, जिसकी एम्बर रंग की सतह बाएँ सिरे पर पलटकर कोबाल्ट नीले रंग में लौटती है, और ö के ऊपर के दो बिंदु (रूसी में ё के ऊपर) बैंड के दो रंग हैं। प्रीलोडर लोड हुई फ़ाइलें गिनते हुए रिबन की बीच वाली रेखा खींचता है, और कहानी-कार्डों की तस्वीरें उन्हीं क्लिप के फ़्रेम हैं जिनसे फ़िल्म बनी है।

साइट three.js और बिना फ़्रेमवर्क वाले JavaScript में लिखी गई है और esbuild से relative URL वाले स्टैटिक पेजों में बनाई गई है, इसलिए यह किसी भी फ़ोल्डर से चलती है; पोर्टफ़ोलियो पर यह /demos/mobius/ पर है। रिबन और कैनवस एक ही सीन हैं: कार्ड एक टेक्सचर एटलस में बनाए जाते हैं, और रिबन से सपाट ग्रिड तक का बदलाव ग्राफ़िक्स कार्ड गणना करता है। 3D सीन के बगल में “All stories as a list” वही कहानियाँ साधारण सूची के रूप में खोलता है; हर पेज पर भाषा बदलने का स्विच है, और कम मोशन माँगने वालों के लिए रिबन बिना इंट्रो के दिखता है और पेज बिना ट्रांज़िशन के बदलते हैं।

आज क्या मौजूद है

अभी tarasovvitalii.com/demos/mobius/ पर 28 सितंबर 2026 को बना एक काम करता कॉन्सेप्ट मौजूद है: 14 पेज, 40 रिबन कार्डों पर 31 कहानियाँ, 16 प्रोग्राम और अकाउंट डेमो में 19 स्क्रीन। उसी दिन हमने requestAnimationFrame से तीन-तीन सेकंड तक फ़्रेम गिने, दो बार रिबन पर और दो बार कैनवस पर, Apple M5 वाले MacBook पर ANGLE Metal के साथ headless Chrome में, 1600 × 1000 पर Retina स्केल के साथ: माध्यिका 60 fps रही और सबसे कम रीडिंग 59.7। होम पेज gzip में three.js सहित 0.18 MB JavaScript लोड करता है; पूरा बिल्ड 17 MB का है, जिसमें से 13 MB फ़िल्म है, MP4 और WebM में।

उसी दिन Lighthouse 13.4 को हर डिवाइस के लिए तीन बार डेमो की एक लोकल कॉपी पर चलाया गया, जिसे डेमो के लाइव होने से पहले पोर्टफ़ोलियो के प्रोडक्शन हेडर के साथ सर्व किया गया था। माध्यिका मान: परफ़ॉर्मेंस मोबाइल पर 81 और डेस्कटॉप पर 93, सुलभता 100, बेहतरीन तरीक़े 100 और CLS 0; LCP मोबाइल पर 2.6 सेकंड और डेस्कटॉप पर 0.7 सेकंड है, और लोड होते समय होम पेज 1.4 MB ट्रांसफ़र करता है, जिसमें से 0.94 MB कार्डों की 22 तस्वीरें हैं। मोबाइल स्कोर को 3D सीन की शुरुआत रोकती है: पहली पेंट के बाद रिबन और उसके कार्ड कई सेकंड में बनते हैं (Speed Index 7.1 सेकंड), और कार्डों को टेक्सचर एटलस में बनाना सिम्युलेट किए गए फ़ोन पर 0.3 सेकंड का ब्लॉकिंग समय जोड़ता है। उस दिन मशीन पर भारी लोड था, और रन मोबाइल पर 68 से 86 और डेस्कटॉप पर 92 से 100 तक बिखरे रहे।

यह क्या साबित नहीं करता

Möbius एक कॉन्सेप्ट है जिसे VITON¹³ ने यह दिखाने के लिए बनाया कि हम स्कूलों, कॉलेजों और विश्वविद्यालयों के लिए क्या बना सकते हैं, किसी क्लाइंट के ऑर्डर पर नहीं। स्कूल, उसके लोग, आँकड़े, फ़ीस और पता काल्पनिक हैं; फ़िल्म और तस्वीरों में दिखने वाले लोग Mixkit के स्टॉक फ़ुटेज से हैं, छात्र नहीं। साइट का कोई क्लाइंट, अपना डोमेन, उपयोगकर्ता, ट्रैफ़िक या पूछताछ नहीं है, और यह एडमिशन या कन्वर्ज़न के बारे में कुछ साबित नहीं करती।

असिस्टेंट और AI ट्यूटर एक तय स्क्रिप्ट से जवाब देते हैं, किसी लैंग्वेज मॉडल से नहीं, और अकाउंट डेमो ब्राउज़र में काल्पनिक डेटा पर चलता है: उसके पीछे न लॉगिन है, न डेटाबेस, न भुगतान, न ईमेल, इसलिए किसी असली स्कूल को अभी भी अकाउंट, सर्वर, डेटा सुरक्षा और अपने सिस्टम से जुड़ाव की ज़रूरत होगी। फ़्रेम रेट नए Apple चिप वाली एक ही मशीन पर, headless Chrome में, एक ही दिन मापा गया और पुराने फ़ोन के बारे में कुछ नहीं बताता; Lighthouse एक लैब टेस्ट है, जिसे लाइव पते पर नहीं, बल्कि लोकल कॉपी पर चलाया गया।

वेब स्टूडियो का पोर्टफोलियो कैसे जाँचें

स्क्रॉल के बाद अंतहीन कैनवस, इंस्टीट्यूट के आवेदक के लिए फ़िल्टर किया हुआ: मेल खाने वाले कहानी-कार्ड चमकीले हैं, जिनमें “Walk the campus with us”, “27 nationalities, one campus” और कर्सर के नीचे Open बटन वाला “Who we are” शामिल हैं, ओपन डे का एक एम्बर कार्ड है, और बाक़ी कार्ड धुंधले हैं। — स्क्रॉल के बाद कैनवस, “I am an Institute applicant” से फ़िल्टर किया हुआ। कॉन्सेप्ट साइट की स्क्रीन, सितंबर 2026।

छात्रा Mia के लिए My Möbius, DEMO चिह्न के साथ: अभी चल रहा अंग्रेज़ी का पाठ और उसके बाद इतिहास, आज का टाइमटेबल, चेकबॉक्स वाले चार असाइनमेंट, 97% हाज़िरी और 43% समय पर होमवर्क के रिंग, 8.6 का औसत, मेंटर का नोट और घोषणाएँ, और साइडबार में भूमिका बदलने का स्विच। — My Möbius, छात्र की भूमिका, डेमो डेटा पर। कॉन्सेप्ट साइट की स्क्रीन, सितंबर 2026।

अभिभावक Elena के लिए My Möbius: इंटरव्यू चरण पर आवेदन ट्रैकर, Year 9 और Year 3 में पढ़ने वाले दो बच्चों के कार्ड, उनके औसत, हाज़िरी और ग्रेड चार्ट के साथ, 12 मिनट में पहुँचने वाली लाइव स्कूल बस का रूट, भुगतान, सहमति फ़ॉर्म और अभिभावक-शिक्षक मीटिंग। — My Möbius, अभिभावक की भूमिका, प्रक्रिया में चल रहे आवेदन के साथ, डेमो डेटा पर। कॉन्सेप्ट साइट की स्क्रीन, सितंबर 2026।

कैंपस पेज: पेड़ों और रास्तों के बीच नौ क्रमांकित इमारतों का इलस्ट्रेटेड मैप, एम्बर रंग में हाइलाइट की गई रिसर्च बिल्डिंग, और दाईं ओर प्रयोगशाला में दो शोधकर्ताओं वाली उसकी तस्वीर, छोटा विवरण और सभी नौ इमारतों की सूची। — नौ इमारतों वाला इंटरैक्टिव कैंपस मैप। कॉन्सेप्ट साइट की स्क्रीन, सितंबर 2026।

SEO समीक्षा

28 सितंबर 2026 को Lighthouse (हर डिवाइस पर तीन रन, माध्यिका) ने डेमो की लोकल कॉपी को, जिसे डेमो के लाइव होने से पहले पोर्टफ़ोलियो के प्रोडक्शन हेडर के साथ सर्व किया गया था, मोबाइल पर परफ़ॉर्मेंस 81 (LCP 2.6 सेकंड, 1.4 MB) और डेस्कटॉप पर 93 (LCP 0.7 सेकंड) दिया, और दोनों पर सुलभता 100 व बेहतरीन तरीक़े 100 रहे। SEO 63 है, क्योंकि डेमो पर पेज में और सर्वर हेडर में जानबूझकर noindex, nofollow लगा है: यह एक कॉन्सेप्ट है, और सर्च के लिए पोर्टफ़ोलियो पर इसका केस पेज है।

28 सितंबर 2026 को जाँचा गया: 14 पेज Chrome में वैसे ही रेंडर किए गए जैसे सर्च क्रॉलर उन्हें देखता है, और होम पेज पर Lighthouse 13 चलाया गया।

Lighthouse, होम पेज

परफ़ॉर्मेंस: मोबाइल81डेस्कटॉप93
सुलभता: मोबाइल100डेस्कटॉप100
बेहतरीन तरीके: मोबाइल100डेस्कटॉप100
SEO: मोबाइल63डेस्कटॉप63

पेज और तकनीकी SEO जाँच

हर पेज का अलग शीर्षकठीक14/14
30–65 अक्षरों का शीर्षकठीक14/14
70–170 अक्षरों का मेटा विवरणठीक14/14
हर पेज पर एक H1ठीक14/14
पेज की भाषा घोषितठीकen, ru
मोबाइल लेआउट, बिना साइड स्क्रॉलठीक390 px
alt टेक्स्ट वाली तस्वीरेंआंशिक0/98
टूटे आंतरिक लिंकठीक0
कैनोनिकल URLठीक14/14
Open Graph: शीर्षक और तस्वीरठीक14/14
संरचित डेटा (JSON-LD)ठीक14/14
sitemap.xml और robots.txtआंशिक1/2

14 पेजों पर जाँच की गई, 7 अंग्रेज़ी में और 7 रूसी में, जिन्हें headless Chrome में 390 px पर रेंडर किया गया। हर पेज पर मौजूद: 30–65 अक्षरों का अपना title, 70–170 अक्षरों का डिस्क्रिप्शन और एक H1; घोषित भाषा (en या ru) और दोनों संस्करणों के बीच absolute hreflang लिंक; 390 px पर कोई साइडवेज़ स्क्रॉल नहीं; canonical URL; absolute पतों वाला Open Graph टाइटल और इमेज; और WebPage JSON-LD, जिसमें VITON¹³ को निर्माता बताया गया है। 17 लिंक गंतव्यों में 0 टूटे लिंक हैं (पोर्टफ़ोलियो के केस पेज के दो लिंक, /work/mobius/ और /ru/work/mobius/, उस पेज के प्रकाशित होने पर काम करेंगे), और robots.txt डोमेन के रूट पर है। आंशिक: सभी 98 तस्वीरों पर ख़ाली alt है, जो उन्हें टेक्स्ट शीर्षकों के बगल में सजावटी बताता है, पर इमेज सर्च को कुछ नहीं बताता, और डेमो को जानबूझकर sitemap.xml से बाहर रखा गया है।

अगर Möbius किसी असली स्कूल की साइट होती: noindex हटाना और पेजों को sitemap.xml में दर्ज करना; JSON-LD को WebPage से आगे बढ़ाकर स्कूल के लिए EducationalOrganization, हर प्रोग्राम के लिए Course, ओपन डे और टूर के लिए Event और BreadcrumbList जोड़ना; और जानकारी देने वाली तस्वीरों, जैसे कैंपस की इमारतों, का विवरण लिखना। फ़ोन पर गति के लिए 3D सीन को पहली पेंट के बाद शुरू करना और कार्ड एटलस को छोटे चरणों में या मुख्य थ्रेड से बाहर बनाना, और फिर बिना लोड वाली मशीन पर लाइव पते को दोबारा मापना।

यह केस किन सेवाओं को दिखाता है

सेवा पेज पर काम बताएँ; लिखित दायरा, समय-सीमा और क़ीमत एक कार्यदिवस में मिलती है।

ऐसे ही प्रोजेक्ट पर बात करें

और केस

सभी केस

VOXA की पहली स्लाइड: बड़ा “1”, सफ़ेद ध्वनि-वलयों के बीच बकाइनी मंच पर “Send Anna $25 for pizza” सुनता फ़ोन, तैरता “Voice ID 98%” कार्ड और शीर्षक “Pay With Your Voice”।

कॉन्सेप्टकॉन्सेप्ट — ग्राहक का ऑर्डर नहीं

VOXA — भविष्य का बैंक

कॉन्सेप्ट साइट · three.js · आवाज़ · अंग्रेज़ी, रूसी · 2026

VOXA भविष्य का एक काल्पनिक बैंक है, और यह वह साइट है जिसे VITON13 ने बैंकों और फ़िनटेक उत्पादों के लिए कॉन्सेप्ट के रूप में बनाया। कैमरा three.js की एक दुनिया से गुज़रता है जिसमें दस फ़ीचर हैं; हर फ़ीचर फ़ोन में एक असली ऐप खोलता है जहाँ विज़िटर दोस्त को आवाज़ से पैसे भेजता है, साझा सपने के लिए बचत करता है, ऐसी फ़्लाइट ख़रीदता है जो बोर्डिंग पास बन जाती है या अपना कार्ड डिज़ाइन करता है, और Veo 3.1 की दो फ़िल्मों वाला अंतिम दृश्य माइक्रोफ़ोन विज़िटर को सौंप देता है।

केस पढ़ें

अपनाहमारा अपना प्रोडक्ट

viton13.com

Next.js 16 · 5 भाषाएँ · 7 डोमेन · 2026

VITON13 की अपनी वेबसाइट: एक ही Next.js ऐप मुख्य डोमेन और सेक्शनों के छह सबडोमेन को अंग्रेज़ी, रूसी, स्पेनिश, फ़्रेंच और हिन्दी में चलाता है। हर रिलीज़ के लाइव होने से पहले एक क्रॉल उसके आंतरिक रूट जाँचता है।

केस पढ़ें

अपनाहमारा अपना प्रोडक्ट

tarasovvitalii.com

अपनी साइट · 4 भाषाएँ · 21 काम · 2026

VITON13 के संस्थापक विटाली तारासोव (Vitalii Tarasov) की निजी वेबसाइट, जिसे स्टूडियो ने डिज़ाइन करके बनाया और जो 23 सितंबर 2026 से लाइव है। यह अंग्रेज़ी, रूसी, स्पेनिश और चीनी में 21 काम दिखाती है, हर एक पर क्लाइंट, अपना प्रोडक्ट या कॉन्सेप्ट का लेबल है; विज़िटर VITON ID से उन्हें सीधे लिख सकते हैं, और साइट एक शोरील से खुलती है, जिसका हर फ़्रेम कोड से बना है; पूरी फ़िल्म 47.6 सेकंड की है।

केस पढ़ें