Files
novafarma/docs/game_design/INTRO_SEQUENCE_DESIGN.md
David Kotnik 1a05ee4f57 🎭 INTRO DESIGN - DUAL TIMELINE VERSION!
 UPDATED: INTRO_SEQUENCE_DESIGN.md

Added TIMELINE VERSION A (60 seconds):

📋 6-PHASE TIMELINE:

**Phase 1: Happy Family (0:00-0:10)**
- Kai + father longboard, Ana dreads barbershop, RD cake
- Text: 'Nekoč so bile barve resnične...'
- Lo-fi music + children's laughter
- Warm blur-to-clear effect

**Phase 2: The Bond (0:10-0:20)**
- Twins holding hands, MATCHING dreads (DNA!)
- Text: 'Imel sem njo. Imela sva vse.'
- Heartbeat SFX (gentle, 80 BPM)
- CLEAREST shot (0 blur - most important!)

**Phase 3: The Collapse (0:20-0:35)**
- Virus X-Noir spread, zombie silhouettes, chaos
- Text: 'Potem je prišel X-Noir. In svet se je zlomil.'
- Punk rock + sirens + screams
- Heavy glitch, red/green saturation

**Phase 4: The Loss (0:35-0:45)**
- Parents becoming transparent (ghost foreshadow!)
- Text: 'Starša sta postala senci... Ana je izginila v temi.'
- Distortion sound, sudden silence
- Parents fade to 30% opacity

**Phase 5: Passage of Time (0:45-0:55) **
- FAST MONTAGE: Aging system showcase!
- Young Kai → Adult Kai (beard) → Elder Kai (grey dreads)
- References: /assets/references/aging_system/
- Text: 'Leta so postala megla. Obraz se je spremenil... cilj nikoli.'
- Noir synth + ticking clock
- CRITICAL: Shows Generational Aging!

**Phase 6: Amnesia Wake-Up (0:55-1:00)**
- Maximum blur → Bedroom focus → Gronk voice
- Text: 'Kdo sem? ... Kje je Ana?'
- Gronk: 'No, končno si buden.'
- VHS filter fades out
- Transition to gameplay

🎮 SKIP OPTION:
- Trigger: After 5 seconds
- Display: '[Hold X to face reality]'
- Skip to gameplay instantly

💻 COMPLETE JAVASCRIPT IMPLEMENTATION:

**Version A (60s) - Full Code:**
- 6 phase functions
- VHS overlay system
- Skip controls (X or ESC)
- Aging montage (Phase 5 - CRITICAL!)
- Effects: blur transitions, glitch, color override
- Audio: 6 different tracks/SFX
- Complete showShot() method

**Version B (30-45s) - Fast Cut Version:**
- 3 phase functions (already in doc)
- ADHD energy with rapid cuts
- Simpler implementation

📊 COMPARISON:

**Version A (60s):**
- Pro: Aging system showcase, emotional depth
- Pro: Cinematic pacing, gradual build
- Con: Longer (60s), more assets needed
- Best for: Final release, story emphasis

**Version B (30-45s):**
- Pro: Fast impact, less assets
- Pro: ADHD-friendly energy
- Con: No aging showcase
- Best for: Demo, rapid testing

🎨 NEW SLOVENIAN TEXT:

Document now 900+ lines with both complete timelines! 🎆
2026-01-10 04:33:59 +01:00

29 KiB

🎬 INTRO SEQUENCE - DESIGN DOCUMENT

"From Colors to Darkness" - Kai's Amnesia Awakening

Created: January 10, 2026, 04:21 CET
Duration: 30-45 seconds
Purpose: Emotional setup for entire game narrative
Style: Style 32 Dark-Chibi Noir with fast cuts (ADHD energy)


🎯 CORE CONCEPT: "SPOMIN vs. REALNOST"

The Temelj (Foundation):

  • Kai & Ana: Twin siblings, separated in chaos
  • DNA Link: Pink/green dreadlocks (genetic connection)
  • Virus "X-Noir": Spreads through tech and blood → creates "Ombiji" (Zombies)
  • Amnesia: Kai survived basement attack but forgot everything except ONE image: Ana

Emotional Arc:

"We had colors" → "Then came darkness" → "I'm alone with hole in head" → "Must find her... even if takes whole life"


📋 TIMELINE OPTIONS

Two versions available:

  1. Version A (60 seconds): 6-phase focused timeline with aging emphasis
  2. Version B (30-45 seconds): 3-phase fast-cut ADHD energy version

Choose based on production time and narrative goals.


