Resurrecting Teletext

I resurrected 1970s teletext technology as a modern web app with AI chat, interactive games, live radio streaming, and Halloween horror elements - all built in 60 hours with Kiro AI.

Comment

Inspiration

I've always been fascinated by teletext - that 1970s broadcast system where you navigated with three-digit page numbers on your TV remote. It was fast, accessible, keyboard-only, and distraction-free. Everything modern web design isn't.

For Kiroween's Resurrection category, I wanted to prove that "dead" technology could be reimagined with modern capabilities while keeping its soul intact. Teletext was perfect: simple, efficient, and ripe for a Halloween makeover.

What it does

How I Built It with Kiro

Spec-Driven Foundation: Created 4 comprehensive specs in .kiro/specs/:

38 EARS-compliant requirements 34 correctness properties for testing Complete architecture design 40+ implementation tasks Vibe Coding for Features: After the spec foundation, I used conversational development:

Me: "I want direct text input on page 500 for AI chat." Kiro: Generated entire metadata system with inputMode: 'text', stayOnPageAfterSubmit: true, AI response rendering.

Me: "Add live radio with 9 stations." Kiro: Created station data, HTML5 Audio integration, background audio persistence, single-digit switching.

Me: "Create cursed page 666 with animated ASCII skull." Kiro: Generated ASCII art, CSS animations, multiple variants, accessibility support.

What Impressed Me: Kiro never forgot constraints across hundreds of conversations. It remembered teletext format rules, page numbering, metadata patterns, and accessibility requirements. After implementing one feature, it understood the pattern and generated similar features consistently.

Challenges we ran into

Challenge 1: Text Input in Teletext Traditional teletext only had numeric input. Solution: Metadata-driven input modes (text, single, triple) that switch dynamically based on current page.

Challenge 2: Live Radio Streaming How to integrate audio without breaking aesthetics? Solution: meta.radioPlayer object that the RadioPlayer component reads to manage background audio.

Challenge 3: Animated ASCII Art How to animate without JavaScript overhead? Solution: Pure CSS animations with data attributes. GPU-accelerated, performant, respects prefers-reduced-motion.

Challenge 4: Context-Aware Navigation News pages need single-digit input (press 1-5) but also 3-digit navigation (type 201). Solution: Input handler reads meta.inputMode and switches behavior dynamically.

Accomplishments that we're proud of

What I learned

Spec-Driven + Vibe Coding = Perfect Workflow Specs provided structure and consistency. Vibe coding enabled rapid iteration. Together, they created a workflow that was both organized and flexible.

Kiro's Context Awareness is Incredible Across hundreds of conversations, Kiro remembered every constraint, pattern, and architectural decision. It proactively added error handling, accessibility features, and performance optimizations.

Dead Tech Can Be Reimagined Teletext's simplicity is its strength. By adding modern capabilities (AI, radio, games) while maintaining the retro aesthetic, I created something that feels both nostalgic and fresh.

Built With

Share this project:

Updates