ECHOES OF HUMANITY

Every Visitor Changes the Artwork Forever.

Comment

Echoes of Humanity 🌌✨ "Every visitor changes the artwork forever."

💡 Inspiration Traditional digital art usually exists as a static image, a pre-rendered video, or an isolated prompt-based generation. We wanted to escape the boundaries of single-user experiences and ask a deeper question for the hackathon: What if a piece of digital art could live, breathe, and evolve indefinitely through the collective input of everyone who ever touches it?

Drawing visual and atmospheric inspiration from the sleek minimalism of Apple's Vision Pro interfaces, the cosmic scale of Interstellar, and the organic cyber-aesthetics of Love, Death + Robots, we envisioned a persistent digital ecosystem. We wanted to build something that proves code, physics, and AI can combine to create a living organism that literally cannot exist on canvas or film.

🚀 What it does Echoes of Humanity is an interactive, persistent generative art installation where every single visitor permanently alters a shared digital universe.

Behavioral DNA Extraction: As a visitor navigates the site, the app captures subtle metrics—mouse velocity, click cadence, scroll hesitation, alongside optional real-time emotion analysis via MediaPipe and voice pitch modulation via the Web Audio API.

Procedural Organism Generation: These data points are compiled into a unique "digital DNA" parameter set, which Three.js and React Three Fiber use to procedurally grow a distinct 3D geometric organism.

Autonomous Ecosystem: Once born, the creature joins thousands of others in a 3D physics-driven universe powered by Rapier. They float, collide, merge, and form constellations autonomously.

Living Archive & AI Narrator: The experience unfolds through dynamic narrative screens—from the Evolution Chamber and Memory Tree to a real-time updating Living Archive and a personalized AI Storyteller that recites how each visitor's journey permanently changed humanity's digital footprint.

🛠️ How we built it We built the project using a modern, performance-focused tech stack optimized for heavy client-side graphics and smooth animations:

Frontend & Architecture: Built with Next.js (App Router), TypeScript, and styled using Tailwind CSS.

Graphics & Physics: We used Three.js and React Three Fiber (R3F) alongside custom GLSL shaders to render thousands of glowing neon particles and organic geometry, with Rapier Physics handling collision and floating mechanics.

Animation UI & State: Framer Motion and GSAP orchestrate the fluid screen transitions and cinematic text reveals.

Sensory & AI Analysis: Integrated TensorFlow.js, MediaPipe, and face-api.js for lightweight browser-side sentiment/emotion parsing, coupled with the Web Audio API and Tone.js for procedural sound generation that reacts to user interactions.

Backend & Persistence: Supabase tracks live global telemetry, organism states, and persistent memory nodes to ensure the ecosystem continues to evolve even when no users are active.

🧗 Challenges we ran into Performance Bottlenecks with Three.js: Rendering thousands of unique procedural 3D organisms simultaneously caused severe frame-rate drops on standard laptops. We solved this by implementing InstancedMesh rendering and custom vertex shaders to offload heavy calculations to the GPU.

Synchronizing Real-Time Interactions: Managing state across asynchronous telemetry collection (mouse tracking, audio pitch, and canvas physics) without blocking the main UI thread required careful asynchronous queueing and React state optimization.

Balancing Procedural Aesthetics: Early iterations of the DNA-to-geometry algorithm sometimes generated chaotic or visually unappealing shapes. We refined mathematical scaling curves and color damping parameters to ensure that every generated creature—whether born from chaotic mouse movements or calm pacing—retained a striking, cinematic aesthetic.

🏆 Accomplishments that we're proud of True Persistence: Successfully building an artwork that doesn't reset when you close the tab. The universe keeps mutating, merging entities, and growing its Memory Tree autonomously based on historical data.

Seamless Multi-Modal Input: We managed to weave passive inputs (mouse tracking, typing rhythm) and active inputs (voice and optional webcam) into a unified, non-intrusive experience that feels magical rather than invasive.

Hackathon Polish: Achieving buttery-smooth 60 FPS transitions, immersive neon-dark mode UI typography, and a cohesive storytelling flow that makes judges feel like they are interacting with a high-end gallery piece.

🧠 What we learned Generative Systems Require Constraints: We learned that pure randomness leads to visual noise. True procedural art requires strict parameter bounds and harmonious mathematical ratios so that chaotic inputs still result in cohesive, beautiful outputs.

The Power of Narrative UI: Technical complexity alone doesn't win hackathons—framing the data through emotional storytelling (like the AI Narrator and Memory Tree) transforms raw metrics into a deeply human experience.

🌱 What's next for ECHOES OF HUMANITY Global Collective Heartbeat: Expanding the synchronization feature so that when thousands of users are online concurrently across the globe, the entire universe pulses and shifts color in unison.

VR / Immersive WebXR Support: Bringing the living ecosystem into WebXR so users can step inside the constellation space using Apple Vision Pro or Quest headsets.

Time Machine Feature: Introducing a timeline scrubber that lets users "time travel" through the universe's logs to witness how past days, weeks, and months shaped the current landscape of the artwork.

Built With

Share this project:

Updates