WARM UP: डिज़ाइन सिखाने वाले एक रेट्रो टीवी शो की कॉन्सेप्ट साइट

WARM UP डिज़ाइन में शुरुआत करने वालों के लिए एक काल्पनिक रेट्रो टीवी शो है। इसका विचार यह है कि रचनात्मक कौशल मांसपेशियों की तरह काम करते हैं, इसलिए हर गाइड एक वर्कआउट VHS टेप है। VITON¹³ ने यह साइट कॉन्सेप्ट के रूप में बनाई, ताकि ब्रॉडकास्ट अंदाज़ वाली एक खिलंदड़ी साइट दिखाई जा सके, जिसमें सिखाने का काम एक ही रूपक और उसका मोशन करता है।

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

सात पेज: होम, टेप, स्टूडियो, हॉटलाइन, प्राइवेसी, शर्तें और 404। शो में 4 VHS टेप हैं — Idea Stretch, Portfolio Pump, Critique Cardio और Pitch Cool-Down — हर एक में 5 मूव का रूटीन है, और होम पेज पर 5 चैनल वाला एक टीवी है।

होम पेज VHS बूट स्क्रीन से शुरू होता है: PLAY, टेप काउंटर और ट्रैकिंग। फिर आता है पाँच चैनल वाला टीवी, जिसके चैनल स्क्रीन पर बने तीरों या कीबोर्ड से बदलते हैं, साथ में स्टैटिक और लोअर थर्ड, उभरा हुआ रेट्रो शीर्षक और चलती पट्टी (टिकर)। टेप CSS में बने 3D VHS कवर के रूप में दिखते हैं, जो स्क्रॉल पर घूमते हैं और माउस ले जाने पर प्रीव्यू चलाते हैं। टेप पेज पर टीवी फ़्रेम में वीडियो, रेप्स के साथ पाँच मूव का रूटीन, कोच की सलाह, आम चोटें, होमवर्क और अगला टेप है। स्टूडियो पेज कोचों और साप्ताहिक शेड्यूल से मिलवाता है; हॉटलाइन पेज पर कॉल-इन फ़ॉर्म और FAQ है।

आम रास्ता होम पेज से किसी टेप तक और फिर हॉटलाइन तक जाता है। स्क्रीन पर स्कैनलाइन, canvas पर चलता लाइव स्टैटिक, खिसकती ट्रैकिंग पट्टी, रंग-बिखराव वाला ऑन-स्क्रीन टेक्स्ट और फ़्रेम का हल्का कंपन है; शब्द स्प्रिंग की तरह उछलकर आते हैं, और स्क्रॉल के साथ टिकर तेज़ होता जाता है। एक पेज से दूसरे पर जाते समय तस्वीर FF या REW डिस्प्ले के साथ स्टैटिक में सिमट जाती है।

साइट बिना बिल्ड स्टेप के सादे HTML, CSS और JavaScript में है। हेडर, फ़ुटर और ओवरले एक साझा स्क्रिप्ट से बनते हैं, इसलिए हर पेज पर वे एक जैसे रहते हैं। मोशन GSAP, ScrollTrigger और Lenis स्मूद स्क्रॉलिंग पर चलता है। कॉल-इन फ़ॉर्म डेमो मोड में हैं: डेमो डेटा ब्राउज़र के localStorage में रहता है और कहीं नहीं भेजा जाता। वीडियो Pexels का लाइसेंस वाला स्टॉक है, जो सीधे CDN लिंक से लोड होता है।

कॉन्सेप्ट अंग्रेज़ी में 7 तैयार पेजों के रूप में मौजूद है। 22 सितंबर 2026 को VITON¹³ ने Chrome में रेंडर किए गए इनमें से 6 पेज जाँचे, 404 पेज को छोड़कर: सभी 6 के title अलग-अलग हैं और हर एक में ठीक एक H1 है, भाषा घोषित है, 390 px पर लेआउट बिना साइड-स्क्रॉल के टिकता है और कोई आंतरिक लिंक टूटा नहीं है।

होम पेज पर Lighthouse। मोबाइल पर: परफ़ॉर्मेंस 88, एक्सेसिबिलिटी 95, बेस्ट प्रैक्टिसेज़ 77, SEO 100, LCP 2.7 सेकंड, CLS 0.048 और TBT 0 ms, 21 रिक्वेस्ट में 9.8 MB। डेस्कटॉप पर: परफ़ॉर्मेंस 73, LCP 0.9 सेकंड और TBT 0 ms, लेकिन CLS 0.577, क्योंकि फ़ॉन्ट और वीडियो लोड होते समय चैनल और शीर्षक वाला ब्लॉक खिसकता है; वीडियो की वजह से डेस्कटॉप होम पेज 13.4 MB का है।

WARM UP एक कॉन्सेप्ट है — न किसी ग्राहक का ऑर्डर किया हुआ प्रोजेक्ट, न असली शो। शो, कोच, टेप, शेड्यूल और फ़ोन नंबर काल्पनिक हैं, और वीडियो Pexels का लाइसेंस वाला स्टॉक है। साइट का न कोई डोमेन है, न दर्शक, न सर्च ट्रैफ़िक, न हॉटलाइन पर कॉल, इसलिए यह केस नहीं बताता कि कितने लोग इसे देखते या इससे सीखते।

Lighthouse के आँकड़े एक दिन में एक पेज का लैब माप हैं। डेस्कटॉप पर लेआउट का खिसकना (CLS 0.577) एक असली कमी है, जिसे इस संस्करण में ठीक नहीं किया गया है, और SEO 100 सिर्फ़ बुनियादी बातें जाँचता है: कैनोनिकल URL, Open Graph, JSON-LD, sitemap.xml और robots.txt अभी नहीं हैं।