WARM UP: a concept site for a retro TV show that teaches design

WARM UP is a fictional retro TV show for people starting out in design. Its premise is that creative skills behave like muscles, so each guide is a workout VHS tape. VITON¹³ built the site as a concept, to show a playful, broadcast-style site in which one metaphor and its motion carry the teaching.

The site had to look like television from the first second, with a boot screen, channels and static, and still work as a guide: a visitor picks a tape, follows its routine and can call in to the show. Every effect had to serve the metaphor and leave the text readable.

Seven pages: home, tape, studio, hotline, privacy, terms and a 404. There are 4 VHS tapes, Idea Stretch, Portfolio Pump, Critique Cardio and Pitch Cool-Down, each with a routine of 5 moves, and the home page holds a TV with 5 channels.

The home page opens on a VHS boot screen with PLAY, a tape counter and tracking. Then comes a five-channel TV switched with on-screen arrows or the keyboard, with static and lower thirds, an extruded retro title and a ticker. The tapes appear as 3D VHS sleeves built in CSS that rotate on scroll and play a preview on hover. A tape page has a TV-framed video, the routine of five moves with reps, a coach’s tip, common injuries, homework and the next tape. The studio page introduces the coaches and the weekly schedule; the hotline page has a call-in form and an FAQ.

A typical path runs from the home page to a tape and on to the hotline. The screen carries scanlines, a live static-noise canvas, a rolling tracking band, chromatic on-screen text and frame jitter; words pop in with a springy overshoot, and the ticker speeds up as the visitor scrolls. Between pages the picture collapses into static with an FF or REW display.

The site is plain HTML, CSS and JavaScript with no build step. The header, footer and overlays are rendered from one shared script, so every page stays identical. Motion runs on GSAP with ScrollTrigger and Lenis smooth scrolling. The call-in forms are demonstrations: demo state stays in the browser’s localStorage and nothing is sent anywhere. The video is licensed stock footage from Pexels, loaded by direct CDN links.

The concept exists as 7 finished pages in English. On 22 September 2026 VITON¹³ checked 6 of them rendered in Chrome, leaving out the 404: all 6 have unique titles and exactly one H1, the language is declared, the layout holds at 390 px without sideways scroll, and no internal link is broken.

Lighthouse measured the home page. On mobile: performance 88, accessibility 95, best practices 77, SEO 100, LCP 2.7 s, CLS 0.048 and TBT 0 ms, with 9.8 MB across 21 requests. On desktop: performance 73 with LCP 0.9 s and TBT 0 ms, but CLS 0.577, because the channel and title block shifts while fonts and video load; the desktop home page weighs 13.4 MB because of the video.

WARM UP is a concept, not a commissioned project and not a real show. The show, its coaches, tapes, schedule and phone number are fictional, and the video is licensed stock from Pexels. The site has no domain, no audience, no search traffic and no calls to the hotline, so this case says nothing about how many people would watch it or learn from it.

The Lighthouse figures are lab measurements of one page on one day. The desktop layout shift (CLS 0.577) is a real defect that this version has not fixed, and the SEO score of 100 covers basics only: canonical URLs, Open Graph, JSON-LD, sitemap.xml and robots.txt are still missing.

How to check a web studio’s portfolio →