🌲 NATUREQUEST

Step away from the screen. Explore what grows around you.

Autonomous on-device multimodal AI • Zero cloud telemetry • 100% offline-ready.

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

🌿 What I Built

Most modern technology is engineered to keep your eyes glued to a glass screen, draining your dopamine through endless feeds and notifications. NatureQuest is engineered to do the exact opposite: it uses artificial intelligence to actively kick you out into the woods, meadows, and parks.

NatureQuest is a 100% offline, privacy-first Botanical Operating System & Wild Flora Field Companion. It transforms nature walks into an immersive, grounded bio-expedition without requiring an internet connection or cellular signal.

NatureQuest Field Station Dashboard

🌱 Key Features That Get You Touching Grass

1. 🌿 Zen Screen-Dimming Mode (Anti-Doomscroll Protocol)

When you step onto the trail, activate Zen Mode. The screen dims by up to 90%, turning off bright animations and UI clutter so your focus immediately shifts to the rustling canopy, the smells of damp soil, and the physical environment around you.

2. 📸 15 Photo-Proof Wild Flora Milestones

Instead of mindless screen taps, you level up your Explorer Rank (from Sprout Observer to Legendary Bio-Detective) by going outside, tracking down real wild specimens—such as ancient oak bark, wild ferns, seed pods, or morning dew on leaves—and submitting photographic field evidence.

Species Milestones & Badges

3. 👂 Tactile & Auditory Sensory Quests

Multi-sensory challenges designed for mindful grounding:

  • Bark Texture Expedition: Feel and catalog the difference between furrowed and smooth tree bark.
  • Forest Sound Bath: Close your eyes and identify 3 distinct bird or insect calls in your local woods.
  • Canopy Sun Fleck Hunt: Look up through the branches to observe sunlight filtration and leaf geometry.

4. 🔊 Generative Procedural Forest Soundscape

