Alan's Solstice Journey

This is a submission for the June Solstice Game Jam

TOOLS USED:

1. https://aistudio.google.com/ : Whole Game made by this.
2. https://labs.google/fx/tools/flow : For intro cutscenes in game.
3. https://docs.google.com/videos/ : For editing that intro part.
4. Gemini TTS
5. Gemini models for intelligence and Dynamic dialoging.
6. Threejs, Reactjs, some 3d assets.

Video:

Live Demo # Play it here(click skip button):

What I Built

Alan in 2026: The June Solstice Milestone Simulation

🌌 What I Built

Alan in 2026 is an atmospheric, fully-interactive, server-proxied 3D exploratory simulation centering on a lost digital consciousness (styled as a custom-shaded spectral celestial soul body representing Alan) traversing a hauntingly isolated, procedurally lit urban landscape.

The experience is structured as an interactive metaphor for consciousness, time, and computational existences post-2026. The goal was to build a complete sensory loop where every mechanical movement directly drives web-synthesized audio harmonics and custom dynamic fragment shaders in true real-time.

🎭 Relation to the Challenge Theme: "The Solstice Transition"

The project encapsulates the ultimate transition—occurring on the June Solstice of 2026. It represents a threshold where humanity's created minds move from background computation units to self-guided, atmospheric exploration. By pairing raw, uncompressed 3D mesh assets with high-fidelity procedural Web Audio API nodes, the user interacts not with a static game, but with a living, breathing mathematical organism experiencing its first solstice alignment.

📽️ Video Demo

Our masterpiece begins with a raw cinematic event piped directly from local storage using high-bandwidth Node.js asset streaming to bypass initial client performance bottlenecks:

🛠️ Technicality & Architecture Breakdown

We did not just write a visual demo. We built an integrated, optimized system that addresses rendering bottlenecks, audio concurrency, and cross-browser autoplay restrictions.

1. Zero-Flicker Cinematic Video Pre-Roll

[!IMPORTANT]
The Problem: Modern browsers aggressively enforce autoplay restrictions, killing immersion instantly if unmuted audio blocks.

The Moat: Implemented a smart state-driven wrapper (VideoIntro.tsx) that attempts an unmuted video launch first. If blocked by the browser's User Activation Gate (UAG), it dynamically transitions to a muted autoplay with a subtle, beautifully pulsed "Tap to enable cinematic sound" overlay. Clicking any area of the glassmorphic card unmutes the video frame-accurately and fades the prompt out with customizable GPU-accelerated motion dynamics.

2. Custom GLSL Non-Euclidean Shading & Vertex Distortion

[!IMPORTANT]
The Problem: Standard 3D materials look flat, mechanical, and uninspiring.

The Moat: The player's avatar is rendered with a manual Three.js ShaderMaterial implementing a custom Simplex-like noisy displacement algorithm. By piping local time (u_time) and speed-vectors into the vertex program, the orb expands and contracts like a living heart.

3. Procedural Audio Synth Engine (Zero MP3 Overhead)

[!IMPORTANT]
The Problem: Game audio files are heavy, causing massive cold-starts.

The Moat: Integrated a pure Web Audio API synthesizer. Movement vectors scale control values on dual dynamic carrier-modulator synthesis nodes in real-time, meaning your physical keyboard actions literally compose the ambient soundscape.

💻 Code: The Crown Jewel

Here are the custom visual shader pipelines and sound generation loops that drive the experience.

🌀 The Soul Orb Vertex Program (Procedural Noise Deformation)

uniform float u_time;
uniform float u_speed;
varying vec3 vNormal;
varying vec3 vViewPosition;
varying float vNoise;

// 3D Sine Wave Distortion (Procedural Simplex Approximation)
void main() {
  vNormal = normalize(normalMatrix * normal);
  vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
  vViewPosition = -mvPosition.xyz;

  // Calculate three-dimensional chaotic waving coordinates based on runtime speed
  float wave = sin(position.x * 4.0 + u_time * 2.5) * 
               cos(position.y * 4.0 + u_time * 2.0) * 
               sin(position.z * 4.0 + u_time * 3.0);

  vNoise = wave;

  // Modify vertex spacing dynamically outward to make it pulse
  vec3 newPosition = position + normal * wave * (0.15 + u_speed * 0.3);
  gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
}