⏱️ VERSION A: 60-SECOND TIMELINE (6 Phases)

Total Duration: 1:00 (60 seconds)
Focus: Aging system showcase, gradual emotional build
Style: Cinematic, measured pacing

PHASE 1: HAPPY FAMILY (0:00 - 0:10)

Visual Content:

  • Kai and father on longboard (ocean pier, sunny)
  • Ana at barbershop getting dreads styled
  • RD birthday cake celebration
  • Images warm but slightly blurred (nostalgic)

Text (Typewriter):

"Nekoč so bile barve resnične..."
(Once colors were real...)

Audio:

  • Calm lo-fi melody
  • Children's laughter in background
  • Light, nostalgic vibe
  • Volume: 0.4

Effects:

  • Slight blur (nostalgic memory)
  • Warm color grading
  • VHS grain texture
  • Soft crossfades

PHASE 2: THE BOND (0:10 - 0:20)

Visual Content:

  • Kai and Ana as children holding hands
  • Focus on MATCHING pink/green dreadlocks (DNA proof)
  • Twin connection clearly visible
  • Clearest shot in intro (most important memory)

Text (Typewriter):

"Imel sem njo. Imela sva vse."
(I had her. We had everything.)

Audio:

  • Gentle heartbeat appears in background
  • Lo-fi melody continues
  • Emotional, warm
  • Volume: 0.5

Effects:

  • Less blur (clearer memory)
  • Focus on matching features
  • Soft glow around twins
  • VHS texture maintained

PHASE 3: THE COLLAPSE (0:20 - 0:35)

Visual Content:

  • Images become RED/NEON GREEN (toxic)
  • Zombie silhouettes appearing
  • Virus under microscope (X-Noir visualization)
  • Chaos in streets (panic, running)
  • Heavy glitch effects

Text (Typewriter):

"Potem je prišel X-Noir. In svet se je zlomil."
(Then came X-Noir. And the world broke.)

Audio:

  • Fast punk-rock music kicks in
  • Sirens and screams layered
  • Chaos soundscape
  • Volume: 0.7 → 1.0

Effects:

  • VHS glitch intensifies
  • RGB color separation
  • Scanline corruption
  • Red/green saturation +80%

PHASE 4: THE LOSS (0:35 - 0:45)

Visual Content:

  • Parents becoming transparent (foreshadowing ghosts)
  • Father and mother fading into shadows
  • Kai alone in basement (survival)
  • Ana being taken away (military/scientists)

Text (Typewriter):

"Starša sta postala senci... Ana je izginila v temi."
(Parents became shadows... Ana disappeared into darkness.)

