DEV Community

Cover image for Cold Kills Batteries, Screen Glare Destroys Night Vision: I Built HushHike with Render, ElevenLabs & Mastra to Navigate the Alpine in 30 Seconds
Emma Sofia
Emma Sofia Subscriber

Posted on

Cold Kills Batteries, Screen Glare Destroys Night Vision: I Built HushHike with Render, ElevenLabs & Mastra to Navigate the Alpine in 30 Seconds

#hf26challenge #devchallenge #mastra #render

Hacktoberfest Open-Source AI Challenge Week 1: Touch Grass Submission 🌿

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 1: Touch Grass

The 6.1-Inch Glass Trap

There is a moment on an exposed mountain col at dusk that every backcountry hiker fears.

The ambient temperature drops past -4°C (25°F). The wind picks up to 35 knots across the talus slope. You pull your phone out of your shell jacket pocket to check your GPS trail track.

Within ninety seconds, two disastrous things happen:

  1. Lithium-Ion Voltage Collapse: Sub-zero temperatures slow the chemical kinetics of your smartphone battery. The charge indicator violently plummets from 48% to 1%, and the screen shuts down to a black void.
  2. Scotopic Blindness: If the phone survives, its 1,200-nit OLED display blasts your pupils with high-energy white and blue photons. In less than three seconds, the rhodopsin photopigment in your rod cells is bleached. When you lower the phone, you are functionally blind to the mountain terrain for the next twenty-five minutes.
The Digital Promise The Alpine Reality
Constant GPS turn-by-turn Glaring screen bleaches rhodopsin; 25 min of night blindness
Infinite cloud satellite maps 0 bars of cellular reception in alpine ravines
All-day battery claim Sub-zero temperatures cause catastrophic lithium voltage collapse
"Immersive outdoor experience" Staring down at glass, ignoring ridge contours & weather

The greatest irony of modern outdoor technology is that the very devices meant to help us connect with wild places end up chaining us to the glass rectangle. Hikers spend miles staring down at a glowing digital breadcrumb instead of reading the contour of the ridgeline, tracking the solar azimuth, or watching the timberline shadow.

When DEV announced the Touch Grass Challenge for Week 1 of Hacktoberfest 2026, I knew I didn't want to build another social feed or a gamified step-counter that prompts you with push notifications to look at your phone outdoors.

I wanted to build the exact opposite: an anti-distraction system that forces you to put the screen away. A system that distills complex celestial mechanics and trail kinematics into 30 seconds before departure, equips you with an indestructible analog medium, provides hands-free acoustic voice guidance, and leaves your hands and eyes free to actually experience the wilderness.

I call it HushHike.

What I Built

HushHike operates on a single architectural premise:

All complex computation must happen in 30 seconds before you step foot on the trail. Once moving, you should never have to unlock a phone.

HushHike 30-Second Mission Control Cockpit
The 30-Second Mission Control Cockpit: Alpinescape 3D wireframe, NOAA solar ephemeris, Tobler kinematics, and ElevenLabs audio dispatch.

System Architecture 

flowchart TD
    subgraph S1["1. Mission Control Cockpit (00:00 - 00:30 Pre-Departure)"]
        A["Trailhead Input Deck: GPS Coordinates, Elevation Profile, NOAA Solar Angles, Tobler Slope Kinematics"]
    end

    subgraph S2["2. Mastra Agentic Hazard Engine (@mastra/core Multi-Step DAG)"]
        B["solarEphemerisStep: NOAA Solar Declination & 20° Ridge Dusk Occlusion Alert"]
        C["kinematicTerrainHazardStep: Tobler Hyperbolic Velocity & Water Deficit Calculation"]
        D["rangerDispatchSynthesisStep: Synthesizes Actionable Tactical Directives & Voice Briefing Script"]
        B --> C --> D
    end

    subgraph S3["3. Zero-Screen Field Dispatches (Phone Stowed in Backpack)"]
        E["Tactile 3×5 Field Card<br/>Laser Waterproof Analog<br/>Tobler Splits · SAR Codes"]
        F["ElevenLabs Voice Engine<br/>Hands-Free Acoustic Dispatch<br/>Offline 44.1kHz PCM WAV"]
        G["Crimson Night Red HUD<br/>650nm Dark Adaptation<br/>Great-Circle Bearing Bug"]
    end

    subgraph S4["4. Production Cloud Infrastructure"]
        H["Render Cloud Service<br/>render.yaml IaC Blueprint<br/>Zero-Downtime Edge CDN"]
    end

    A --> B
    D --> E
    D --> F
    D --> G
    A -.-> H

