LifeMap

Inspiration

💡 Inspiration We've all been asked "tell me about yourself." And every time, we struggle — because life isn't a bullet-point list. It's a winding road full of homes, heartbreaks, graduations, late nights, and little victories. The idea for LifeMap came from a simple question: what if your story looked as beautiful as it felt? Inspired by hand-drawn travel maps, illustrated journals, and the magic of scrolling through Google Maps — we wanted to give every person a canvas to map their journey.

🛠️ What We Built LifeMap is an emotionally immersive, hand-drawn doodle-style life story visualizer. Users answer a few warm, human questions — their birth year, their name, a few key milestones — and the app generates a beautiful, scrollable illustrated map of their life. The map looks like it was sketched in a sketchbook: a winding ink road connects illustrated doodle landmarks — a childhood home, a school, a mountain for a hard chapter, a trophy for a proud moment. As you scroll, the road draws itself. Hover over a building and it glows. Click it, and a notebook-style panel slides open with your story. "An illustrated map of someone's life — one milestone at a time."

⚙️ How We Built It Entirely frontend — a single self-contained file using React. All illustrations are hand-crafted inline SVGs with irregular paths to mimic real pen strokes. The scroll animation uses IntersectionObserver tied to SVG stroke-dashoffset. Map data is encoded as compressed base64 in the URL for sharing — no backend needed. Stack: React · Inline SVG · CSS Animations · Web Audio API · localStorage · base64 URL encoding · Caveat Font

🧱 Challenges Making SVG roads feel hand-drawn without an illustration tool was the biggest challenge. We used SVG feTurbulence displacement filters and carefully placed cubic bezier curves to create organic, imperfect paths that feel human. Getting the scroll-driven animation to sync perfectly with reading speed took a lot of tuning. Designing the onboarding to feel warm and not clinical was equally hard. Every label, placeholder, and button was rewritten multiple times until it stopped sounding like a form and started sounding like a friend asking.

🏆 What We're Proud Of Play Journey Mode. When you hit play, your life auto-scrolls like a slow documentary — milestones glow one by one, panels open and close, and for a moment you genuinely feel the weight and beauty of your own story. We didn't expect it to be emotional. It is. Also: the whole thing is one HTML file with zero external dependencies beyond React CDN and a Google Font. Ship it anywhere.

📚 What We Learned Design for feeling, not just function. The most technically impressive feature means nothing if it doesn't make someone feel something. We learned to ask "does this feel human?" before "does this work?"

🚀 What's Next Collaborative maps for couples and families. AI-suggested layouts based on your story. Export as a printable poster. A mood-weather overlay — sunny for happy years, rain for hard ones. And maybe a way to leave a sealed memory, locked until a future year.

Every life is a journey worth mapping. 🗺️