LannaMemoir

An AI memory companion that turns your camera roll into a 3D galaxy of connected stories you can revisit—because memories deserve more than a hard drive.

Comment

Inspiration

After an incredible trip through Northern Thailand, I came home with hundreds of photos and videos—beautiful fragments of a journey I wanted to keep forever. But the truth is what happens to most trips happened to mine: the files sank into folders, and the details started slipping away. Even the best moments blur when life speeds back up.

Then I remembered something from childhood. Candies were rare treasures, so I never ate them all at once. I’d take one, savor it, and put the box away—stretching a small joy into weeks. The ritual made the sweetness last.

Travel memories work the same way. A trip is precious, but once you’re home, the “sweetness” fades fast. Photos pile up. Context disappears. What did it smell like? Who were you with? Why did that moment matter?

That’s why I built Lanna Memoir: a candy box for travel. An AI companion that helps you slow down, tell the story behind each photo, and keep the feeling—not just the image. Years later, you can fly back through your 3D galaxy of memories and relive a temple at golden hour or a rainstorm on a mountain road as vividly as the day it happened.

What it does

Lanna Memoir transforms travel photos into an interactive 3D galaxy of memories—where each moment becomes a story you can revisit, not just a file you forget. Instead of scrolling an endless camera roll, you fly through your past: places become constellations, memories become nodes, and your journeys become something you can explore.

3D Spatial Navigation

Each trip is visualized as a spiral galaxy made of memory nodes connected by a glowing route. You navigate through a “temporal tunnel” that links moments in sequence—so revisiting a trip feels like re-walking it.

  • Memory nodes represent locations and moments (temples, meals, streets, hikes).
  • Photo artifacts appear as interactive objects along the route—click to open them full screen.
  • Story panels give context with a narrative view, so each stop has meaning, not just imagery.
  • The result is a browsing experience that feels like exploration, not file management.

AI Memory Creation (Photo + Conversation)

This is the heart of the project: turning a static photo into a living memory.

  1. Upload a photo Gemini analyzes the image to infer visual context—architecture, lighting, atmosphere, setting, and potential cues about place.
  2. Talk about the moment You speak or type your memory. The AI prompts you for details humans forget first:
    • What did it smell like?
    • What were you feeling?
    • What was happening just outside the frame?
    • Why did you take this photo?
  3. Generate a narrative + structured memory object The AI produces:
    • a short, poetic narrative (“memory fragment”)
    • a title / tags / themes
    • metadata that keeps the memory consistent inside the 3D world (so it renders reliably as a node and can be browsed later)

This is how Lanna Memoir preserves what matters most: the meaning behind the photo.

Pattern Discovery & Thematic Clustering

As your memory archive grows, Lanna Memoir can help you discover patterns you didn’t realize were there—your “travel personality.”

Examples of patterns it can surface:

  • “You’re repeatedly drawn to sacred spaces across trips.”
  • “Your happiest writing appears around food and markets.”
  • “You often photograph architecture at golden hour.”

Those themes can become visible clusters in the 3D galaxy—grouped regions or highlighted constellations—so you don’t just store memories, you learn from them. It turns memory-keeping into reflection.

Guided Flythroughs (Cinematic Revisit Mode)

Sometimes you don’t want to browse—you want to relive. Lanna Memoir supports guided tours through your own archive.

You can ask for a themed revisit like:

  • “Show me my temple journey”
  • “Fly through my food memories”
  • “Take me through rainy days”

The camera moves smoothly from node to node with a curated flow, creating a “personal documentary” feeling—like a tour guide through your own past.

Semantic Search (No Manual Tagging)

Traditional albums rely on folders and captions. Lanna Memoir is built for how humans actually remember.

Search naturally:

  • “animals” → finds cats, dogs, birds, farm scenes
  • “quiet morning” → finds cafés, sunrise walks, empty streets
  • “temple” → finds multiple architectural styles even across different countries

The point is to reduce friction. You shouldn’t need to tag your life to remember it.

Footprint Map (Where you’ve been, at a glance)

Alongside the 3D galaxy, Lanna Memoir includes a footprint view that lights up the places you’ve visited. It’s the “overview layer”:

  • see your travel coverage instantly
  • jump into a trip or region quickly
  • watch your archive expand over time

