Canopy (Hackathon Finalist)

🏆 Hackathon Winner; top 6 finalist, top 2 for health & humanity track (winner)

Inspiration

Between a 75-year-old living at home and the hospital that treats them, there is a void. No monitoring, no continuity, no early intervention.

1 in 5 elderly patients is readmitted within 30 days, costing ~$16,000 each
40% of seniors lack the digital literacy for current remote patient monitoring tools
53M unpaid family caregivers in the US have zero visibility into their loved one's health

We wanted to build something that fills that gap, not with another clinical dashboard nobody wants to use, but with interfaces so intuitive that a 75-year-old can use one without instructions, a worried daughter can glance at her phone and feel reassured, and a GP can catch a crisis before it happens.

What it does

Canopy is three interconnected experiences on one platform:

The Garden (Patient Interface) - An immersive 3D garden on an iPad where elderly patients do daily check-ins by tapping flowers and butterflies. The garden visually reflects their health: blooming when healthy, wilting when vitals decline. Zero digital literacy required. Tap a butterfly to video-call family.

The Nest (Family Dashboard) - A single daily green/yellow/red signal with a plain-language AI summary. "Margaret had a good day. Blood pressure stable, took all medications, went for a short walk." Families get peace of mind without information overload.

Clinical Intelligence (Clinician Dashboard) - AI-powered risk stratification with multi-signal pattern detection. Real-time patient timelines, risk score trends, actionable alerts, and automated discharge planning. Catches deterioration patterns that individual readings miss.

Landing Experience - The landing page features three animated 3D islands on a cel-shaded ocean. Clicking any interface card triggers a cinematic camera fly-to transition toward that island before entering the experience.

How we built it

Frontend: Next.js 15 with App Router, vanilla Three.js for all 3D scenes (procedural geometry, no loaded models), Framer Motion for UI animations, Tailwind CSS for styling. Every 3D scene is hand-coded with cel-shaded outlines, procedural canvas textures, and animated elements (orbiting clouds, flying birds, swaying plants, pulsing lighthouse).

AI Pipeline: A four-node LangGraph StateGraph processes patient health data through:

Ingest - Normalize readings, compute baselines
Assess Risk - Deterministic rules + Groq/Gemini narrative
Communicate - Generate caregiver summary, clinical alert, garden visual state
Plan Discharge - Structured recovery plans

Chat: Groq API with Llama 3.3 70B for the patient chatbot, with a comprehensive 300+ response fallback system covering 80+ intent categories (emergencies, medications, emotional support, daily living) that works with zero LLM calls when the API is unavailable.

Backend: FastAPI (Python) with Supabase for real-time data. Supabase Realtime broadcasts assessment updates so the caregiver and clinical dashboards update live without polling.

Challenges we ran into

Making Three.js scenes performant with procedural geometry (no GLTF models, everything built from primitives)
The fly-to camera transition system required a mutable ref bridge between React state and the Three.js animation loop running inside a useEffect closure
Building a chat fallback system that handles 80+ intent categories empathetically without any LLM calls
Designing interfaces simple enough for a 75-year-old while sophisticated enough for a clinician, on the same platform

Accomplishments that we're proud of

The 3D island experience with cinematic fly-to transitions between pages
A patient interface that requires zero digital literacy
Real-time data flow from patient check-in to caregiver notification to clinical alert
The comprehensive chat fallback system that never leaves a patient without a response

What we learned

Procedural Three.js can create beautiful scenes without 3D modeling tools
The biggest design challenge in healthcare isn't the AI, it's making the interface disappear so the patient just sees a garden, not an app
LangGraph's stateful agent orchestration is powerful for multi-step clinical reasoning