Frontend Display Options

How far the engine's frontend (skin) layer can go — what's renderable today, what would need small engine extensions, and what skins/experiences become possible.

The engine is headless: it produces structured data (current event, choices, dialogue speaker/mood, scene visuals, character profiles, notifications, discoveries). Skins decide how to present that data. Today's demo-react is text-only; the engine's data model already supports much richer experiences.

---

What the engine already exposes

Per-event (TimelineEvent.scene)

• background — image URL
• atmosphere — mood/lighting hint ('rain', 'golden-hour', 'dark', etc.)
• audio — ambient sound hint

Per-content-variant

• ContentVariant.background — variant-specific background override based on player state

Per-character (CharacterVisuals)

• avatar — small, for chat lists and bubbles
• portrait — large, for dialogue scenes
• expressions — mood → image map
• accentColor — UI theming hex

Per-dialogue event (DialogueMetadata)

• speaker — character ID
• mood — UI styling hint
• expression — portrait override key (looks up character.visuals.expressions[expression])

Already structured for skins

• presentationHint per event (narrative / phone / hybrid)
• notifications array — pending notifications a skin can render as toasts/banners
• choices, discoveries, history — structured, not pre-formatted

---

What demo-react actually renders today

Text. Choices. A speaker name in a div. None of scene.background, scene.atmosphere, scene.audio, character.visuals.*, or dialogue.expression is read anywhere in GameView.tsx.

The contract is already richer than any current demo proves. The gap is rendering, not modeling.

---

Layer 1 — Render what the engine already emits

Zero engine changes. Pure FE work. This closes the gap between data model and demo.

• Crossfading background images on event transitions
• CSS filter overlays driven by atmosphere
• 'rain' → blue desaturate + particle layer + audio loop
• 'golden-hour' → warm vignette + dust motes
• 'dark' → contrast lift + grain
• Ambient audio loop, crossfading per event's audio field
• Music ducking when dialogue plays (web audio gain nodes)
• Character portraits with mood-driven expression swaps
• Look up character.visuals.expressions[dialogue.expression || dialogue.mood]
• Fall back to portrait, then avatar, then a default silhouette
• Accent-color-themed chat bubbles (character.visuals.accentColor)
• VN-style staging — character portrait foreground over scene background, text box at bottom
• Type-on text reveal with pacing per character (driven by behavior.responseDelay)
• Notification toasts animated in from the side, dismissible
• Per-variant background switching (when a ContentVariant matches, use its background)

---

Layer 2 — Skin variety

Build multiple reference skins to prove the abstraction and create a strong demo video / marketing story.

Reference skins worth building

• VN/dialogue skin — full-screen background, character portrait foreground, text box bottom. Highest visual "wow," easiest to make look polished.
• Phone skin (already have for Doppelganger) — message threads, app icons, notifications, social feeds.
• Chatroom/Discord-style skin — everything as channels and DMs. Strong fit for modern internet-mystery stories.
• Terminal/BBS skin — monospace, command-driven. Proves the engine doesn't assume click-choices.
• 2D top-down explorable skin — engine drives which event fires in which "room"; characters become walking sprites; choices map to interactable objects.
• Branching novel skin — paginated like an ebook with illustrations between chapters.

The marketing pitch this enables: "Author once, present as a phone game, a visual novel, a chatroom, or an explorable scene — all from the same story."

---

Layer 3 — Modest engine extensions, big payoff

Each is small in engine code but unlocks new presentation territory.

Multi-character staging (HIGH PRIORITY)

The single biggest cinematic upgrade. Currently dialogue.speaker is singular. Extend to support a cast on screen:

interface SceneStaging {
  /** Characters present on screen, in display order */
  cast?: Array<{
    characterId: string;
    position: 'far-left' | 'left' | 'center' | 'right' | 'far-right';
    expression?: string;
    /** Visual emphasis — speaker is highlighted, others dimmed */
    state?: 'active' | 'listening' | 'absent';
  }>;
}

This enables:

