---
name: story-engineer
description: Use when transforming raw project facts, case studies, creative briefs, or product histories into cinematic, dramatic story arcs and non-generic web narrative structures.
author: J StaR Films / Takomi
coauthored: J StaR Films / Takomi
version: 1.0.0
---

# Story Engineer

Transform raw project facts, milestones, and technical achievements into cinematic, non-generic narrative architectures. Establish narrative tension, transformations, and visual metaphors **before** making visual, layout, or code decisions.

For emotional modulation patterns and question-chain templates, see [narrative-patterns.md](references/narrative-patterns.md).
For techniques on turning abstract concepts and data into physical visual metaphors, see [visual-metaphors.md](references/visual-metaphors.md).
For worked examples (including the VOID/FORM case study), see [examples.md](references/examples.md).

---

## Ground Rules

1. **Story before structure**: Never start with UI sections (`Hero`, `About`, `Features`, `Contact`). Discover the story hiding inside the facts first.
2. **Discover, do not invent**: The drama already exists in the real sequence of events, failed experiments, scale, and breakthroughs. Extract it.
3. **Protect the reveal**: Gate the final climax or artifact. Never spoil the destination in the opening beat.
4. **Questions create motion**: Move visitors forward through escalating curiosity, not passive reading.

---

## The 6-Stage Story Engineering Pipeline

```
Archaeology → Transformation → Contradiction → Question-Relay → Metaphor & Texture → Interface Script
```

Follow all stages in order. Do not skip to layout until Stage 6.

---

## Stage 1: Factual Archaeology ("What actually happened?")

Extract the raw, unpolished, chronological sequence of reality. Strip away marketing polish and extract the genuine timeline.

1. **Map the factual event chain**:
   - What was the initial itch, observation, or frustration?
   - What investigation or digging occurred?
   - What data, books, tools, or sources were gathered?
   - What was synthesized, extracted, or built?
   - What failed, broke, or resisted?
   - What was the turning point?
   - What was the final result?

2. **Inventory the raw numbers & scale**: Record exact metrics (e.g., *45 PDFs, 752 pages, 44 skills, 5 AI candidates, 1 winner*). These will serve as dramatic story objects in Stage 5.

### Completion Gate
- [ ] Chronological factual sequence mapped (minimum 6 discrete milestones)
- [ ] Concrete scale metrics inventoried
- [ ] No marketing buzzwords in the event chain

---

## Stage 2: The Core Transformation

Reduce the entire project to a single three-part arc:

```
BEFORE  →  CHANGE  →  AFTER
```

1. **Before**: The unsatisfactory status quo, common frustration, or default assumption (e.g., *"AI generates repetitive, generic websites"*).
2. **Change**: The hypothesis, daring experiment, or contrarian intervention (e.g., *"What if we engineer deep human expertise into an AI skill?"*).
3. **After**: The resulting transformation or new reality (e.g., *"An AI skill generates award-winning creative architecture"*).

### Completion Gate
- [ ] Core transformation stated in 3 sentences or fewer
- [ ] Contrast between Before and After is sharp and meaningful

---

## Stage 3: Contradiction & The Driving Question

Identify the central paradox or friction in the material. Great stories run on tension.

1. **Locate the contradiction**: Find where expectations collide with the experiment:
   - *Example*: "We used AI to escape AI-looking design."
   - *Example*: "We studied 1970s medical rule systems to build modern generative graphics."

2. **Formulate the Driving Question**: Turn the contradiction into an open, provocative inquiry that propels the audience forward:
   - *Weak*: "Here is our creative AI workflow."
   - *Strong*: *"Can a machine learn taste?"*

### Completion Gate
- [ ] Central contradiction identified
- [ ] Single Driving Question formulated to anchor the experience

---

## Stage 4: The Question-Answer Relay (Narrative Rail)

Structure the narrative so that **every chapter answers one question and immediately creates the next**. This creates irresistible momentum.

Construct the narrative rail:

```
Beat 1: Poses Driving Question → Reveals Observation
         ↓
         Creates Question 2: "What did you do about it?"
         ↓
Beat 2: Answers with Investigation → Discovers Core Principle
         ↓
         Creates Question 3: "Where did the knowledge come from?"
         ↓
Beat 3: Answers with Historical Depth / Theory → Gathers Heavy Data
         ↓
         Creates Question 4: "Can all this data be combined?"
         ↓
Beat 4: Answers with Synthesis / Tournament → Faces Failure / Crisis
         ↓
         Creates Question 5: "Did it survive the test?"
         ↓
Beat 5: Answers with Climax / Reveal (THE ARTIFACT)
         ↓
         Creates Question 6: "What does this change for the future?"
         ↓
Beat 6: Resolution & Horizon
```

### Completion Gate
- [ ] Continuous Q&A chain connecting every narrative beat
- [ ] Zero dead-end beats where momentum stalls

---

## Stage 5: Emotional Texture & Visual Metaphors

Prevent information fatigue by deliberately modulating emotional registers and turning abstract ideas into physical phenomena.

1. **Modulate emotional registers across beats**:
   Ensure adjacent beats never share the same emotional frequency. Alternate between:
   - `WONDER` (The philosophical hook)
   - `TECHNICAL CURIOSITY` (Deconstruction of mechanisms)
   - `SCALE & WEIGHT` (Raw volume of data)
   - `SUSPENSE` (The competition / trial)
   - `VULNERABILITY` (The bug / breakdown)
   - `EXPLOSION` (The aesthetic reveal)
   - `MYSTERY / HORIZON` (The future implication)

2. **Physicalize abstract concepts into Visual Metaphors**:
   Transform conceptual abstractions into tangible, experiential imagery:
   - *Abstract*: "We synthesized knowledge from 44 skills."
   - *Physical Metaphor*: "Hundreds of fragmented glass shards hovering in dark space, colliding, aligning under magnetic force, and fusing into a monolithic prism."

3. **Deploy numbers as dramatic story objects**: Frame raw metrics with high contrast and scale typography.

### Completion Gate
- [ ] Emotional register assigned to each beat (no consecutive identical registers)
- [ ] At least 2 abstract concepts physicalized into visual metaphors
- [ ] Scale metrics formatted as high-impact story objects

---

## Stage 6: Narrative-to-Interface Translation

Only now translate the finalized narrative rail into interaction, scene choreography, and interface design.

For each narrative beat, specify:

| Element | Specification |
|---|---|
| **Narrative Goal** | The question answered & new question raised |
| **Emotional Register** | Wonder / Scale / Suspense / Explosion / etc. |
| **Visual Metaphor / Scene** | 3D environment, particle state, spatial layout |
| **Typography & Copy** | Exact headline, driving statement, minimal body |
| **Interaction / Transition** | Scroll triggers, camera move, audio cue, shader warp |
| **Gated Information** | What is withheld until the next beat |

### Completion Gate
- [ ] Complete scene-by-scene interface script generated
- [ ] Climax/reveal strictly protected until the designated beat
- [ ] Every visual and interaction element directly serves its narrative beat