Skip to content

05Creative front-end · Interactive narrative

Branching Story Engine

A branching, choice-driven story told in the browser — and the same sequencer behind an interactive product tour or a branching campaign site.

Self-initiated demonstration (live, completed)

Role
Design and development: Syed Ahad Haider
Type
Creative front-end · Interactive narrative

Stack

  • Next.js
  • React
  • HTML video & audio
Visit live site
Custom opening scene: a vintage car on a coastal road at dusk with a "Begin" button

About the project

An interactive short story delivered as a website. The work here is the playback layer: a "Begin" gate that starts audio and video on a deliberate click, a sequencer that holds each scene for an authored duration, captions timed against the soundtrack, and yes/no questions that pause the sequence and branch what plays next. The media is supplied to the sequencer; the timing, gating, branching and state are written in code, and the same piece accepts different footage.

The problem it solves

Browsers block audio and video that start on their own, and a story cannot stutter through its opening. One deliberate click unlocks playback, and from there a sequencer holds each scene for an authored duration, keeps captions in step with the soundtrack, and pauses at a question whose answer decides what plays next — pacing written in code rather than left to the media.

Scope and limits

  • Designed for landscape: on phones it asks you to rotate, and it plays sound.
  • One authored story with a small number of branch points — a piece of interaction design, not a content system.

A landscape experience: on phones it asks you to rotate, and it plays sound.

What it does

  • "Begin" gate that starts the experience on a deliberate click
  • Full-screen video scenes with a synced soundtrack
  • Timed dialogue captions
  • Illustrated scenes that fade in sequence
  • Yes/no questions that branch the story

Worth noticing

  1. 01Pacing is authored: every scene, caption and pause is timed by hand rather than left to the media
  2. 02Sound and video start only after an explicit click — no autoplay, so the browser never blocks playback
  3. 03Branch state decides what plays next, so the same assets produce different runs
Custom story scene: an ornate doorway glowing in the dark

Want something like this?

Open the live site, poke at it, then tell me what you have in mind. A two-line brief is enough to start.

Open Story EngineHire me

Related work