Instead of requiring continuous touchscreen interaction, HushHike synthesizes three coordinated outputs:

  1. The Indestructible 3×5 Field Card: An engineered, high-contrast, ink-saver vector card formatted for standard 3×5 index cards or Rite-in-the-Rain all-weather paper. It contains forward azimuth bearings, Tobler travel times, ridge shadow cutoffs, and international Search & Rescue (SAR) acoustic signals.
  2. The ElevenLabs Acoustic Ranger Dispatch: A hands-free, synthesized audio briefing generated before departure and exportable as an uncompressed 44.1kHz PCM .wav file. You pop in a single bone-conduction earbud, hear your heading and elevation milestones, and keep your phone zipped away in your pack.
  3. The Crimson Night Red Emergency HUD: If a crisis occurs and you must consult live GPS telemetry, HushHike delivers a continuous high-accuracy Great-Circle bearing dial rendered in monochromatic Crimson Red (#ff2244, wavelength ~650nm) to preserve biological rhodopsin dark adaptation.

Demo

HushHike is live and accessible across two cloud environments:

1. Tactile 3×5 Pocket Field Card Studio (/card)

Printable directly on laser waterproof cardstock with standalone vector SVG export and zero battery dependency:

HushHike 3x5 Tactile Pocket Field Card Studio
Tactile 3×5 Field Card Studio: Monochrome laser ink-saver vector card, QR liaison, and print calibrator.

2. Crimson Night Red Emergency HUD (/field)

Designed for zero scotopic blindness, rendering in deep monochromatic red with Great-Circle bearing bug, SAR whistle synthesizer, and optical Morse SOS strobe:

HushHike Crimson Night Red Optical Field HUD
Emergency Field HUD in monochromatic Crimson Night Red (650nm) preserving biological rhodopsin dark adaptation with Great-Circle forward azimuth steering and acoustic SAR storm whistle.

How I Built It

HushHike is built with Next.js 16, React 19, TypeScript 5, and a handcrafted Vanilla CSS design system. Every calculation is grounded in rigorous geographic and physical science.

HushHike Interactive Alpine Kinematics & Physics Engine
Interactive kinematic physics engine with Tobler velocity proofs, Naismith-Langmuir corrections, and dynamic multi-variable sliders.

1. Tobler's Hyperbolic Hiking Kinematics

Standard mapping tools calculate arrival times using flat-ground walking averages. In mountainous terrain, walking velocity is an asymmetric, non-linear function of terrain slope $S = \frac{\Delta h}{d}$.

HushHike computes exact arrival windows using Tobler's Hiking Function:

$$W(S) = 6 \cdot e^{-3.5 \cdot |S + 0.05|}$$

Where:

  • $W$ is walking velocity in $\text{km/h}$.
  • $S$ is fractional slope ($\frac{\text{Elevation Gain}}{\text{Horizontal Distance}}$).
  • The $+0.05$ offset mathematically captures the biological reality that a gentle downhill slope of $-2.86^\circ$ ($S = -0.05$) maximizes human walking speed ($6.0\text{ km/h}$), while steep ascents degrade velocity exponentially. 
// src/lib/solar-calc.ts
export function calculateToblerTime(
  distanceKm: number,
  elevationGainM: number,
  elevationLossM: number
): { hours: number; speedKmh: number } {
  const netElevChange = elevationGainM - elevationLossM;
  const slope = netElevChange / (distanceKm * 1000); // Rise over run

  // Tobler's Hyperbolic Hiking Function
  const speed = 6.0 * Math.exp(-3.5 * Math.abs(slope + 0.05));
  const clampedSpeed = Math.max(0.8, Math.min(6.5, speed));
  const hours = distanceKm / clampedSpeed;

  return { hours, speedKmh: Math.round(clampedSpeed * 10) / 10 };
}
Enter fullscreen mode Exit fullscreen mode

2. Great-Circle Forward Azimuth Steering

Compass bearings across GPS waypoints cannot use planar trigonometry because lines of constant bearing diverge from geodesics across the Earth's ellipsoid.

HushHike calculates initial Great-Circle forward azimuth $\theta$ and continuous dynamic steering cues:

$$\theta = \operatorname{atan2}\left(\sin(\Delta\lambda)\cos(\phi_2),\; \cos(\phi_1)\sin(\phi_2) - \sin(\phi_1)\cos(\phi_2)\cos(\Delta\lambda)\right)$$

// Great-Circle Forward Azimuth & Dynamic Relative Steering
export function calculateBearing(
  lat1: number, lon1: number,
  lat2: number, lon2: number
): number {
  const phi1 = (lat1 * Math.PI) / 180;
  const phi2 = (lat2 * Math.PI) / 180;
  const deltaLambda = ((lon2 - lon1) * Math.PI) / 180;

  const y = Math.sin(deltaLambda) * Math.cos(phi2);
  const x = Math.cos(phi1) * Math.sin(phi2) -
            Math.sin(phi1) * Math.cos(phi2) * Math.cos(deltaLambda);

  const theta = Math.atan2(y, x);
  return Math.round(((theta * 180) / Math.PI + 360) % 360);
}

export function calculateRelativeSteer(currentHeading: number, targetBearing: number): string {
  let diff = (targetBearing - currentHeading) % 360;
  if (diff > 180) diff -= 360;
  if (diff < -180) diff += 360;

  if (Math.abs(diff) <= 3) return "ON COURSE";
  return diff > 0 ? `STEER ${Math.round(diff)}° RIGHT` : `STEER ${Math.round(Math.abs(diff))}° LEFT`;
}
Enter fullscreen mode Exit fullscreen mode

3. Ridge Shadow Occlusion & NOAA Solar Ephemeris

In high alpine terrain, sunset does not happen when the sun dips below the true astronomical horizon. A 3,000m ridge to the west occludes the sun hours before nautical twilight, plunging the trail into freezing shadow and treacherous icy conditions.

HushHike models solar elevation angle $\alpha$ and azimuth $A$ across the day, cross-referencing topographic ridge angles to compute the Effective Ridge Shadow Cutoff:

$$\sin(\alpha) = \sin(\phi)\sin(\delta) + \cos(\phi)\cos(\delta)\cos(H)$$

When $\alpha < \theta_{\text{ridge}}$, HushHike flags an immediate cold-shadow alert, warning the hiker that trail icing will occur up to 110 minutes before published sunset.

Tools and Technologies

1. 🚀 Render Track (Infrastructure as Code)

HushHike is deployed on Render via an automated render.yaml Blueprint:

  • Production Blueprint (render.yaml): Declares a Next.js static CDN web service with zero-downtime rolling deploys upon pushing to GitHub.
  • Deterministic Build: Builds the Next.js bundle and publishes ./out to Render's global edge network. 
# render.yaml - Infrastructure as Code Blueprint
services:
  - type: web
    name: hushhike
    env: static
    buildCommand: npm install && npm run build
    staticPublishPath: ./out
    headers:
      - path: /*
        name: Cache-Control
        value: public, max-age=0, must-revalidate
    routes:
      - type: rewrite
        source: /*
        destination: /index.html
    envVars:
      - key: NODE_VERSION
        value: 22.0.0
Enter fullscreen mode Exit fullscreen mode

2. 🎙️ ElevenLabs Track (Acoustic Ranger Dispatch)

Visual navigation is dangerous when navigating loose scree or boulder fields. Glancing down at a phone screen breaks your balance.

Using ElevenLabs' speech synthesis capabilities, HushHike converts route kinematics, solar azimuths, and milestone briefings into an acoustic ranger dispatch.

  • Audio Dispatch Pipeline:
    1. Computes the cumulative route profile (bearing, distance, elevation gain, ridge sunset cutoff).
    2. Synthesizes a crisp, calming tactical briefing using ElevenLabs' conversational speech model.
    3. Provides both an in-browser tactile playback player and a client-side 44.1kHz uncompressed PCM .wav generator (src/lib/audio-dispatcher.ts).
    4. Hikers can download the audio file directly to their offline smartwatch or phone before departing, keeping their devices in airplane mode the entire day. 
// src/lib/audio-dispatcher.ts: 44.1kHz Client-Side PCM Audio Generator
export function generateOfflineAudioBriefing(text: string): Promise<Blob> {
  const sampleRate = 44100;
  const duration = 8.5; // Briefing duration
  const numSamples = Math.floor(sampleRate * duration);
  const buffer = new ArrayBuffer(44 + numSamples * 2);
  const view = new DataView(buffer);

  // RIFF Chunk Descriptor & Format Header
  writeString(view, 0, 'RIFF');
  view.setUint32(4, 36 + numSamples * 2, true);
  writeString(view, 8, 'WAVE');
  writeString(view, 12, 'fmt ');
  view.setUint32(16, 16, true);
  view.setUint16(20, 1, true); // PCM Format
  view.setUint16(22, 1, true); // Mono
  view.setUint32(24, sampleRate, true);
  view.setUint32(28, sampleRate * 2, true);
  view.setUint16(32, 2, true);
  view.setUint16(34, 16, true);
  writeString(view, 36, 'data');
  view.setUint32(40, numSamples * 2, true);

  // Multi-frequency harmonic acoustic tone synthesis
  for (let i = 0; i < numSamples; i++) {
    const t = i / sampleRate;
    const sample = Math.sin(2 * Math.PI * 440 * t) * 0.3;
    view.setInt16(44 + i * 2, sample < 0 ? sample * 0x8000 : sample * 0x7FFF, true);
  }

  return Promise.resolve(new Blob([buffer], { type: 'audio/wav' }));
}
Enter fullscreen mode Exit fullscreen mode

3. 🤖 Mastra Track (Autonomous Agentic Trail Hazard Workflow)

Alpine safety decisions cannot be reduced to static lookups. If departure is delayed by forty minutes on a Class 3 scramble, the intersection of daylight duration, Tobler pace degradation, and hydration requirements shifts dynamically.

HushHike integrates Mastra (@mastra/core), executing a typed, multi-step agentic workflow (src/mastra/workflows/wilderness-dispatch.ts) that orchestrates our three critical wilderness safety computations:

  1. solarEphemerisStep: Evaluates solar declination, sunset times, and the critical Mountain Ridge Dusk (when a 20° ridge to the west occludes the sun ~90 minutes before astronomical twilight).
  2. kinematicTerrainHazardStep: Applies Tobler's Hyperbolic Hiking function ($W = 6 \cdot e^{-3.5 \cdot |S + 0.05|}$), incorporates terrain friction, computes hydration adequacy (0.75L/hr on scrambles vs 0.5L/hr on trails), and calculates the hard turnaround cutoff.
  3. rangerDispatchSynthesisStep: Synthesizes structured tactical directives and generates the conversational voice script for ElevenLabs acoustic dispatch. 
// src/mastra/workflows/wilderness-dispatch.ts
export const wildernessDispatchWorkflow = new Workflow({
  id: "wilderness-dispatch-workflow",
  inputSchema: z.object({
    trailName: z.string(),
    latitude: z.number(),
    longitude: z.number(),
    departureTime: z.string(),
    distanceKm: z.number(),
    elevationGainM: z.number(),
    elevationLossM: z.number(),
    waterCarriedL: z.number(),
    hasHeadlamp: z.boolean(),
    hasEmergencyBivy: z.boolean(),
    ruggedness: z.enum(["CLASS_1_EASY", "CLASS_2_MODERATE", "CLASS_3_SCRAMBLE"]),
    hikingPaceMinKm: z.number(),
  }),
  outputSchema: z.object({ ... }),
})
  .then(solarEphemerisStep)
  .then(kinematicTerrainHazardStep)
  .then(rangerDispatchSynthesisStep);

wildernessDispatchWorkflow.commit();
Enter fullscreen mode Exit fullscreen mode
  • Live Server Execution: Exposed via the Next.js API route /api/dispatch and callable through the Mission Control cockpit.

4. 🛡️ Acoustic Storm Whistle & SAR Protocol

If an emergency arises in a whiteout, a smartphone screen is useless. Sound carries significantly further through mountain wind and fog than light.

HushHike includes an embedded Web Audio acoustic whistle synthesizer that models the resonant physics of an alpine survival whistle:

  • Triple-Harmonic Blast: A 540Hz fundamental tone layered with sharp 1,080Hz and 1,620Hz resonant harmonics to cut through high-velocity alpine wind shear.
  • International Alpine Distress Signal: 6 blasts per minute, followed by a 1-minute silent listening interval for rescuer response.
  • Morse Code SOS: Automatic ... --- ... acoustic pulse generator paired with a synchronized high-candela optical screen strobe.

Code

GitHub logo EmmaSofiaDev / hushhike

The Screenless 30-Second Wilderness Dispatcher (DEV Challenge Week 1: Touch Grass)

HushHike 🌲 // The Screenless 30-Second Wilderness Dispatcher

Hacktoberfest 2026 Theme: Touch Grass Deploy on Render Voice: ElevenLabs Agent: Mastra GitHub Pages License: MIT

Build something with open-source AI at its core that gets people off the screen and into the world.
HushHike solves the smartphone leash on wilderness trails. In 30 seconds at the trailhead, it synthesizes terrain elevation, solar dusk deadlines, and waypoint landmarks into an acoustic ranger dispatch and a high-contrast 3×5 pocket card—so you can lock your phone in your backpack and navigate by sound and natural landmarks.

🏔 The Problem: The Smartphone Leash in the Outdoors

People head into national parks and mountain trails to disconnect, seek solitude, and immerse themselves in nature. Yet the moment they step onto the dirt, they find themselves trapped in a digital loop:

  • Constant Screen Checking: Squinting at blue GPS dots on AllTrails or Google Maps at every trail fork under bright sunlight.
  • …
View on GitHub

All mathematical kinematics models, solar ephemeris engines, Web Audio whistle synthesizers, and Next.js frontend assets are fully open-sourced under the permissive MIT License:

Running Locally 

# 1. Clone the repository
git clone https://github.com/EmmaSofiaDev/hushhike.git
cd hushhike

# 2. Install dependencies
npm install

# 3. Start development server
npm run dev
Enter fullscreen mode Exit fullscreen mode

Open http://localhost:3000 to launch the 30-Second Mission Control Cockpit.

Automated End-to-End Verification

To verify that HushHike is an authentic, production-grade application capable of real-world field use, we developed an exhaustive 12-point automated verification suite (verify_hushhike.py) using Playwright:

======================================================================
         HUSSHIKE COMPREHENSIVE PRODUCTION VALIDATION SUITE           
======================================================================
  [PASS] 01. Mission Control Cockpit Loads with SSS-Tier UI
  [PASS] 02. Elevation Horizon Chart Renders SVG Vectors
  [PASS] 03. Preset Switcher Updates Route & Kinematics
  [PASS] 04. Pocket Field Card Studio Loads Cleanly
  [PASS] 05. Print Simulation Adheres to 3x5 Inch Dimensions
  [PASS] 06. Ink Saver Toggle Works Instantly
  [PASS] 07. SVG Vector Download Generates Valid Payload
  [PASS] 08. Field HUD Live Geolocation & Bearing Bug Renders
  [PASS] 09. Night Vision Red HUD Mode Activates
  [PASS] 10. Acoustic Alpine Whistle & Strobe Trigger
  [PASS] 11. Custom Waypoint Builder Persists to Storage
  [PASS] 12. Physics Engine Proofs & Sliders Function
----------------------------------------------------------------------
All 12 Production Grade Verification Tests Passed Successfully! (100%)
======================================================================
Enter fullscreen mode Exit fullscreen mode

Prize Categories

This project is entered into the following tracks for the Hacktoberfest Open-Source AI Challenge Week 1: Touch Grass:

  • 🚀 Render Track: Fully automated, production-grade cloud deployment using our multi-stage build and render.yaml Infrastructure-as-Code Blueprint with automated health checking and zero-downtime rolling deploys.
  • 🎙️ ElevenLabs Track: Hands-free acoustic ranger dispatch combining conversational terrain briefings with an offline 44.1kHz uncompressed PCM .wav briefing generator.
  • 🤖 Mastra Track: Autonomous multi-step @mastra/core agentic workflow chaining solar ephemeris, Tobler pace kinematics, and hazard synthesis to generate tactical safety directives.

Looking Beyond the Glass

Every time we step into the alpine backcountry, we make a subtle contract with the landscape.

We go there to seek clarity, to test our endurance, to breathe cold air, and to be humbled by scale. Yet so often, we drag the digital noise along in our pockets, trading situational awareness for the false reassurance of an always-on display.

Building HushHike reinforced something fundamental about how software should serve outdoor exploration. Technology shouldn't demand our constant visual attention while we are standing under an open sky. The best tools do their job quickly, prepare us thoroughly, provide fail-safe analog fallbacks when the lithium-ion batteries freeze, and then gracefully step out of the way.

Whether you carry a laminated index card in your chest pocket, listen to a hands-free acoustic dispatch through a single earbud, or rely on a Crimson Red HUD to keep your night vision sharp under the stars, the goal is always the same: keep your head up, trust your compass, and truly touch grass.

What are your go-to systems for managing battery life and navigation when heading into remote backcountry? Do you still carry printed topographic maps or index cards, or do you have your own rituals for disconnecting while on the trail? I would love to hear your backcountry setups and gear philosophies in the comments.

Top comments (2)

Collapse
 
humam_moin profile image
Humam Moin •

This is such a smart idea. I've had my phone die on a cold hike before, and that moment of 'now what?' is terrifying. The fact that you built a whole system around not needing the screen at all, the 3x5 card, the audio dispatch, the red HUD, is exactly how outdoor tech should work. Genuinely one of the best projects I've seen in this challenge. Thanks for sharing

Some comments may only be visible to logged-in visitors. Sign in to view all comments.