My Unwritten Story — Text Based Procedural RPG

My Unwritten Story — Text Based Procedural RPG

The Goal

Build a replayable narrative RPG that generates unique worlds, stories, and consequences entirely client-side — no server, no AI API calls, no backend. Every playthrough is driven by a single seed value that deterministically creates an entire world: regions, factions, history, enemies, lore, and a multi-chapter story arc.

The Creative Approach

The Windows 95 aesthetic was chosen to convey a retro feel while giving the interface personality without competing with the narrative for attention.

Image
Image
Image
Image

Responsiveness

The interface adapts from desktop to mobile with a UI scaling system (80%–125% on desktop via a settings slider, fixed on mobile). The layout uses a centered window with max-width constraints, custom Windows 95 scrollbars, and interactive text highlighting with hover tooltips and info overlays for enemies, items, and locations. The chat-log format naturally suits vertical mobile scrolling and all game state persists in localStorage, so sessions survive page refreshes and device switches without authentication.

Image
Image
Image
Image

Image
Image
Image

The Impact

The project demonstrates full-stack frontend architecture: A self-contained game engine with deterministic generation, persistent state management, and narrative logic — all running in the browser with zero external dependencies beyond UI libraries. The same seed produces the same world, making playthroughs shareable and debuggable. The type system (comprehensive TypeScript interfaces across 600+ lines of type definitions) enforces consistency across world generation, game state, and UI rendering. It's a proof of concept that procedural narrative doesn't require large language models — just careful template design, seeded randomness, and systems that remember.

Credits

Creative Director – Matthew Belson

UX/UI – Matthew Belson

Designer – Matthew Belson

Developer – Matthew Belson

Next.js

TypeScript

Tailwind CSS

PostCSS / Autoprefixer

Radix UI

localStorage (persistence — no backend)

React Hook Form (character creation forms)

Tools

Tools

Next.js

TypeScript

Tailwind CSS

PostCSS / Autoprefixer

Radix UI

localStorage (persistence — no backend)

React Hook Form (character creation forms)

Credits

Creative Director – Matthew Belson

UX/UI – Matthew Belson

Designer – Matthew Belson

Developer – Matthew Belson

© 2026 Matthew Belson. All rights reserved.

MATTHEW BELSON