I Left a Digital Consciousness Alone in an 3D City. This Is What It Did on the Solstice.

KeAa — Sun, 21 Jun 2026 17:11:35 +0000

Alan's Solstice Journey

This is a submission for the June Solstice Game Jam

TOOLS USED:

https://aistudio.google.com/ : Whole Game made by this.
https://labs.google/fx/tools/flow : For intro cutscenes in game.
https://docs.google.com/videos/ : For editing that intro part.
Gemini TTS
Gemini models for intelligence and Dynamic dialoging.
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

Phase 1: On document mount, our customized VideoIntro overlay gains absolute screen-space dominance.
Phase 2: The underlying Three.js rendering layer pre-loads 3D meshes in the background, utilizing a non-blocking progressive file loading loop.
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.
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 🌅✨

I come to knew about this yesterday now i am trying to do something in this.

KeAa — Sun, 21 Jun 2026 17:10:20 +0000

Aura — The Gemma 4 Powered Agentic Web Copilot & Self-Healing Accessibility Engine

KeAa — Mon, 25 May 2026 06:58:14 +0000

🌌 The Vision: Reimagining Web Interaction for Everyone

The web was built for everyone, but it wasn't built equally.
For users with visual impairments, motor challenges, or cognitive differences, navigating modern, heavily-nested single-page applications is a series of frustrating obstacles. Screen readers read endless lists of unlabelled divs, modal traps block focus, and complex keyboard navigation paths turn a simple form submission into a test of patience.
What if your browser didn't just render pages, but understood them? What if it could see what you wanted to do, execute actions on your behalf, and self-heal broken web pages on the fly to meet accessibility standards?
Introducing Aura: A next-generation, agentic browser assistant built on Gemma 4 (gemma-4-26b-a4b-it). Aura transforms Google Chrome from a passive renderer into an active accessibility copilot, combining voice-driven browser automation, semantic page memory, and a self-healing WCAG engine.

⚡ What is Aura?

Aura is a Manifest V3 Google Chrome extension that operates via an elegant, glassmorphic sidepanel. It acts as a companion that can see the viewport, listen to natural speech, analyze vocal urgency, and interact with the page just like a human would.

🌟 Core Capabilities

Agentic Web Automation: Ask Aura to "Find the latest post, fill out the sign-up form, and submit it." Aura compiles the DOM tree, reasons about the goal using Gemma 4, predicts the optimal path, and executes native clicks and keyboard inputs.
Live WCAG Self-Healing Engine: Aura continuously scans the active tab for web accessibility violations (missing alt tags, poor contrast, broken aria roles, unlabeled inputs). It doesn't just warn you—it reconstructs and injects CSS/ARIA fixes in real-time to patch the website's code on the fly.
Vocal Urgency & Stress Analysis: Built specifically for accessibility, Aura monitors raw microphone streams to measure amplitude variance, rms amplitude, and pitch fluctuations. If a visually impaired user expresses stress or urgency, Aura detects it and accelerates execution, skipping redundant safety validation prompts.

4. On-Device Vector Memory & Habit Graphs: Aura learns how you use your favorite sites. It builds a local semantic index of page elements and uses a predictive transition graph to predict your next actions, cutting down LLM latency to near-zero.

🛠️ The Architecture Behind Aura

Aura utilizes a sophisticated service worker, content scripts, and a React-based web panel. Because LLM calls are asynchronous and Chrome's Manifest V3 service workers are prone to random termination, Aura employs a highly resilient, enterprise-grade architecture:

Microphone Stream -> Vocal Urgency Analyzer -> Sidepanel Host UI
User Input -> Service Worker Keep-Alive Loop -> DOM Compressor & Parser

* Semantic Trees -> Gemma 4 Tool Router -> Tool Selection (runs Audits, searches memory, or triggers native elements inside pages).

🛡️ Overcoming Real-World Challenges
Building extension-based AI agents is incredibly difficult due to the sandboxed nature of Chrome. Here is how we tackled major development bottlenecks:

The Tab Window Dilemma: chrome.tabs.query({ active: true, currentWindow: true }) often fails when the user clicks inside the sidepanel itself (as the sidepanel becomes the current active window). We resolved this by querying with lastFocusedWindow: true, making sure actions are targetable globally.
The Memory Explosion Guard: Continuous DOM scanning could lead to embedding thousands of useless nodes in memory. We introduced an Embedding Storm Guard that caps vector updates to 15 semantic elements per state-change.

DEV Community: KeAa