✅ 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! 🎆
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:
- Version A (60 seconds): 6-phase focused timeline with aging emphasis
- 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.pngandmati_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.pngbut 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
-
Generate Missing Assets:
- Happy Ana (smiling version)
- Zombie silhouettes
- Virus particle effect
- Kai's bedroom
-
Create IntroScene.js:
- Phase system
- Timeline management
- Effect controllers
-
Test Sequence:
- Verify timing (30-45s total)
- Check skip functionality
- Audio sync
- Special Edition trigger
-
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" 🎬🛹💜