• Group dialogue scenes (3 characters in a room, the camera "cuts" by switching active speaker)
• Reaction shots (the speaker talks while others' expressions update silently)
• Off-screen characters — a character "leaves" by transitioning out, without re-authoring the event
• Eavesdropping — two characters talk while a third listens with state: 'listening'

Authoring-side: Story Maker needs a "stage editor" — drag character portraits onto positions, set expressions, mark active speaker. This is genuinely fun authoring UX.

Per-character voice (TTS)

Each character has a voice ID (ElevenLabs / OpenAI). Skin plays generated audio for dialogue. Combined with mood-keyed expressions, characters feel embodied. Especially powerful for LLM-generated dialogue — the character's voice is consistent even when the words are dynamic.

Tension / intensity channel

Engine emits a hint (tension: 0..1 or named: 'calm' | 'rising' | 'climax') per event. Skins react however they want: camera shake, music layer mix, color punch, vignette intensity.

Layered music

Engine emits multiple audio hints (ambient, tension, theme). Skin mixes them — ambient always, tension fades in during high-stakes scenes, theme plays for character moments.

Generated portraits per mood

Stable Diffusion / image API integration so authors don't need 12 hand-drawn images per character. Pre-generate at build time, cache results. Optional — authors can still hand-author.

Sub-event animation cues

Add cues array on events: [{ at: 'enter', action: 'fade-in' }, { at: 'choice', action: 'pause-music' }]. Skins interpret cues their own way.

---

Layer 4 — Story Maker authoring affordances

This is where the paid product gets its value. The engine and skins are useless to non-coder buyers if authoring isn't accessible.

• Asset library — upload images/audio, browse/reuse, tag by character or scene
• Per-event visuals editor — pick background image, set atmosphere from a dropdown, attach audio
• Mood → expression uploader — drag images onto a grid of moods per character
• Stage editor — for multi-character scenes (Layer 3), visual layout of who's where with what expression
• Skin selector in preview — let the author test their game in 2-3 reference skins ("how does this scene play as a VN vs. a phone game?")
• Asset bundle export — one zip with all media + JSON game definition, ready to drop on itch.io / Netlify
• Inline atmosphere library — preset CSS-driven atmospheres (rain, fog, golden-hour) with previews so authors don't need to design them

---

Multi-character staging — why it matters

Single-speaker dialogue is fine for chatbot-style games. But narrative games hit a different gear when characters interact with each other in front of the player. A few examples this unlocks:

• An interrogation scene: detective and suspect on screen, the player picks the detective's questions, the suspect's expression flickers between answers
• A confrontation: two NPCs argue, player's choices nudge the conversation but they're not the speaker — they're observing and shaping
• A reveal: a third character walks into a scene mid-conversation, faces flash to surprise, the dialogue branches based on whose perspective you took
• A romance triangle: three characters present, expressions reveal what's actually happening under the surface dialogue

This is what Disco Elysium, Citizen Sleeper, and classic VNs do well. Twine fundamentally can't do it. A scene with 3 characters whose moods update independently is genuinely novel for an indie narrative engine.

---

Strategic claim

If Layer 1 + Layer 2 (with 2-3 skins) ship, the product positioning shifts:

• Twine: easy branching text
• Ink/Inkle: scriptable narrative with hooks for game engines
• This engine: headless narrative runtime with swappable cinematic frontends and LLM-driven characters

The skin layer is the viral hook — an author writes one story, sees it rendered three different ways with three different vibes. That's the demo video.

Layer 3 (multi-character staging especially) is what makes this feel like a real cinematic engine instead of just "Twine with skins."

---

Build order proposal

1. Layer 1 in demo-react — close the gap between engine output and what's rendered. Use Doppelganger or "The Vanishing" as the test content. This is pure FE work and produces an immediate visible upgrade.
2. Pick a second reference skin — VN-style is the highest impact for marketing.
3. Multi-character staging extension — engine schema change + Story Maker stage editor + skin support in both VN and demo-react.
4. Story Maker authoring affordances — asset library, per-event visuals editor, skin preview selector.
5. Phone skin extraction — promote Doppelganger's phone UI into a reusable skin package.
6. TTS / generated portraits / tension channel — pick the one that matches the games you want to demo.