Teletext Reborn

• 

• 

• 

• 

Inspiration

Teletext was a text-based information service that ran on television signals from 1974 to 2012. Before the internet became mainstream, millions of people across Europe relied on it for news, weather, sports scores, and TV listings. You would press a button on your remote, enter a three-digit page number, and wait a few seconds while blocky yellow text appeared on a black screen.

I grew up with Teletext. There was something satisfying about the simplicity of it. No ads. No infinite scroll. Just information, delivered in eight colors on a 40-character grid.

When Teletext was discontinued in 2012 during the digital TV switchover, it felt like losing a piece of childhood. The Kiro Hackathon's Resurrection category gave me a reason to bring it back.

What it does

Teletext Reborn is a web application that recreates the authentic Teletext experience while adding modern capabilities that the original never had.

The application provides live data feeds including news headlines from BBC RSS, current weather and five-day forecasts via Open-Meteo, and cryptocurrency prices from Coinlore. All of this is displayed in the original Teletext style with the same eight-color palette, blocky Press Start 2P font, and 40-character line width.

The standout feature is the Time Machine. Users can select any date from 1940 to yesterday and see what happened in history on that day. The Wikipedia API provides historical events, notable births, and deaths. The Open-Meteo Archive API provides weather data for that date. A 2.5-second time travel animation with screen blur, white flash, and year counter creates the feeling of actually traveling through time.

The interface includes premium CRT effects: scanlines, phosphor glow, vignette, screen curvature, chromatic aberration, and a TV bezel frame. These effects are subtle enough to feel authentic without being distracting.

How we built it

I used Kiro's spec-driven development approach. Before writing any code, I spent the first day creating detailed requirements. The final specification included 34 requirements with over 220 acceptance criteria. Each requirement followed a structured format with specific conditions and expected behaviors.

For example, the time travel animation requirement specified exact timings: Phase 1 at 0-0.3 seconds for blur and brightness increase, Phase 2 at 0.3-0.5 seconds for white flash, Phase 3 at 0.5-2.0 seconds for year counter animation, and Phase 4 at 2.0-2.5 seconds for content reveal.

I created seven steering documents that guided Kiro's responses throughout development. The most valuable was a GSAP animation guide that documented verified syntax patterns. GSAP 3 uses lowercase easing names like power2.out rather than the older Power2.easeOut format. By documenting this in a steering file, Kiro never made a syntax error across animations.

The architecture follows a modular pattern. A StateManager singleton handles settings persistence and API caching. A PageRouter manages navigation with history support and keyboard shortcuts. Each page exports render, onMount, onUnmount, and getFastextButtons functions. API services handle fetching, parsing, and caching with automatic retry logic.

Testing used Vitest with fast-check for property-based testing. Rather than testing specific inputs, property tests verify that invariants hold across randomly generated data. For example, one property test verifies that no formatted text ever exceeds 40 characters regardless of input length.

Challenges we ran into

The frame size consistency problem took significant debugging time. When navigating between pages, the TV bezel would shift by a few pixels because different pages had different content heights. The fix required explicit height constraints on the screen container with overflow handling for the content area. I added this constraint to the steering documents to prevent recurrence.

The original plan used the Konami code to trigger a secret Color Burst mode. The arrow key sequence conflicted with page navigation, causing users to accidentally navigate away while entering the code. The solution was simpler: typing the word BURST anywhere on the page triggers the effect instead.

API rate limiting required careful handling. The news API has a 200 requests per day limit. The application tracks request counts in localStorage and falls back to cached data when limits are approached. Stale data displays with a timestamp so users know when it was last updated.

Accomplishments that we're proud of

I AM JUST GLAD TO BE ABLE TO MAKE THIS SUBMISSION

What we learned

Spec-driven development with AI assistance is fundamentally different from prompt-based coding. Writing detailed requirements upfront takes time, but it eliminates the back-and-forth of clarifying intent. The AI follows the specification rather than guessing what you want.

Steering documents compound in value. Each document I wrote improved every subsequent interaction. The GSAP guide alone probably saved hours of debugging animation syntax issues.

Property-based testing catches edge cases that example-based tests miss. The 40-character line width constraint was verified across thousands of randomly generated strings, catching truncation bugs that would have been difficult to find manually.

The most important lesson was that AI coding assistants work best when you treat them as collaborators who need clear instructions, not magic boxes that read your mind.

What's next for Teletext Reborn

The immediate roadmap includes offline support with service workers so the application works without an internet connection using cached data. A shareable links feature will let users generate URLs that deep-link to specific historical dates, making it easy to share discoveries on social media.

Additional content sections are planned including sports scores, TV listings via the TVMaze API, and horoscopes. These were common Teletext features that would complete the authentic experience.

A mobile-optimized version with touch-friendly navigation would make the Time Machine accessible on phones. The current responsive design works on mobile but could be improved with larger touch targets and swipe gestures.

Long-term possibilities include a browser extension that replaces new tab pages with Teletext, and an API that other developers could use to display their own content in Teletext format.

The goal is to keep Teletext alive not just as a nostalgia project, but as a functional information service that proves simple interfaces still have value in an age of infinite scroll and attention-grabbing design.

Built With

• bbc-rss
• coinlore-api
• css3
• fast-check
• gsap
• html5
• ip-api
• javascript
• kiro
• open-meteo-api
• vercel
• vite
• vitest
• wikipedia-api