Inspiration
Cities are full of overlooked spaces—balconies, rooftops, schoolyards, and small public corners—that could support wildlife but rarely feel meaningful on their own. At the same time, biodiversity data is widely available, yet most people do not know how to translate that data into a practical action.
Habitat Pulse closes that gap. It makes nearby life visible, then turns one small urban space into a personalized habitat plan. The central idea is simple: one patch may be small, but many connected patches can become a living network.
What it does
Habitat Pulse is a cinematic local-biodiversity observatory and AI-assisted micro-habitat planner.
Users can:
- Search a city or use their current location.
- Select a 2 km, 5 km, or 10 km observation radius.
- Explore recent research-grade biodiversity observations from iNaturalist.
- View nearby observations spatially using Google Maps.
- See current temperature and rain probability from Open-Meteo.
- Discover photographed species and wildlife groups recorded nearby.
- Describe a balcony, rooftop, schoolyard, or community corner.
- Choose whether the space should prioritize pollinators, birds, mixed wildlife, or urban cooling.
- Receive a Gemini-powered habitat plan informed by space, sunlight, surface, area, and nearby wildlife.
- Complete recommended actions and watch the Habitat Readiness score respond immediately.
If Gemini is unavailable, Habitat Pulse retains a transparent local recommendation engine so the planner remains functional.
How we built it
Habitat Pulse is built with semantic HTML, CSS, JavaScript, and a lightweight server runtime.
The experience uses:
- Three.js and custom GLSL shaders for a procedural particle environment.
- GSAP and ScrollTrigger for cinematic camera movement, spatial transitions, and scroll choreography.
- Lenis for smooth scroll pacing.
- Google Maps JavaScript API for the live observation map.
- Gemini API for structured, context-aware habitat recommendations.
- iNaturalist API for research-grade biodiversity observations and photographs.
- Open-Meteo API for current weather and rain probability.
- Nominatim for place search.
- Vinext, Vite, and Cloudflare for the production runtime and deployment.
The interface is deliberately not a conventional dashboard. Scattered particles transform into a connected habitat corridor before the experience resolves into usable evidence and planning tools. The visual metaphor supports the ecological argument: isolated spaces become more valuable when they form a network.
Gemini runs through a server-side endpoint so its API key is never exposed to the browser. It returns structured recommendations with exactly four actions, concise reasoning, safety guidance, and bounded readiness points. External biodiversity records are treated as untrusted data rather than model instructions.
Challenges we ran into
Making environmental data honest
Citizen-science activity is not the same as biodiversity abundance. A location with fewer observations may simply have fewer observers. We therefore call the result a field reading, not a census, and avoid presenting record density as a complete ecological assessment.
Making AI useful rather than decorative
We wanted Gemini to produce practical recommendations without inventing ecological certainty. The prompt constrains recommendations to affordable interventions, avoids invasive species and unsafe water storage, and encourages confirmation with a local native-plant expert. Structured JSON output keeps the interface predictable.
Making 3D serve the story
It was easy to add more effects, but difficult to make them meaningful. We limited the experience to one WebGL environment and one signature transformation: scattered observations becoming a connected corridor.
Keeping the project resilient
Live APIs, AI services, maps, and WebGL can fail independently. Habitat Pulse preserves semantic content without animation, provides a CSS fallback when WebGL is unavailable, labels sample data clearly, and retains a deterministic local habitat planner if Gemini cannot respond.
Accomplishments that we're proud of
- Created a complete journey from environmental evidence to personal action.
- Combined live biodiversity, weather, map, and AI technologies in one coherent experience.
- Built a high-end cinematic interface without relying on a generic dashboard layout.
- Created an explainable recommendation system with a reliable non-AI fallback.
- Communicated uncertainty instead of overstating what citizen-science data proves.
- Added keyboard navigation, visible focus states, semantic controls, responsive layouts, and reduced-motion support.
- Used one performance-conscious WebGL renderer with capped device pixel ratio and mobile-specific rendering limits.
- Produced a deployable project with clear third-party attribution and no committed credentials.
What we learned
Environmental technology becomes more useful when it moves beyond awareness and gives people a credible next action.
We learned that responsible environmental data design requires explaining what a dataset cannot prove, not only displaying what it contains. We also learned that AI recommendations are stronger when constrained by transparent inputs, structured output, safety rules, and a deterministic fallback.
Finally, restraint made the cinematic experience stronger. One meaningful 3D metaphor communicated more than a collection of unrelated visual effects.
What's next for Habitat Pulse
Next, we would:
- Add expert-reviewed native plant catalogs for specific regions.
- Let schools and neighborhoods combine multiple small patches into a shared habitat-corridor map.
- Save habitat plans and track completed actions over time.
- Compare repeat biodiversity observations before and after improvements.
- Add seasonal recommendations based on climate and migration patterns.
- Partner with conservation groups to validate recommendation quality.
- Create classroom and community challenge modes for coordinated local action.
Habitat Pulse shows that habitat is not always somewhere else. A living network can begin with one overlooked space.
Built With
- accessibility
- api
- cloudflare
- css3
- gemini
- glsl
- gsap
- html5
- inaturalist
- javascript
- lenis
- maps
- nominatim
- open-meteo
- openstreetmap
- responsive
- scrolltrigger
- three.js
- vinext
- vite
- webgl
Log in or sign up for Devpost to join the conversation.