encart-ai

Inspiration

About Encart-AI Inspiration Growing up in the late 90s, CD-ROM encyclopedias like Microsoft Encarta 1998 and Britannica were magical portals to knowledge. That distinctive Windows 95 interface—beveled buttons, blue title bars, serif fonts on cream backgrounds—represented the cutting edge of educational technology.

I wanted to resurrect that nostalgic experience but solve its fundamental limitation: static content. What if Encarta had infinite articles, generated on-demand for any topic you could imagine? Encart-AI merges 1990s aesthetics with 2025 LLM capabilities.

What I Learned CSS archaeology: Recreating Windows 95's 3D beveled borders required understanding the border-color pattern—white dark dark white for raised, inverted for sunken. No modern CSS shadows allowed!

Prompt engineering for tone: Getting GPT-4o-mini to write in authentic 1990s encyclopedia style required explicit constraints: "no contractions, no post-1998 references, use passive voice."

Spec-driven development: Kiro's specs forced me to define acceptance criteria before coding. This prevented scope creep and ensured the Windows 95 aesthetic stayed consistent.

How I Built It The architecture follows a clean separation:

User Input → Zustand Store → LLM Service → React Components ↓ .kiro/specs (requirements) .kiro/steering (tone guidelines) .kiro/hooks (automation) Key technical decisions:

Vite + React + TypeScript for fast development Zustand for lightweight state management OpenAI GPT-4o-mini for cost-effective article generation CSS-only animations for Kiroween VHS glitch effects The LLM service uses structured prompts:

CATEGORY: [classification] ARTICLE: [3-5 paragraphs] ASCII_ART: [diagram] SEE_ALSO: [cross-references] Challenges Faced Pixel-perfect nostalgia: Modern browsers render fonts differently than Windows 95. I had to use specific font stacks (MS Sans Serif → Tahoma → Arial) and fixed pixel sizes to approximate the original look.

Balancing modes: The three modes (1998, Enhanced, Kiroween) share components but need different content. Solved with mode-aware prompts and conditional CSS classes.

Cross-reference loops: "See also" links generate new articles, which have their own links. Implemented history tracking to enable back/forward navigation without infinite regeneration.

Kiroween atmosphere: Creating "subtle unease" without overt horror required careful prompt engineering—references to "impossible dates," "researchers who disappeared," and "[REDACTED]" sections that feel authentically creepy.

The Kiro Difference Without Kiro's spec-driven approach, this project would have drifted from the retro aesthetic. The steering docs ensured every generated component respected the Windows 95 color palette (#C0C0C0, #000080) and typography rules. Agent hooks automated validation on every save.

The result: Encarta reborn in 2025—a 1998 interface wrapped around an infinite, LLM-powered knowledge engine. 📀

Built With

• javascript
• kiro
• openai