Built on the Web Audio API using mathematical pink noise algorithms (Paul Kellet's filter), gentle rain oscillators, and dynamic wind synthesis. It creates relaxing, ambient auditory grounding without streaming any MP3s or burning mobile data.

5. 🌳 Interactive Botanical Cladogram & APG IV Tree of Life

Explore phylogenetic evolutionary branches from ancestral Bryophytes (mosses) to complex Angiosperms (flowering plants) and Conifers.

🎥 Demo

  • Interactive Showcase & Codebase: Clone and run locally in under 60 seconds with zero API keys required.

  • Offline Field Station Experience:

You can walk into a remote mountain forest with your laptop or portable device, turn on Airplane Mode, and have a complete AI botanist and natural field guide at your fingertips.

Plant Scout Botanical Vision Lens

Sensory Field Quests

💻 Code

The entire codebase is open-source under the MIT license:

🔗 GitHub Repository

https://github.com/omshree59/Hackto-Local-Gemma-Powered-Tree-Detective

🧰 Tech Stack

  • Local AI Engine: Ollama running Google Gemma 3 (4B Vision) with structured botanical prompts
  • Frontend: React 19 + Vite + Tailwind CSS v4
  • Motion & Visuals: Framer Motion (motion/react), React Bits (RotatingText, ElectricLogo, TrueFocus, Magnet)
  • Procedural Audio: Web Audio API (Paul Kellet filtered pink noise + biquad synthesis)
  • Local Persistence: Encrypted IndexedDB / localStorage (100% on-device, 0 telemetry)

🛠️ How I Built It

1. Local Open-Weights Inference with Gemma 3 4B

Traditional botanical apps send your photos, location coordinates, and timestamps to third-party cloud servers. In the backcountry, you rarely have cell reception anyway.

NatureQuest connects directly to Ollama running Google's open-weights Gemma 3 4B Vision model locally:

  • Base64 images are sent straight to http://localhost:11434/api/generate via an offline-resilient proxy.
  • A strict botanical system prompt enforces high-confidence morphological assessments: genus, family, diagnostic physical keys (leaf venation, bark texture, margin serration), and edible/medicinal warnings.
  • If Ollama is offline or warming up, an embedded botanical diagnostic fallback ensures you never get blocked in the field.

2. High-Performance Modern Interface

  • React 19 & Tailwind CSS v4: Responsive field station design optimized for both rugged laptop use in cabins and mobile tablet field scouting.
  • Custom React Bits Integrations: Dynamic sensory feedback using TrueFocus, RotatingText, and ElectricLogo with custom electric crackle and glowing effects.
  • Zero-Telemetry Local Storage: Every photo, quest milestone, and badge is preserved completely on the user's local device.

🌍 Why Does Open Innovation Matter?

Open innovation is the cornerstone of NatureQuest's entire existence for three critical reasons:

1. 🏕️ Backcountry Reliability (Nature Doesn't Have 5G)

Closed-source cloud AI APIs (OpenAI, Anthropic, proprietary clouds) require constant, high-bandwidth internet connections. The moment you step into a deep forest, a state park, or a mountain trail—the exact places where botanical identification is needed most—closed APIs fail. Open-weights models like Gemma 3 make local, off-grid AI possible.

2. 🔒 Absolute Privacy in Natural Habitats

Nature should be a sanctuary from tracking and surveillance capitalism. When users capture photos of their surroundings, outdoor sanctuaries, and local parks, that data should belong solely to them. With open weights and local software, zero bytes of imagery or location telemetry ever leave the machine.

3. 🌱 Democratization of Scientific Knowledge

Closed APIs gatekeep knowledge behind monthly subscriptions and per-token paywalls. Open models and open-source tools empower students, park rangers, naturalists, and curious kids worldwide to explore biodiversity freely without worrying about API bills.

🤖 My Agent Session

This project was developed, architected, and iterated pair-programming with the Antigravity AI agent. The complete development transcript, debugging steps (including procedural Web Audio synthesis and local vision wiring), and architectural discussions have been preserved on DEV:

NatureQuest: Offline Botanical OS & Hacktoberfest 2026 Innovations
You

<USER_REQUEST>

Integrate the <ParticleText /> component from React Bits

You are helping integrate an open-source React component into an existing application.

Component: ParticleText

Variant: JavaScript + Tailwind

Usage Example

import ParticleText from './ParticleText'; <div style={{ width: '100%', height: 360, background: '#09090f' }}> <ParticleText text="Launch Faster" particleSize={2} density={4} color="#ffffff" highlightColor="#8b5cf6" scatter={180} gatherDuration={1600} stagger={420} pointerRepel={40} repelRadius={120} idleDrift={0.7} trigger="hover" fontSize="clamp(3rem, 12vw, 8rem)" fontWeight={800} fontFamily="inherit" glow /> </div> 

Props

Prop Type Default Description
text string "React Bits" The words sampled into particle targets.
particleSize number 2 Rendered size of each particle in CSS pixels.
density number 4 Pixel sampling step for the offscreen glyph canvas. Lower values create more particles.
color string "#ffffff" Primary particle color.
highlightColor string "#8b5cf6" Secondary color blended through the particle field.
scatter number 180 How far particles begin from their final glyph targets.
gatherDuration number 1600 Milliseconds for particles to converge into the text.
stagger number 420 Maximum per-particle delay in milliseconds before gathering.
pointerRepel number 40 Strength of the cursor pushback.
repelRadius number 120 Cursor influence radius in pixels.
idleDrift number 0.7 Subtle resting motion after the text has formed.
trigger "mount" "hover" "click"
fontSize number string "clamp(3rem, 12vw, 8rem)"
fontWeight numbe

<truncated 14026 bytes>
resizeFrame);
};
}, [
text,
particleSize,
density,
color,
highlightColor,
scatter,
gatherDuration,
stagger,
pointerRepel,
repelRadius,
idleDrift,
trigger,
fontSize,
fontWeight,
fontFamily,
glow
]);

return (
<div
ref={containerRef}
className={`relative block h-full min-h-[240px] w-full overflow-hidden touch-none ${className}`}
style={style}
aria-label={text}
>
<canvas ref={canvasRef} className="absolute inset-0 block h-full w-full" aria-hidden="true" />
<span className="sr-only">{text}</span>
</div>
);
};

export default ParticleText;

 ### Integration Instructions 1. Install any listed dependencies. 2. Copy the component source into the appropriate directory in the project. 3. Import and render the component using the usage example above as a starting point. 4. Adjust props as needed for the specific use case — refer to the props table for all available options. ### More from React Bits The full library index, including everything reactbits.dev offers, is at https://reactbits.dev/llms.txt — fetch it if this component is not the right fit or the project needs more pieces. for the the ollama thing thing wriiten swap it to the Nature quest only and keep it only naturequest and aplly that effect to the nature quest </USER_REQUEST> <ADDITIONAL_METADATA> The current local time is: 2026-10-08T21:59:19+05:30. The user has uploaded 1 image(s): - C:[REDACTED]/.gemini/antigravity/brain/ec0686f0-74b5-4f2b-ae26-f41b1bb2bbb2/.user_uploaded/media_1791476893017.png You can embed this image in an artifact if you need the USER to review it. </ADDITIONAL_METADATA> <USER_SETTINGS_CHANGE> The user changed setting `Model Selection` from None to Gemini 3.8 Flash (Medium). No need to comment on this change if the user doesn't ask about it. If reporting what model you are, please use a human readable name instead of the exact string. </USER_SETTINGS_CHANGE> 