How we built it

Frontend (3D experience)

  • React + TypeScript for the UI and state
  • React Three Fiber + Three.js for the interactive 3D “memory galaxy”
  • Framer Motion for smooth panels and transitions
  • Custom particle effects for the tunnel/galaxy ambience

Backend (serverless + storage)

  • Vercel Functions for API endpoints
  • Supabase PostgreSQL to store memories and metadata
  • Drizzle ORM for type-safe database queries

AI Integration: Gemini 2.0 Flash

  • Multimodal understanding: Analyzes uploaded photos (and optional video frames) to infer mood, architecture, and context
  • Function calling: Converts natural-language requests into UI actions (search, camera moves, pattern views)
  • Long-context pattern discovery (2M-token capable): Finds cross-trip themes and connections across your memory archive
  • Structured JSON output: Returns consistent “memory objects” (story + metadata) for reliable 3D node creation and positioning

Additional technologies

  • Web Speech API for voice input (speech-to-text)
  • Leaflet for a 2D “footprint map”
  • Google Maps API for location/route visuals (where used)
  • Vite for fast dev and builds

Tech Stack

  • Languages: TypeScript, JavaScript
  • Frameworks/Libraries: React 19, Three.js, React Three Fiber, Framer Motion, Drizzle ORM
  • Platform: Vercel (Hosting + Serverless Functions)
  • Database/Cloud: Supabase PostgreSQL (PostgreSQL)
  • APIs: Google Gemini 2.0 Flash, Google Maps API, Web Speech API

Challenges we ran into

1. Learning everything from scratch (while shipping)

I’m a battery engineer and my teammate is a social scientist, both of us are not full-time developers, so we had to learn multiple domains at once: modern React patterns, TypeScript typing, 3D scene graphs, and database-backed APIs. The hard part wasn’t just learning concepts—it was learning them under real constraints (bugs, deadlines, integration issues). I treated each feature as a small experiment: build the simplest version, test it end-to-end, then refine.

2. The “vibe coding maze” (AI-assisted debugging loops)

AI pair programming sped things up, but it also created a new failure mode: the assistant would “fix” a bug, and a different part of the app would break—especially when UI state, 3D rendering, and async API calls interacted. I found myself in loops where changes were made without a clear record of what had already been tried.

What worked: I started logging bugs systematically:

  • what the symptom was (what the user sees)
  • reproduction steps
  • likely root causes
  • what changes were attempted and the result

This gave the AI continuity and made debugging more deterministic. It also forced me to reason more clearly about the system instead of patching blindly.

3. 3D performance optimization (smooth on real devices)

A 3D “galaxy” is visually compelling, but WebGL performance can collapse quickly when you render thousands of objects or trigger frequent re-renders. The biggest challenges were:

  • particle count vs. smoothness: too many particles looks great but tanks FPS
  • camera motion + interaction: smooth fly-to transitions can stutter if the scene is heavy
  • device variability: something that runs fine on a laptop can struggle on mobile

What we did: reduced particle counts where it didn’t change perceived quality, tuned device pixel ratio, and tightened state updates so UI changes didn’t force expensive 3D re-renders.

4. Balancing AI creativity with UI reliability (poetry vs. structure)

Gemini can produce beautiful, human-sounding narratives—but a 3D interface needs consistent data. Early on, outputs varied: missing fields, inconsistent formatting, or unpredictable wording that broke rendering assumptions.

Fix: We separated “creative text” from “structured output”:

  • narrative: free-form but short and readable
  • metadata: strict JSON with required fields (title, tags, render info)

This took iteration in prompts and validation, but it made memory creation reliable and prevented “one weird AI response” from breaking the experience.

5. Making “connected memories” credible (context without chaos)

Linking memories across trips sounds magical, but it creates practical issues:

  • how to provide enough past context without slowing responses
  • how to keep the assistant consistent as the archive grows
  • how to avoid hallucinated connections that feel “made up”

Approach: keep an evolving summary/metadata layer (themes, tags, short memory snippets) so the AI can reference the archive responsibly and surface patterns with enough grounding to feel real.

Accomplishments that we’re proud of

From zero to a working product in 6 weeks