Audio:

  • Distortion (corrupted sound)
  • Sudden silence after chaos
  • Single heartbeat (Kai's survival)
  • Volume: 0.3 (quiet, intimate)

Effects:

  • Parents fade to 30% opacity
  • Heavy blur on Ana separation
  • Screen darkens
  • VHS corruption peaks

PHASE 5: PASSAGE OF TIME (0:45 - 0:55)

Visual Content:

  • FAST MONTAGE: Kai aging through life stages
  • Reference: /assets/references/aging_system/
    • Young Kai (current)
    • Adult Kai (35, beard appears, dreads tied)
    • Elder Kai (50+, grey dreads, punk grandpa)
  • Beard growing longer
  • Dreadlocks getting longer, then grey
  • Fast cuts (2-3 seconds per age)

Text (Typewriter):

"Leta so postala megla. Obraz se je spremenil... cilj nikoli."
(Years became fog. Face changed... goal never.)

Audio:

  • Deep noir synth (dark bass)
  • Time-passing sound effect
  • Ticking clock (subtle)
  • Volume: 0.6

Effects:

  • Time-lapse blur
  • Rapid crossfades
  • Aging progression clear
  • Grey color grading increases

CRITICAL: This phase showcases the Generational Aging System!


PHASE 6: AMNESIA WAKE-UP (0:55 - 1:00)

Visual Content:

  • Everything goes MAXIMUM BLUR (amnesia effect)
  • Kai opens eyes in GameScene bedroom
  • Bedroom slowly comes into focus
  • Gronk's silhouette in doorway with vape smoke

Text (Typewriter):

"Kdo sem? ... Kje je Ana?"
(Who am I? ... Where is Ana?)

Final Audio:

  • Vape sound effect (Gronk)
  • Gronk voice: "No, končno si buden." (Well, finally awake.)
  • [AI_VOICE:gronk:custom]

Audio:

  • Silence, then breathing
  • Heartbeat normalizing
  • Vape hiss (Gronk)
  • Volume: 0.3

Effects:

  • Gaussian blur: 20 → 0 (over 3 seconds)
  • Bedroom fades in
  • VHS filter fades out
  • Transition to gameplay

SKIP OPTION:

Trigger: After 5 seconds Display: Small corner text

[Hold X to face reality]
  • Skips entire intro
  • Direct to gameplay
  • Saves intro completion flag

🎬 VERSION B: 30-45 SECOND TIMELINE (3 Phases)

Total Duration: 30-45 seconds
Focus: Fast cuts, ADHD energy, immediate impact
Style: Aggressive, punk aesthetic

**PHASE 1: HAPPY FAMILY MEMORIES (15 seconds)

PHASE 1: HAPPY FAMILY MEMORIES (15 seconds)

Visual Style:

  • Fast cuts (ADHD energy - 3-5s per shot)
  • Blur-to-sharp effect (memories clarifying)
  • Bright neon colors (magenta/cyan rim lighting)
  • VHS grain texture (nostalgic)
  • Style 32 chibi characters

Shots (5 total, ~3s each):

Shot 1 (0-3s): Longboard with Father

  • Reference: /assets/references/aging_system/otac_punk_father.png
  • Scene: Ocean pier, sunny day
  • Action: Father teaching Kai to skate
  • Father's hand on Kai's shoulder: "Pojdi, sin!" (Go, son!)
  • Blur clears when father smiles

Shot 2 (3-6s): Dreadlocks at Barbershop

  • Scene: Barbershop mirror
  • Action: Stylist adding PINK streak to green dreads
  • Kai's excited smile in reflection
  • Ana visible in background getting similar style
  • Blur clears on mirror reflection

Shot 3 (6-9s): Twin Moment with Ana

  • Reference: /assets/references/aging_system/mlada_ana_twin_prisoner.png (but happy, not prisoner)
  • Scene: University lab (Ana's workspace)
  • Action: Both laughing, Ana showing science project
  • CLEAREST shot (most important memory)
  • No blur - this is what Kai holds onto

Shot 4 (9-12s): Birthday Celebration

  • Scene: Home garden/party
  • Action: Cake with candles, family together
  • Mother and Father present (alive, happy)
  • Reference: Both parents from /assets/references/aging_system/
  • Warm colors, joy

Shot 5 (12-15s): Family Portrait

  • Scene: Professional photo setup or casual selfie
  • Action: All four smiling (Father, Mother, Kai, Ana)
  • Perfect family moment
  • Freeze frame for 2 seconds
  • This is "what was lost"

Text Overlay (Typewriter Effect):

"Nekoč smo imeli barve..."
(We once had colors...)

Audio:

  • Music: Light, happy indie/lo-fi (slightly grainy)
  • SFX: Children's laughter, ocean waves, city hum
  • Heartbeat: Subtle, steady (background)
  • Volume: 0.4

PHASE 2: THE COLLAPSE (15 seconds)

Visual Style:

  • Images start GLITCHING (digital corruption)
  • Colors become INTENSE (saturated reds, toxic greens)
  • VHS scanlines multiply
  • Blur increases (memory breaking)
  • Style 32 Noir kicks in (dark atmospheric)

Shots (4 total, faster cuts ~4s each):

Shot 1 (15-19s): Virus Spread

  • Visual: Green fluorescent particles spreading
  • Digital HUD showing infection progress
  • "X-Noir Virus: Outbreak Detected"
  • Neon green toxic glow
  • Screen glitches heavily

Shot 2 (19-23s): Ombiji Appear

  • Silhouettes of zombies (Style 32 shadows)
  • Red eyes glowing in darkness
  • Crowd of normal people transforms
  • Panic, screaming (visual chaos)
  • Fast strobe cuts

Shot 3 (23-27s): Parents Fight/Flee

  • Reference: /assets/references/aging_system/otac_punk_father.png and mati_punk_mother.png
  • Scene: Parents protecting twins
  • Father with longboard as weapon
  • Mother pulling kids to safety
  • Blur effect HEAVY (Kai can't process)
  • Red atmospheric lighting

Shot 4 (27-30s): Separation

  • Ana being pulled away (military/scientists)
  • Kai reaching for her (slow motion)
  • Screen goes RED
  • VHS glitch corrupts everything
  • Final frame: Ana's face disappearing into static

Text Overlay (Typewriter Effect):

"Potem je prišla tema..."
(Then came the darkness...)

Audio:

  • Music: Fast, aggressive punk rock (distorted)
  • SFX: Sirens, screams, gunshots, chaos
  • Heartbeat: Rapid, panicked (120 BPM)
  • Volume: 0.7 → 1.0 (building tension)

PHASE 3: AMNESIA WAKE-UP (5-10 seconds)

Visual Style:

  • COMPLETE BLUR (nothing clear)
  • Screen goes dark (fade to black)
  • Slow fade up to Kai's bedroom
  • Kai visible but confused, disoriented
  • Camera shake (grogginess)

Shots:

Shot 1 (30-33s): Pure Blur/Darkness

  • Black screen with faint VHS scanlines
  • Heartbeat gets slower
  • Breathing sounds (Kai waking)

Shot 2 (33-37s): Kai's Bedroom (Current Day)

  • Reference: Young Kai base sprite
  • Scene: Dark bedroom, morning light coming in
  • Kai sitting up in bed, confused
  • Hand on head (amnesia headache)
  • Room details: posters, longboard, minimal

Shot 3 (37-40s): Memory Fragment Flash

  • Quick flash of Ana's face (twin memory)
  • Only thing Kai remembers clearly
  • Purple skin version (memory distortion)
  • Reference: /assets/references/main_characters/ana/master_reference_nobg.png

Shot 4 (40-45s): Gronk's Voice

  • Audio only OR Gronk sprite appears in doorway
  • Gronk's silhouette with vape smoke
  • "Spet si zaspal, stari... upam, da si sanjal o mojem vapiu."
  • (You overslept again, man... hope you dreamed about my vape.)

Text Overlay (Typewriter Effect):

"In ostal sem sam... z luknjo v glavi."
(And I remained alone... with a hole in my head.)

Final Text (Typewriter Effect):

"Moram jo najti. Tudi če mi vzame celo življenje."
(I must find her. Even if it takes my whole life.)

Audio:

  • Music: Slow, dark ambient (ethereal)
  • SFX: Heavy breathing, heartbeat slowing (80 BPM → 60 BPM)
  • Gronk's Voice: [AI_VOICE:gronk:custom] with vape background sound
  • Volume: 0.3 (quiet, intimate)

🎮 SPECIAL EDITION NOTIFICATION (5 seconds - Optional)

Trigger: If player is buyer #1-20 OR streamer mode detected

Visual:

┌─────────────────────────────────────────┐
│  ⭐ SPECIAL EDITION ACTIVATED! ⭐       │
│                                         │
│  Gronk Helper Mode: UNLOCKED            │
│  (Exclusive for Founder #XX)            │
│                                         │
│  Press [G] to summon Gronk companion!   │
└─────────────────────────────────────────┘

Style:

  • Neon magenta/cyan border
  • Pulsing glow animation
  • 5-second display
  • Skip on any key
  • Gronk chibi sprite appears briefly

Audio:

  • Special unlock chime (vape sound effect)
  • Gronk: "Gronk help! Pink is best!"

📝 TYPEWRITER TEXT SCRIPT (Complete)

Phase 1 (Happy Memories):

"Nekoč smo imeli barve..."

Phase 2 (The Collapse):

"Potem je prišla tema..."

Phase 3 (Amnesia Wake-Up):

"In ostal sem sam... z luknjo v glavi."

"Moram jo najti. Tudi če mi vzame celo življenje."

Typewriter Settings:

  • Speed: 50ms per character (ADHD-friendly - not too slow!)
  • Sound: Subtle typewriter click (0.1 volume)
  • Skip: Any key press
  • Color: White with neon cyan shadow

🎨 VISUAL EFFECTS SPECIFICATIONS

Blur Effect:

// Phase 1: Blur-to-Clear (memories clarifying)
blurStrength: 10  0 (over 2 seconds per shot)
ease: 'Power2.easeOut'

// Phase 2: Clear-to-Blur (memories breaking)
blurStrength: 0  15 (over 3 seconds)
ease: 'Power2.easeIn'

// Phase 3: Maximum Blur (amnesia)
blurStrength: 20 (total darkness)

VHS Glitch Effect:

// Phase 1: Light grain
scanlineIntensity: 0.2
glitchFrequency: 0 (no glitches yet)

// Phase 2: Heavy corruption
scanlineIntensity: 0.7
glitchFrequency: 2.0 (glitch every 500ms)
colorShift: true (RGB separation)

// Phase 3: Minimal
scanlineIntensity: 0.1

Color Grading:

// Phase 1: Happy/Warm
saturation: 1.2
brightness: 1.1
temperature: 'warm' (orange tint)

// Phase 2: Intense/Toxic
saturation: 1.5
brightness: 1.0
reds: +50% (danger)
greens: +70% (virus)

// Phase 3: Desaturated/Cold
saturation: 0.6
brightness: 0.8
temperature: 'cold' (blue tint)

🔊 AUDIO TIMELINE

0-15s (Happy Memories):

  • Track: Light indie/lo-fi music
  • Tempo: 100 BPM
  • Mood: Nostalgic, warm
  • Volume: 0.4

15-30s (The Collapse):

  • Track: Fast punk rock (distorted)
  • Tempo: 180 BPM
  • Mood: Chaos, panic
  • Volume: 0.7 → 1.0 (crescendo)
  • SFX: Layered chaos (sirens, screams, gunfire)

30-45s (Amnesia Wake-Up):

  • Track: Dark ambient (drone)
  • Tempo: N/A (atmospheric)
  • Mood: Confused, lonely
  • Volume: 0.3
  • SFX: Heartbeat (60 BPM), breathing, Gronk's voice

Transitions:

  • Crossfade duration: 1 second
  • No silence gaps (seamless flow)

📂 REFERENCE ASSETS REQUIRED

Images (Happy Memories):

  • Otac (alive): otac_punk_father.png
  • Mati (alive): mati_punk_mother.png
  • Mlada Ana (happy version): Generate from mlada_ana_twin_prisoner.png but smiling
  • Young Kai: /assets/references/main_characters/kai/master_reference_nobg.png

Images (The Collapse):

  • Zombie silhouettes: Generate Style 32 shadow zombies
  • Virus particles: Generate neon green toxic effect
  • Parents fighting: Action poses from alive references

Images (Amnesia):

  • Kai bedroom: Generate dark bedroom scene
  • Ana memory flash: master_reference_nobg.png (purple version - memory distortion)
  • Gronk silhouette: /assets/references/npcs/gronk/ (if exists)

Audio:

  • Happy music: Find CC0 indie/lo-fi track
  • Punk rock: High-energy distorted track
  • Ambient: Dark drone atmosphere
  • SFX: Kenney.nl packs, Freesound.org
  • Gronk voice: Edge-TTS generated

💻 IMPLEMENTATION GUIDE FOR AGENT

IntroScene.js Structure (Version A - 60 seconds):

class IntroScene extends Phaser.Scene {
    constructor() {
        super({ key: 'IntroScene' });
        this.skipEnabled = false;
        this.currentPhase = 0;
    }
    
    create() {
        // Initialize systems
        this.typewriterSystem = new DynamicTypewriterSystem(this);
        this.audioSystem = new HIPOAudioSystem(this);
        
        // VHS overlay (entire intro)
        this.vhsFilter = this.cameras.main.setPostPipeline('VHSScanlineShader');
        
        // Enable skip after 5 seconds
        this.time.delayedCall(5000, () => {
            this.skipEnabled = true;
            this.showSkipPrompt();
        });
        
        // Input handlers
        this.setupSkipControls();
        
        // Start intro
        this.playPhase1HappyFamily();
    }
    
    playPhase1HappyFamily() {
        // 0:00 - 0:10 (10 seconds)
        this.currentPhase = 1;
        
        // Typewriter text
        this.typewriterSystem.displayText(
            "Nekoč so bile barve resnične...",
            0.5  // delay 0.5s
        );
        
        // Audio
        this.audioSystem.playMusic('intro_happy_lofi', {volume: 0.4, loop: false});
        this.audioSystem.playSFX('children_laughter', {volume: 0.2, loop: true});
        
        // Visual shots
        this.showShot('otac_longboard', 0, 3000, {
            blur: {start: 10, end: 5},
            colorGrade: 'warm'
        });
        
        this.showShot('ana_barbershop_dreads', 3000, 6000, {
            blur: {start: 8, end: 3},
            colorGrade: 'warm'
        });
        
        this.showShot('birthday_cake_rd', 6000, 10000, {
            blur: {start: 5, end: 2},
            colorGrade: 'warm',
            vhsIntensity: 0.2
        });
        
        // Transition to Phase 2
        this.time.delayedCall(10000, () => this.playPhase2TheBond());
    }
    
    playPhase2TheBond() {
        // 0:10 - 0:20 (10 seconds)
        this.currentPhase = 2;
        
        // Typewriter text
        this.typewriterSystem.displayText(
            "Imel sem njo. Imela sva vse.",
            0.5
        );
        
        // Heartbeat SFX
        this.audioSystem.playSFX('heartbeat_gentle', {volume: 0.3, loop: true, bpm: 80});
        
        // CLEAREST shot (most important)
        this.showShot('kai_ana_twins_holding_hands', 10000, 20000, {
            blur: {start: 0, end: 0},  // NO BLUR - crystal clear!
            glow: 'soft',  // Soft glow around twins
            focus: ['kai_dreads', 'ana_dreads'],  // Highlight matching DNA
            vhsIntensity: 0.15
        });
        
        // Transition to Phase 3
        this.time.delayedCall(20000, () => this.playPhase3TheCollapse());
    }
    
    playPhase3TheCollapse() {
        // 0:20 - 0:35 (15 seconds)
        this.currentPhase = 3;
        
        // Typewriter text
        this.typewriterSystem.displayText(
            "Potem je prišel X-Noir. In svet se je zlomil.",
            0.5
        );
        
        // Audio SHIFT
        this.audioSystem.stopSFX('children_laughter');
        this.audioSystem.stopSFX('heartbeat_gentle');
        this.audioSystem.fadeOutMusic(1000);
        
        this.time.delayedCall(1000, () => {
            this.audioSystem.playMusic('intro_punk_chaos', {volume: 0.7, fadeIn: 500});
            this.audioSystem.playSFX('sirens_chaos', {volume: 0.6, loop: true});
            this.audioSystem.playSFX('screams_distant', {volume: 0.4});
        });
        
        // Visual chaos
        this.showShot('virus_xnoir_spread', 20000, 23000, {
            colorOverride: {green: +70%, saturation: 1.5},
            glitch: 'heavy',
            vhsIntensity: 0.7
        });
        
        this.showShot('zombie_silhouettes_panic', 23000, 27000, {
            colorOverride: {red: +50%},
            glitch: 'extreme',
            strobe: true,
            rgbSeparation: true
        });
        
        this.showShot('chaos_streets', 27000, 32000, {
            blur: {start: 5, end: 15},
            colorOverride: {red: +80%},
            shake: true
        });
        
        this.showShot('ana_taken_away', 32000, 35000, {
            blur: {start: 15, end: 20},
            glitch: 'corruption',
            fade: 'red'
        });
        
        // Transition to Phase 4
        this.time.delayedCall(35000, () => this.playPhase4TheLoss());
    }
    
    playPhase4TheLoss() {
        // 0:35 - 0:45 (10 seconds)
        this.currentPhase = 4;
        
        // Typewriter text
        this.typewriterSystem.displayText(
            "Starša sta postala senci... Ana je izginila v temi.",
            0.5
        );
        
        // Audio SHIFT - sudden silence
        this.audioSystem.stopAll();
        this.time.delayedCall(1000, () => {
            this.audioSystem.playSFX('heartbeat_single', {volume: 0.4, bpm: 60});
            this.audioSystem.playMusic('intro_distortion', {volume: 0.3});
        });
        
        // Parents fading
        this.showShot('parents_becoming_ghosts', 35000, 40000, {
            opacity: {start: 100%, end: 30%},  // Foreshadowing!
            blur: {start: 10, end: 15},
            vhsIntensity: 0.9
        });
        
        this.showShot('kai_alone_basement', 40000, 45000, {
            darken: 80%,
            blur: {start: 15, end: 18},
            vhsIntensity: 1.0  // Maximum corruption
        });
        
        // Transition to Phase 5 (AGING!)
        this.time.delayedCall(45000, () => this.playPhase5PassageOfTime());
    }
    
    playPhase5PassageOfTime() {
        // 0:45 - 0:55 (10 seconds)
        // CRITICAL: Showcases Generational Aging System!
        this.currentPhase = 5;
        
        // Typewriter text
        this.typewriterSystem.displayText(
            "Leta so postala megla. Obraz se je spremenil... cilj nikoli.",
            0.5
        );
        
        // Audio
        this.audioSystem.stopAll();
        this.audioSystem.playMusic('intro_noir_synth', {volume: 0.6});
        this.audioSystem.playSFX('clock_ticking', {volume: 0.2, loop: true});
        this.audioSystem.playSFX('time_passing_whoosh', {volume: 0.3});
        
        // FAST MONTAGE - AGING STAGES
        // Young Kai (current)
        this.showShot('kai_young_current', 45000, 48000, {
            blur: {start: 5, end: 3},
            timelapse: true
        });
        
        // Adult Kai (35) - beard, tied dreads
        this.showShot('kai_adult_35_beard', 48000, 51000, {
            blur: {start: 5, end: 3},
            timelapse: true,
            reference: '/assets/references/aging_system/adult_kai_family_man.png'
        });
        
        // Elder Kai (50+) - grey dreads, punk grandpa
        this.showShot('kai_elder_punk_grandpa', 51000, 55000, {
            blur: {start: 5, end: 8},
            timelapse: true,
            colorGrade: 'grey',  // More grey as aging
            reference: '/assets/references/aging_system/elder_kai_punk_grandpa.png'
        });
        
        // Transition to Phase 6 (Wake up!)
        this.time.delayedCall(55000, () => this.playPhase6AmnesiaWakeUp());
    }
    
    playPhase6AmnesiaWakeUp() {
        // 0:55 - 1:00 (5 seconds)
        this.currentPhase = 6;
        
        // Typewriter text
        this.typewriterSystem.displayText(
            "Kdo sem? ... Kje je Ana?",
            0.5
        );
        
        // Audio
        this.audioSystem.stopAll();
        this.time.delayedCall(500, () => {
            this.audioSystem.playSFX('breathing_heavy', {volume: 0.3});
            this.audioSystem.playSFX('heartbeat_normalizing', {volume: 0.2, bpm: 60});
        });
        
        // MAXIMUM BLUR → Clear
        this.cameras.main.fadeOut(1000, 0, 0, 0);
        
        this.time.delayedCall(1500, () => {
            // Fade in bedroom
            this.cameras.main.fadeIn(2000);
            this.showShot('kai_bedroom_wakeup', 56500, 60000, {
                blur: {start: 20, end: 0},  // Amnesia clearing
                vhsFade: true  // VHS filter fades out
            });
            
            // Gronk voice
            this.time.delayedCall(58000, () => {
                this.audioSystem.playSFX('vape_hiss', {volume: 0.4});
                this.audioSystem.playDialogue(
                    "[AI_VOICE:gronk:custom] No, končno si buden.",
                    'gronk'
                );
            });
            
            // Transition to GameScene
            this.time.delayedCall(60000, () => {
                this.scene.start('GameScene');
            });
        });
    }
    
    setupSkipControls() {
        // Hold X to skip
        this.input.keyboard.on('keydown-X', () => {
            if (this.skipEnabled) {
                this.skipIntro();
            }
        });
        
        // ESC also skips
        this.input.keyboard.on('keydown-ESC', () => {
            if (this.skipEnabled) {
                this.skipIntro();
            }
        });
    }
    
    showSkipPrompt() {
        const skipText = this.add.text(
            20, 20,
            '[Hold X to face reality]',
            {
                fontFamily: 'Courier New',
                fontSize: '16px',
                color: '#ffffff',
                stroke: '#000000',
                strokeThickness: 2
            }
        );
        skipText.setAlpha(0);
        
        this.tweens.add({
            targets: skipText,
            alpha: 0.7,
            duration: 1000,
            yoyo: true,
            repeat: -1
        });
    }
    
    skipIntro() {
        console.log('⏩ Intro skipped!');
        this.audioSystem.stopAll();
        this.scene.start('GameScene');
    }
    
    showShot(imageKey, startTime, endTime, effects = {}) {
        this.time.delayedCall(startTime, () => {
            // Load and display image
            const shot = this.add.image(
                this.cameras.main.width / 2,
                this.cameras.main.height / 2,
                imageKey
            );
            
            // Apply effects
            if (effects.blur) {
                this.applyBlurTransition(shot, effects.blur, endTime - startTime);
            }
            if (effects.glitch) {
                this.applyGlitchEffect(shot, effects.glitch);
            }
            if (effects.colorOverride) {
                this.applyColorGrading(shot, effects.colorOverride);
            }
            if (effects.opacity) {
                this.applyOpacityTransition(shot, effects.opacity, endTime - startTime);
            }
            
            // Remove shot when done
            this.time.delayedCall(endTime, () => {
                shot.destroy();
            });
        });
    }
}

IntroScene.js Structure (Version B - 30-45 seconds):

class IntroScene extends Phaser.Scene {
    create() {
        // Initialize systems
        this.typewriterSystem = new DynamicTypewriterSystem(this);
        this.audioSystem = new HIPOAudioSystem(this);
        
        // Play sequence
        this.playPhase1HappyMemories();
    }
    
    playPhase1HappyMemories() {
        // Duration: 15 seconds
        // 5 shots, 3s each
        // Blur-to-clear effect
        // Typewriter text: "Nekoč smo imeli barve..."
        
        this.showShot('otac_longboard', 0, 3000, {blur: {start: 10, end: 0}});
        this.showShot('dreads_barbershop', 3000, 6000, {blur: {start: 10, end: 0}});
        this.showShot('ana_twin_moment', 6000, 9000, {blur: {start: 0, end: 0}}); // Clearest
        this.showShot('birthday_party', 9000, 12000, {blur: {start: 5, end: 0}});
        this.showShot('family_portrait', 12000, 15000, {blur: {start: 5, end: 0}, freeze: 2000});
        
        this.time.delayedCall(15000, () => this.playPhase2Collapse());
    }
    
    playPhase2Collapse() {
        // Duration: 15 seconds
        // 4 shots, faster cuts
        // Glitch effect intensifies
        // Typewriter text: "Potem je prišla tema..."
        
        this.showShot('virus_spread', 15000, 19000, {glitch: 'heavy', green: +70%});
        this.showShot('ombiji_appear', 19000, 23000, {glitch: 'extreme', strobe: true});
        this.showShot('parents_fight', 23000, 27000, {blur: 15, red: +50%});
        this.showShot('ana_separation', 27000, 30000, {glitch: 'corruption', red: 100%});
        
        this.time.delayedCall(30000, () => this.playPhase3Amnesia());
    }
    
    playPhase3Amnesia() {
        // Duration: 10 seconds
        // Blur → Kai's room → Memory flash → Gronk
        // Typewriter text: "In ostal sem sam..."
        
        this.cameras.main.fadeOut(2000, 0, 0, 0);
        this.time.delayedCall(3000, () => {
            this.cameras.main.fadeIn(2000);
            this.showShot('kai_bedroom', 33000, 37000, {blur: 5});
            this.showShot('ana_memory_flash', 37000, 38000, {flash: true});
            this.playGronkVoice(40000);
            
            this.time.delayedCall(45000, () => {
                if (this.checkSpecialEdition()) {
                    this.showSpecialEditionNotif();
                } else {
                    this.scene.start('GameScene');
                }
            });
        });
    }
    
    checkSpecialEdition() {
        // Check buyer ID or streamer mode
        return (buyerID <= 20 || streamerMode);
    }
}

🎯 KEY DESIGN PRINCIPLES

1. ADHD Energy (Fast Cuts):

  • No shot longer than 5 seconds
  • Rapid transitions keep attention
  • Skip button ALWAYS available
  • Visual variety prevents boredom

2. Emotional Impact:

  • Happy → Sad = Maximum contrast
  • Clear memory (Ana) = Quest motivation
  • Parents sacrifice = Depth
  • Amnesia = Player relatability

3. Story Clarity:

  • 3 text overlays tell complete story
  • Visual storytelling (no exposition dump)
  • Mystery preserved (what happened to Ana?)
  • Motivation clear (find her!)

4. Style Consistency:

  • All Style 32 Dark-Chibi Noir
  • Neon magenta/cyan throughout
  • VHS aesthetic (memory theme)
  • Thick outlines maintained

📊 TECHNICAL REQUIREMENTS

Assets Needed:

  • 15+ reference images (some need generation)
  • 3 music tracks (happy/punk/ambient)
  • 20+ SFX (layered chaos)
  • 1 AI voice (Gronk)
  • Typewriter font (monospace)

Phaser Effects:

  • Blur PostFX
  • VHS Scanline shader (custom)
  • Color grading pipeline
  • Fade transitions
  • Glitch effect (RGB separation)

Performance:

  • All images preloaded
  • Audio streaming (not preloaded)
  • Effects optimized for 60 FPS
  • Skip function instant (no delay)

🚀 NEXT STEPS FOR IMPLEMENTATION

  1. Generate Missing Assets:

    • Happy Ana (smiling version)
    • Zombie silhouettes
    • Virus particle effect
    • Kai's bedroom
  2. Create IntroScene.js:

    • Phase system
    • Timeline management
    • Effect controllers
  3. Test Sequence:

    • Verify timing (30-45s total)
    • Check skip functionality
    • Audio sync
    • Special Edition trigger
  4. Polish:

    • Blur curves smooth
    • Glitch timing Perfect
    • Music transitions seamless
    • Text readable

Document Status: Complete Design
Ready For: Agent Implementation
Next Phase: Asset Generation → IntroScene Coding

Created by: David "HIPO" Kotnik
Hipodevil666 Studios™
"From colors to darkness - Kai's journey begins" 🎬🛹💜