Teletext Zero

Resurrecting 1980s TV technology to cure modern information overload. A "Slow Web" browser that forces the infinite internet into a finite, calming 40x24 grid.

Comment

Inspiration

We are living in an age of digital exhaustion. The modern web is infinite, noisy, and algorithmically designed to keep us doomscrolling forever. For the Kiroween "Resurrection" category, we wanted to look back at a "dead" technology that got this right: Teletext.

In the 1980s, information was finite. You checked the news on your TV, read a few blocky pages, and then you turned it off. There was a finish line.

Teletext Zero was born from a desire to resurrect this "Slow Web" philosophy. We wanted to build a browser that forces the chaotic internet into a calming, strict, 40x24 character grid. No infinite scroll. No clickbait thumbnails. Just the essential facts, delivered in a beautiful, retro-haunted package.

What it does

Teletext Zero is a fully functional news and utility browser that runs in your web browser but behaves like a 1980s television set.

  • The Constraints Engine: It enforces a strict 40-column by 24-row grid. Content never scrolls; it fits the screen or it is cut.
  • Remote Control Navigation: There are no clickable links or mouse interactions. You navigate by typing authentic 3-digit page numbers (e.g., 200 for News, 400 for Weather).
  • Live Data: It fetches real-time data from BBC World News, The Verge, and Open-Meteo, instantly formatting complex web articles into bite-sized Teletext summaries.
  • The Kiroween Twist (Page 666): In the spirit of the "Costume Contest", we hid a "Ghost in the Machine." Navigating to Page 666 triggers a spooky, glitch-filled analog horror narrative that suggests the user shouldn't be watching.

How we built it

This project was built entirely using Kiro, the AI IDE, utilizing a unique Hybrid Workflow to handle both the strict logic and the creative aesthetics.

  1. Phase 1: Spec-to-Code (The Architect): We started by uploading a strict requirements.md to Kiro using the Spec method. We defined the "Teletext Constraints" (grid size, 8-color palette, navigation buffer). Kiro generated the core React engine and wrote Property-Based Tests (using fast-check) to mathematically guarantee that the grid layout would never break, no matter what content was loaded.
  2. Phase 2: Vibe Coding (The Artist): Once the logic was solid, we switched to Vibe mode to handle the aesthetics. We asked Kiro to generate complex CSS shaders to simulate CRT scanlines, phosphor bloom, and chromatic aberration.
  3. Phase 3: The Integrator: We used Kiro to write a smart Data Service that parses RSS feeds from the BBC and The Verge, implementing a custom "word wrap" algorithm to fit modern headlines into the 40-character limit without breaking words.

Challenges we ran into

  • The Grid vs. The Web: Modern news headlines are long. Teletext is narrow. We struggled to make the content readable without scrolling. We solved this by implementing a "Read More" sub-page system (e.g., Page 201) that extracts just the summary text from RSS feeds.
  • The "Hacker News" Problem: Originally, we used the Hacker News API, but the content often lacked summaries, leaving our sub-pages empty. We pivoted to parsing RSS feeds from The Verge and BBC, which provided much richer descriptions for the user.
  • Deployment Glitches: We faced "White Screen" issues when deploying to GitHub Pages due to asset pathing. Kiro helped us debug the Vite configuration to ensure the app runs perfectly on a custom domain.

Accomplishments that we're proud of

  • The "Costume": The visual fidelity is incredible. The way the text glows and the screen flickers feels exactly like a physical CRT monitor. It fits the "Costume Contest" theme perfectly.
  • The Utility: It’s not just a toy. Navigating to Page 400 to see the local weather based on browser geolocation is genuinely faster than loading a modern weather website.
  • The Stability: Thanks to the Spec-driven approach and property tests, the app handles window resizing and random keypresses without ever breaking the immersion.

What we learned

  • Constraints breed creativity. By removing images and scrolling, we were forced to focus entirely on the quality of the text and the speed of the interface.
  • AI as a Hybrid Tool: We learned that Kiro isn't just for writing code; it's for managing workflow. Using Spec for the "boring" logic and Vibe for the "fun" shaders was a massive productivity unlock.

What's next for Teletext Zero

  • Custom Feeds: Allowing users to input their own RSS feeds to create a personalized "Morning Briefing" channel.
  • Sound Effects: Adding satisfying "clunk" sounds for page turns.
  • Mobile "Remote" App: Building a companion mobile app that acts as the physical remote control for the desktop view.

Built With

Share this project:

Updates