We turned Lanna Memoir from an idea into a functional, end-to-end application in ~6 weeks, starting with no JavaScript background—no React experience, no 3D graphics knowledge, and no database design experience. The biggest win is that the core loop works: explore memories in 3D, create a new memory from a photo + reflection, and save it back into the system.

Built an immersive 3D memory interface

Without formal UI/UX training, we designed and implemented a navigable 3D “memory galaxy” with interactive nodes, photo viewing, story panels, and cinematic camera transitions. It’s not just a demo scene—it’s an interface people can actually use to revisit moments.

Integrated AI in a way that powers the product (not just a chatbot)

We didn’t add AI as a novelty. Gemini is wired into the experience: it analyzes photos, guides reflection with prompts, and generates both a narrative and structured data so memories can be reliably created and represented as 3D nodes.

Learned to collaborate with AI like a real team

One of our biggest breakthroughs was developing a repeatable workflow for AI-assisted building: assigning roles (architect, debugger, UI/UX reviewer), keeping a running bug log, and using structured prompts. That turned AI from “code generator” into a context-aware collaborator.

Opened a new capability for what we can build next

This project changed our confidence and skill ceiling. Lanna Memoir proved that with systematic thinking, iteration, and strong AI collaboration, non-developers can build real software—not just prototypes—and that unlocks bigger ideas we’re excited to pursue next.

What we learned

Multimodal + chat is the right interface for memory capture

We learned that people don’t want to tag and sort albums. They want to tell the story behind a photo. Combining image understanding with conversation creates a natural flow: upload a picture, talk about what was happening, and let the system preserve the context that would otherwise disappear.

Long-context reasoning enables discovery without manual organization

As the archive grows, long-context reasoning makes it possible to surface themes and connections across memories without asking users to curate everything themselves. Instead of rigid folders and tags, patterns can emerge from the stories—temples, food, golden-hour architecture, recurring moods—turning storage into reflection.

AI works best here as a patient listener

A surprising insight was how much AI reduces social friction. People can spend time describing a single moment without feeling rushed or self-conscious. That patience helps capture the sensory details and emotions that make a memory vivid years later.

Non-developers can build real software with systematic iteration

This project reinforced that modern tools can dramatically lower the barrier to building, but only if you iterate methodically: test end-to-end, track bugs, validate outputs, and improve in small steps. AI is most effective as a collaborator that accelerates that process—not as a substitute for clear thinking.

What’s next for Lanna Memoir

Immediate improvements (make it solid and smooth)

  • Bug fixes & polish: remove remaining glitches, improve stability, tighten loading states and error handling.
  • Performance + UX tuning: faster interactions, smoother camera transitions, and better behavior on lower-end devices.
  • Production-ready AI usage: move to a paid/production API tier to reduce rate limits and make memory creation consistently reliable.

Mobile-first memory capture

  • iOS/Android experience: make it easy to log memories in the moment—photo + voice capture on the go, then revisit later in the 3D galaxy.
  • Offline-friendly drafts: capture voice notes and photos offline, then generate the full narrative when connectivity returns (optional direction).

Accessibility and intergenerational storytelling

A major direction is adapting Lanna Memoir for elderly users and families. Many older people can’t or won’t use complex apps, but they can have a conversation. A voice-first flow could preserve life stories—childhood memories, career journeys, family history—before they’re lost.

Example: an AI prompt like, “What did your mother cook for special occasions?” could unlock details that become treasured family narratives.

Cultural heritage and education (“culture ambassador” mode)

Beyond personal journaling, Lanna Memoir could help travelers understand what they’re seeing. Instead of only facts (“built in 1401”), the AI could add optional cultural context:

  • why architectural elements look the way they do and what they symbolize
  • how a temple connects to local history, trade, and neighboring cultures
  • interactive prompts: “Want to learn about the meditation practice here, or the annual festival?”

This turns tourism into deeper understanding and respect for place.

The bigger vision

Lanna Memoir started as a travel journal, but the core idea—AI as a patient listener that helps people preserve meaning—extends beyond travel: life milestones, career journeys, creative projects, and family memories. The “galaxy” becomes a way to revisit a life, not just a trip.

Built With

Share this project:

Updates