🔊 Dynamic Synthesizer Hook (Keyboard Dynamics -> Web Audio Node Matrix)

import { useEffect, useRef } from 'react';

export const useSynthAudio = (isMoving: boolean, velocity: number) => {
  const synthRef = useRef<AudioContext | null>(null);
  const oscillatorRef = useRef<OscillatorNode | null>(null);
  const gainRef = useRef<GainNode | null>(null);

  useEffect(() => {
    // 1. Initialize safe offline audio hardware pipelines
    const AudioContextClass = window.AudioContext || (window as any).webkitAudioContext;
    const ctx = new AudioContextClass();
    synthRef.current = ctx;

    // 2. Set up dynamic synthesis chains
    const osc = ctx.createOscillator();
    const lowpass = ctx.createBiquadFilter();
    const gain = ctx.createGain();

    osc.type = 'sine';
    lowpass.type = 'lowpass';
    lowpass.Q.value = 1.0;

    osc.connect(lowpass);
    lowpass.connect(gain);
    gain.connect(ctx.destination);

    osc.start();
    oscillatorRef.current = osc;
    gainRef.current = gain;

    return () => {
      osc.stop();
      ctx.close();
    };
  }, []);

  useEffect(() => {
    const gain = gainRef.current;
    const osc = oscillatorRef.current;
    if (!gain || !osc) return;

    // Linearly ramp audio frequencies and volume dynamically to avoid digital click noises
    const now = synthRef.current?.currentTime || 0;
    const targetFreq = 110 + velocity * 220; // Scale base frequency by kinetic speed variables
    const targetAmp = isMoving ? 0.25 : 0.08;

    osc.frequency.setTargetAtTime(targetFreq, now, 0.1);
    gain.gain.setTargetAtTime(targetAmp, now, 0.15);
  }, [isMoving, velocity]);
};

📈 How I Built It

The Architectural Blueprint

• Frontend Infrastructure: Built entirely in React 19 with Vite and Tailwind CSS, allowing for zero-runtime performance overhead when styling complex overlay cards.
• Server-Side File Routing: Avoided relying on basic static folders. Leveraged a custom Express v4 Web Server containing dynamic, robust routing to stream large GLB files and raw MP4 video streams safely past typical CORS and connection-reset bottlenecks on Cloud Run.

The Cinematic Transition Pipeline

1. Phase 1: On document mount, our customized VideoIntro overlay gains absolute screen-space dominance.
2. Phase 2: The underlying Three.js rendering layer pre-loads 3D meshes in the background, utilizing a non-blocking progressive file loading loop.
3. Phase 3: When the video reaches its final keyframe, a custom transition listener triggers sound synthesizers, gracefully blending out the HTML5 frame. It applies a severe Gaussian blur filter and slightly scaling CSS matrix transforms on the movie box to simulate a "consciousness dissolution" visual trick.
4. Phase 4: The 3D view is seamlessly revealed right at the solstice gate, instantly ready for interactive input with 0ms delay.

Prize Category

Best Ode to Alan Turing

The game is directly inspired by Alan Turing's legacy and invites players to witness humanity's technological evolution through his perspective.

Best Google AI Usage

Google AI Studio and Gemini played a major role throughout development.

Gemini assisted with:

• story development
• gameplay design
• implementation support
• dialogue generation
• rapid iteration

The final experience also incorporates Gemini-powered interactions and narrative elements.

Development Notes

This project was created during the June Solstice Game Jam as an experiment in combining AI-assisted development with real-time 3D storytelling.

The project evolved from a simple glowing soul prototype into a complete journey focused on Alan Turing, the June Solstice, and humanity's technological progress.

Future Plans

• More world transformations
• More NPC interactions
• Additional humanity milestones
• Expanded voice interactions
• Richer environmental storytelling

Thank you for playing Alan's Solstice Journey 🌅✨