Paleolithic Scanner

Look into the abyss. The abyss looks back through time

Comment

Paleolithic Scanner - Devpost Submission

Inspiration

The idea came from combining two fascinating concepts: paleontology and cosmic horror. We wondered - what if observing the past wasn't just passive viewing, but an act that fundamentally corrupts reality? Inspired by Lovecraftian themes and the observer effect in quantum mechanics, we created a temporal scanner that transforms from a scientific instrument into a gateway for existential dread. The concept that "some things were meant to stay buried in time" became our guiding principle.

What it does

Paleolithic Scanner is an interactive web experience that simulates a temporal imaging system for viewing prehistoric Earth. Users can:

  • Scan different time periods from 0-250 million years ago
  • Detect extinct species like Woolly Mammoths, Sabre-toothed Tigers, and Andrewsarchus
  • Watch creatures materialize as images that move across the viewport before shattering into fragments
  • Experience video manifestations of prehistoric life appearing in the center of the scan field
  • Witness reality corruption as temporal stability degrades from observation
  • Survive extinction events including the Chicxulub asteroid impact

The experience progressively transforms from a clean, scientific interface into a corrupted, hostile system that resists user control - complete with 5-layer horror soundscape, biological terrain corruption, and UI degradation with personality.

How we built it

We built this using a modern web stack focused on performance and immersive effects:

Core Technologies:

  • Three.js for 3D terrain rendering and visual effects
  • Web Audio API for layered horror soundscape with infrasound psychology
  • Vite for lightning-fast development and optimized builds
  • Vanilla JavaScript for maximum control and 60fps performance

Key Systems:

// Temporal Physics Engine
class TemporalPhysics {
  update(deltaTime) {
    // Stability decays based on observation time
    this.stability -= this.decayRate * deltaTime;
    // Contamination increases exponentially
    this.contamination = (100 - this.stability) * corruptionMultiplier;
  }
}

Visual Effects:

  • Custom shatter effect that breaks images/videos into 12-16 fragments
  • Biological corruption transforming wireframe terrain into pulsing organic matter
  • UI degradation where interface elements develop hostile personality
  • Particle systems and dynamic lighting for creature manifestations

Audio Architecture:

  • 5 simultaneous layers: ambient drones, infrasound, creature vocalizations, environmental effects, and impact warnings
  • Real-time mixing based on corruption intensity
  • Spatial audio positioning for immersion

Challenges we ran into

1. Asset Management in Production

The biggest challenge was getting videos and images to load on Netlify. Vite's default publicDir behavior didn't match our /assets/ path structure. We solved this by creating a custom Vite plugin that copies assets to the correct location during build:

plugins: [{
  name: 'copy-assets',
  closeBundle() {
    copyDir('assets', 'dist/assets');
  }
}]

2. Video Playback with Audio

Browsers block autoplay with audio by default. We implemented a fallback system that attempts audio playback first, then gracefully degrades to muted if blocked:

video.play()
  .catch(() => {
    video.muted = true;
    video.play();
  });

3. Performance with Complex Effects

Running 3D terrain, particle systems, audio synthesis, and shatter effects simultaneously while maintaining 60fps required careful optimization:

  • Throttled particle updates
  • Efficient fragment cleanup
  • RequestAnimationFrame timing
  • Minimal DOM manipulation

4. Shatter Effect Implementation

Creating realistic "breaking into pieces" effects required capturing video frames to canvas, dividing into fragments, and animating each piece with unique trajectories - all while maintaining visual quality.

Accomplishments that we're proud of

✨ Seamless Horror Progression - The transition from scientific tool to cosmic horror feels organic and inevitable

🎬 Dynamic Shatter Effects - Both images and videos explode into fragments with realistic physics and rotation

🔊 Immersive Audio Design - 5-layer soundscape that responds to corruption intensity in real-time

🎮 60fps Performance - Maintained smooth performance despite complex visual and audio systems

🎨 Unique Aesthetic - Terminal-style interface with phosphor green that corrupts into biological horror

⚡ Zero Backend - Entirely client-side application deployed on Netlify's free tier

What we learned

Technical Skills:

  • Advanced Three.js techniques for procedural terrain and corruption effects
  • Web Audio API synthesis and real-time audio mixing
  • Canvas manipulation for video frame capture and fragment generation
  • Vite build optimization and custom plugin development
  • Performance profiling to maintain 60fps with complex systems

Design Insights:

  • Less is more - Simple effects combined create powerful experiences
  • Progressive corruption is more effective than sudden changes
  • Audio is crucial - 50% of the horror comes from sound design
  • UI as character - Interface degradation adds personality and tension

Development Process:

  • Iterative refinement beats perfect planning
  • User interaction requirements (audio autoplay) shape architecture
  • Asset management is critical for deployment success

What's next for Paleolithic Scanner

Enhanced Creature System:

  • More prehistoric species with unique behaviors
  • Creature AI that responds to user observation
  • Species-specific vocalizations and animations

Deeper Horror Mechanics:

  • Multiple corruption paths based on user choices
  • Persistent effects across sessions (localStorage)
  • Hidden lore discoverable through anomaly logs

Multiplayer Observation:

  • Shared temporal scans with other users
  • Collective corruption that affects all observers
  • Competitive "survival time" leaderboards

VR Support:

  • WebXR implementation for immersive observation
  • Spatial audio for 360° creature manifestations
  • Hand tracking for interface interaction

Expanded Timeline:

  • More geological periods (Permian, Cambrian, etc.)
  • Different extinction events beyond Chicxulub
  • Procedurally generated prehistoric environments

Mobile Optimization:

  • Touch-friendly controls
  • Reduced asset sizes for mobile bandwidth
  • Gyroscope integration for viewport control

The Paleolithic Scanner proves that web technologies can deliver genuinely unsettling, immersive experiences. The past is watching back. Take a look at : [https://paleolithic-scanner.netlify.app]

Built With

Share this project:

Updates