← BACK TO LOGS
SYSTEM: ONLINE

THE S33K3R TRANSMISSION - DEVLOG

Part 4: The Cinematic Pivot

Continued from devlog03.md

PART VIII: THE CINEMATIC PIVOT 🎬

[December 10th, 2025] [10:08 AM MT] (10:08:50 AM MT)

Major Refactor: Pivot from Point-and-Click to Cinematic Narrative Engine

A fundamental architectural shift. Sometimes you build something and realize it's not quite right. The point-and-click felt static, disconnected. I wanted something more visceral. The game moved from a traditional point-and-click adventure to an FMV (Full Motion Video) style choose-your-own-adventure system. This wasn't just a feature add—it was a complete reimagining of how players would experience THE S33K3R universe. A risk, yes. But the right one.

New Architecture:

  • Type System (src/types/game.ts): Strict TypeScript definitions for RoomNode, ChoiceCard, and WorldConfig
  • CinematicEngine Component (src/components/CinematicEngine.tsx): Three-layer rendering system (background image → transition video → interactive cards)
  • Seamless Transitions: Videos with preload="auto" ensure instant playback when cards are clicked
  • Frame-Perfect Magic: Last frame of transition video matches destination room's static image (no visible cuts)

Sample World Created:

  • 5 rooms configured: Bank, Bank Vault, Saloon, Sheriff's Office, Hotel
  • Each room has 3 choice cards with narrative descriptions
  • Nested navigation supported (Bank → Vault demonstrates sub-room access)
  • Header navigation for main rooms (hard-cut, no video)
  • Card choices trigger cinematic POV transitions

Visual Design:

  • Weathered tarot/data-pad style cards with dark backgrounds
  • Amber borders with glow effects on hover
  • Corner decorations for retro-futuristic aesthetic
  • Smooth fade animations and scale transforms

Asset Pipeline Established:

  • /public/rooms/ directory structured with naming conventions
  • Comprehensive guide created (ASSETS_README.md) for video/image requirements
  • Critical alignment documented: first frame = source room, last frame = destination room

The experience transformed from clicking hotspots to making narrative choices that trigger immersive first-person transitions. This is now a true Cinematic Decision Engine.

[December 10th, 2025] [10:08 AM MT] (10:08:50 AM MT)

Feature Lock: Implement "Coming Soon December 12th" Restriction

With the Cinematic Engine built, the strategic decision was made to lock it behind a launch date. Players would see the system but couldn't interact until December 12th, 2025.

Implementation:

  • Header Replacement: Room navigation buttons replaced with animated "COMING SOON: DECEMBER 12TH" message
  • Error Indicator: Red pulsing alert icon pointing to disabled "ROOMS [LOCKED]" button
  • Full Lock Overlay: Semi-transparent backdrop with centered lock icon, "ACCESS RESTRICTED" message, and unlock date
  • Engine Preview: Background visible at 30% opacity with blur effect—players can see what's coming but can't interact
  • Disabled Prop: CinematicEngine now accepts disabled={true} to prevent all card clicks and transitions

Visual Polish:

  • Animated pulse effects on "Coming Soon" text and error icon
  • Red theme for locked state (vs amber for active state)
  • Large lock icon with amber accents maintaining S33K3R aesthetic
  • Clear unlock date display: "DECEMBER 12TH, 2025"

Purpose: Build anticipation. Let players see the sophistication of what's coming, but hold back the full experience until the reveal date. The EARTIX continues—December 12th becomes a key date in the narrative.

[December 10th, 2025] [10:28 AM MT] (10:28:56 AM MT)

Deployment Config: Enable Static Export for Cloudflare Pages

With the Cinematic Engine locked and ready, deployment infrastructure needed optimization. Next.js configuration was updated to support static export for Cloudflare Pages deployment.

Configuration Changes (next.config.mjs):

  • Static Export Mode: Set output: 'export' to generate fully static HTML/CSS/JS
  • Image Optimization: Set images: { unoptimized: true } to prevent Image component build errors in static mode
  • Cloudflare Compatibility: Static export ensures seamless deployment to Cloudflare Pages without serverless requirements

Why Static Export?

  • No server-side rendering needed for this EARTIX experience
  • Faster page loads (pre-rendered at build time)
  • CDN-friendly (Cloudflare's edge network delivers static assets globally)
  • Perfect for the locked Cinematic Engine (no dynamic server logic until December 12th unlock)

The transmission is now optimized for global distribution. December 12th will arrive at the same instant across all time zones.

REFLECTION

From a mysterious transmission on November 29th to a fully-featured EARTIX experience with hidden puzzles, easter eggs, immersive audiovisual effects, and now a locked Cinematic Narrative Engine awaiting its December 12th debut—this project has been a journey of creative iteration, problem-solving, and user experience refinement.

Each commit represented a decision, a fix, or a new feature. Some commits were moments of inspiration (the CRT TV, the easter eggs, the Cinematic Engine pivot). Others were technical pragmatism (video compression, autoplay fixes, TypeScript migration, feature locks, deployment optimization). Together, they built something that feels alive—a transmission from an alternate reality, waiting to be deciphered.

The S33K3R TRANSMISSION is live. The puzzle is solvable. The secrets are hidden but discoverable. The Cinematic Narrative Engine is visible but locked. And the countdown to December 12th has begun.

What happens on December 12th, 2025?

The rooms unlock. The choices become real. The narrative branches.

That's for the players to find out.

Continued in devlog05.md