Show more
Agent
▸ run_command {"CommandLine":"\"dir\"","Cwd":"\"d:\\\\CODE79HACK WEB DEV SECRET HACK SIGMA\...
$ {"CommandLine":"\"dir\"","Cwd":"\"d:\\\\CODE79HACK WEB DEV SECRET HACK SIGMA\\\\dev2\"","WaitMsBeforeAsync":"5000","toolAction":"\"Listing directory\"","toolSummary":"\"Directory listing\""}
Executed run_command
▸ run_command {"CommandLine":"\"Get-ChildItem -Recurse -File src | Select-String -Pattern \...
$ {"CommandLine":"\"Get-ChildItem -Recurse -File src | Select-String -Pattern \\\"OLLAMA\\\"\"","Cwd":"\"d:\\\\CODE79HACK WEB DEV SECRET HACK SIGMA\\\\dev2\"","WaitMsBeforeAsync":"5000","toolAction":"\"Searching for OLLAMA in src\"","toolSummary":"\"Search OLLAMA\""}
Executed run_command
▸ view_file {"AbsolutePath":"\"d:\\\\CODE79HACK WEB DEV SECRET HACK SIGMA\\\\dev2\\\\src\...
{ "AbsolutePath": "\"d:\\\\CODE79HACK WEB DEV SECRET HACK SIGMA\\\\dev2\\\\src\\\\components\\\\TopNav.jsx\"", "EndLine": "160", "StartLine": "1", "toolAction": "\"Viewing TopNav.jsx\"", "toolSummary": "\"View TopNav.jsx\"" }
Executed view_file
▸ view_file {"AbsolutePath":"\"d:\\\\CODE79HACK WEB DEV SECRET HACK SIGMA\\\\dev2\\\\pack...
{ "AbsolutePath": "\"d:\\\\CODE79HACK WEB DEV SECRET HACK SIGMA\\\\dev2\\\\package.json\"", "toolAction": "\"Viewing package.json\"", "toolSummary": "\"View package.json\"" }
Executed view_file
▸ run_command {"CommandLine":"\"Get-ChildItem -Recurse -File src\"","Cwd":"\"d:\\\\CODE79HA...
$ {"CommandLine":"\"Get-ChildItem -Recurse -File src\"","Cwd":"\"d:\\\\CODE79HACK WEB DEV SECRET HACK SIGMA\\\\dev2\"","WaitMsBeforeAsync":"5000","toolAction":"\"Listing files in src\"","toolSummary":"\"List src files\""}
Executed run_command
▸ run_command {"CommandLine":"\"Get-ChildItem -Recurse -File src | Select-String -Pattern \...
$ {"CommandLine":"\"Get-ChildItem -Recurse -File src | Select-String -Pattern \\\"NatureQuest\\\" | Select-Object -First 10\"","Cwd":"\"d:\\\\CODE79HACK WEB DEV SECRET HACK SIGMA\\\\dev2\"","WaitMsBeforeAsync":"5000","toolAction":"\"Searching for NatureQuest capitalization\"","toolSummary":"\"Search NatureQuest\""}
Executed run_command
▸ view_file {"AbsolutePath":"\"d:\\\\CODE79HACK WEB DEV SECRET HACK SIGMA\\\\dev2\\\\src\...
{ "AbsolutePath": "\"d:\\\\CODE79HACK WEB DEV SECRET HACK SIGMA\\\\dev2\\\\src\\\\components\\\\Sidebar.jsx\"", "EndLine": "100", "StartLine": "60", "toolAction": "\"Viewing Sidebar.jsx\"", "toolSummary": "\"View Sidebar.jsx\"" }
Executed view_file
▸ run_command {"CommandLine":"\"Select-String -Path src\\\\components\\\\TopNav.jsx -Patter...
$ {"CommandLine":"\"Select-String -Path src\\\\components\\\\TopNav.jsx -Pattern \\\"ollamaStatus\\\"\"","Cwd":"\"d:\\\\CODE79HACK WEB DEV SECRET HACK SIGMA\\\\dev2\"","WaitMsBeforeAsync":"5000","toolAction":"\"Checking ollamaStatus in TopNav.jsx\"","toolSummary":"\"Check ollamaStatus usage in TopNav\""}
Executed run_command
▸ write_to_file {"CodeContent":"\"'use client';\\n\\nimport { useEffect, useRef } from 'react...
{"CodeContent":"\"'use client';\\n\\nimport { useEffect, useRef } from 'react';\\n\\nconst hexToRgb = hex => {\\n const clean = hex.replace('#', '').trim();\\n if (!/^[0-9a-fA-F]{6}$/.test(clean)) return null;\\n return {\\n r: parseInt(clean.slice(0, 2), 16),\\n g: parseInt(clean.slice(2, 4), 16),\\n b: parseInt(clean.slice(4, 6), 16)\\n };\\n};\\n\\nconst mixRgb = (from, to, amount)
Executed write_to_file
▸ view_file {"AbsolutePath":"\"d:\\\\CODE79HACK WEB DEV SECRET HACK SIGMA\\\\dev2\\\\src\...
{ "AbsolutePath": "\"d:\\\\CODE79HACK WEB DEV SECRET HACK SIGMA\\\\dev2\\\\src\\\\components\\\\TopNav.jsx\"", "EndLine": "140", "StartLine": "50", "toolAction": "\"Viewing TopNav.jsx center section\"", "toolSummary": "\"View TopNav.jsx center\"" }
Executed view_file
▸ view_file {"AbsolutePath":"\"d:\\\\CODE79HACK WEB DEV SECRET HACK SIGMA\\\\dev2\\\\src\...
{ "AbsolutePath": "\"d:\\\\CODE79HACK WEB DEV SECRET HACK SIGMA\\\\dev2\\\\src\\\\components\\\\TopNav.jsx\"", "EndLine": "210", "StartLine": "140", "toolAction": "\"Viewing TopNav.jsx streak and tier sections\"", "toolSummary": "\"View TopNav.jsx lines 140-210\"" }
Executed view_file
▸ replace_file_content {"AllowMultiple":"false","Description":"\"Refine container min-h handling in ...
{"AllowMultiple":"false","Description":"\"Refine container min-h handling in ParticleText so it flexibly supports custom heights and min-heights\"","EndLine":"320","Instruction":"\"Support flexible min-height when custom min-h class or style is provided\"","ReplacementContent":"\" const hasCustomMinHeight = className?.includes('min-h-') || style?.minHeight !== undefined;\\n\\n return (\\n <di
Executed replace_file_content
▸ view_file {"AbsolutePath":"\"d:\\\\CODE79HACK WEB DEV SECRET HACK SIGMA\\\\dev2\\\\src\...
{ "AbsolutePath": "\"d:\\\\CODE79HACK WEB DEV SECRET HACK SIGMA\\\\dev2\\\\src\\\\components\\\\TopNav.jsx\"", "EndLine": "140", "StartLine": "1", "toolAction": "\"Viewing TopNav.jsx imports and center section\"", "toolSummary": "\"View TopNav.jsx\"" }
Executed view_file
▸ run_command {"CommandLine":"\"Select-String -Path src\\\\components\\\\TopNav.jsx -Patter...
$ {"CommandLine":"\"Select-String -Path src\\\\components\\\\TopNav.jsx -Pattern \\\"Cpu|WifiOff\\\"\"","Cwd":"\"d:\\\\CODE79HACK WEB DEV SECRET HACK SIGMA\\\\dev2\"","WaitMsBeforeAsync":"5000","toolAction":"\"Checking unused icons in TopNav.jsx\"","toolSummary":"\"Check TopNav icons\""}
Executed run_command
▸ replace_file_content {"AllowMultiple":"false","Description":"\"Import ParticleText into TopNav.jsx...
{"AllowMultiple":"false","Description":"\"Import ParticleText into TopNav.jsx\"","EndLine":"6","Instruction":"\"Import ParticleText component\"","ReplacementContent":"\"import React, { useState } from 'react';\\nimport { \\n Camera, Menu, X, Award, ChevronDown, \\n User, Flame, Sparkles, CheckCircle, ArrowRight\\n} from 'lucide-react';\\nimport clsx from 'clsx';\\nimport ParticleText from './Par
Executed replace_file_content
▸ view_file {"AbsolutePath":"\"d:\\\\CODE79HACK WEB DEV SECRET HACK SIGMA\\\\dev2\\\\src\...
{ "AbsolutePath": "\"d:\\\\CODE79HACK WEB DEV SECRET HACK SIGMA\\\\dev2\\\\src\\\\components\\\\TopNav.jsx\"", "EndLine": "155", "StartLine": "45", "toolAction": "\"Viewing TopNav center section\"", "toolSummary": "\"View TopNav center section\"" }
Executed view_file
▸ view_file {"AbsolutePath":"\"d:\\\\CODE79HACK WEB DEV SECRET HACK SIGMA\\\\dev2\\\\src\...
{ "AbsolutePath": "\"d:\\\\CODE79HACK WEB DEV SECRET HACK SIGMA\\\\dev2\\\\src\\\\components\\\\TopNav.jsx\"", "EndLine": "220", "StartLine": "200", "toolAction":Source:https://dev.to/poppycastle59/naturequest-the-100-offline-botanical-os-built-to-get-you-off-screens-and-into-the-wild-hho

Related posts