HyperCard Renaissance

Transforms the concept of Apple's HyperCard into a modern web-based storytelling platform enhanced with artificial intelligence.

Comment

Inspiration

Apple's HyperCard (1987) was revolutionary — it let anyone create interactive applications before the web existed. Teachers made educational games, writers crafted interactive fiction, and hobbyists built utilities — all without traditional programming. When Apple discontinued it in 2004, that democratizing spirit was lost.

The project's question was: What if HyperCard existed today powered with modern AI?

What it does

Web-based platform for creating interactive stories and branching narratives:

  • Visual Story Editor — Design narrative flows with a node-based graph editor
  • Card-Based Scenes — Each story moment is a "card" with text, images, and choices
  • AI Story Writing — Claude generates narrative content, dialogue, and descriptions
  • AI Scene Imagery — Phoenix LLM model creates unique artwork for each card
  • Character Consistency — Bria AI trains character models and inserts them into scenes
  • One-Click Publishing — Share stories instantly via unique URLs

How we built it

  • Next.js 16 with App Router for the frontend and API routes
  • Supabase (PostgreSQL) for database with Row Level Security
  • React Flow for the visual story graph editor
  • Anthropic Claude API for AI-assisted narrative generation
  • Leonardo AI API for scene image generation
  • Bria AI API for character model training and scene insertion

Challenges

  • Character consistency — Maintaining the same character appearance across multiple AI-generated images was difficult until we integrated Bria AI's character training pipeline
  • Visual Graph — Keeping the visual story graph readable so user can overview story in a node-based map

Accomplishments

  • True democratization — Non-educated users can create solid interactive stories with AI assistance. No coding skills needed, no writing experience needed.
  • Instant publishing — One click to go from draft to shareable URL

What was learned

Kiro Specs + Claude Opus 4.5 = <3

What's next for Hyper

More features until compelling and presentable stories are achieved:

  • Decision memory — Build intelligent games where every decision could impact your future progress
  • Video generation — Create interactive movies
  • Mobile player — Native reading/video experience for published stories
  • Analytics — Track reader choices to understand which paths resonate

Built With

  • bria
  • claude
  • elevenlabs
  • kiro
  • leonardo
  • nextjs
  • supabase
Share this project:

Updates