LiveitUp

Live it. Write it. Comic it.

Comment

Inspiration:We wanted to make journaling more expressive and fun. Reading plain text entries feels static, but emotions are dynamic. So we asked: What if your words could draw themselves? We combined creative writing with colorful stick figure animations — turning daily thoughts into little looping stories. The result is Animated Journal: a playful, visual way to capture how you feel.

What it does:Animated Journal is a web app that transforms text journal entries into looping animations of colorful stick figures. Users write an entry, click a button, and the app analyzes the mood (joyful, calm, angry, sad, excited, loving) and complexity (simple or detailed). It then generates 3–5 sequential stick figure images that loop as an animation. Users can save entries to their browser (localStorage), browse them in a gallery, edit or delete entries, and export the animation frames as a ZIP file. No login required — all data stays on the user’s device.

How we built it:

No‑code platform: Built entirely with MeDo (full‑stack AI builder) – frontend, backend, and logic.

Core AI plugins:

LLM plugin: Analyzes journal text to extract mood and complexity.

Image Generation plugin (Kling): Creates sequential stick figure images based on mood‑specific prompts.

Data persistence: localStorage stores entries (text, date, image URLs, mood, complexity).

Animation: Simple JavaScript slideshow that cycles images every 0.3 seconds with play/pause/replay.

Export: JSZip library packages image frames into a downloadable ZIP.

UI: Custom CSS with a “cozy expressive playground” vibe (cream background, rounded cards, pastel accents).

Challenges we ran into:Getting the LLM to output reliable mood tags – Sometimes it returned extra text. We fixed it by forcing a strict output format (mood = X, complexity = Y) with no extra words.

Sequential image generation – Generating 3–5 images in parallel caused rate limits and failures. We switched to sequential calls with a loading indicator.

Animation loop smoothness – Images loaded at different times, causing jumps. We preloaded all frames before starting the loop.

localStorage limits – Very long entries or many images could exceed quota. We added a warning and delete prompt.

Empty state handling – The gallery looked broken with no entries. We added a friendly empty state message.

Accomplishments that we're proud of:

A fully functional, self‑contained web app built in a single session.

Accurate mood detection from free‑form text (joyful, calm, angry, sad, excited, loving).

Smooth, looping stick figure animations that visually reflect the user’s emotion.

Clean, intuitive UI that feels like a digital sketchbook.

Export feature that lets users keep their animated frames as ZIP files.

No backend costs – everything runs in the browser.

What we learned:Specs before code – Writing a detailed requirements document saved hours of rework.

Prompt engineering is critical – Small changes in the LLM instruction changed mood accuracy dramatically.

Sequential beats parallel – For external APIs, sequential calls are more reliable and easier to debug.

localStorage is powerful but limited – It’s great for MVPs, but we now know when to move to a database.

Animation doesn’t need video – A simple image slideshow can feel like real animation with the right timing.

What's next for LiveitUp:- Multiple language support (only English in MVP)

  • Cloud synchronization or backend storage
  • User authentication or multi-user support
  • Social sharing functionality
  • Advanced animation customization (speed, transition effects)
  • Audio or music integration
  • Entry search or filtering
  • Entry tagging or categorization
  • Batch export of multiple entries
  • Animation preview before saving
  • Undo/redo functionality during editing
  • Rich text formatting in journal entries
  • Image upload for custom backgrounds
  • Animation style variations beyond stick figures
  • Entry statistics or mood tracking analytics

Built With

  • a-powerful-open-source-firebase-alternative
  • and-vanilla-javascript-for-its-structure
  • css3
  • html5
  • javascript
  • joyful
  • jszip
  • making-it-instantly-accessible-via-a-public-url.-core-functionality-(ai-features):-mood-analysis:-an-llm-plugin-analyzes-the-user?s-journal-entry-to-determine-the-primary-emotion-(e.g.
  • no-code-app-builder.-the-app-is-fully-hosted-on-medo?s-platform-and-runs-entirely-in-the-browser
  • platform-&-hosting:-built-entirely-on-medo
  • sad)-and-visual-complexity.-image-generation:-an-image-generation-plugin-(kling)-generates-3-5-sequential-stick-figure-images-based-on-the-analyzed-mood-and-complexity.-data-&-user-management:-database:-supabase
  • styling
  • supabase
  • the-ai-powered
  • this-could-support-user-accounts-and-cloud-synchronization.-authentication:-supabase-auth-handles-secure-user-logins-and-account-management.-frontend-&-styling:-languages:-the-app-uses-standard-html5
  • was-used-as-the-backend-as-a-service-to-store-user-data-and-authentication.-in-the-future
  • with-no-server-side-code-for-data-processing
Share this project:

Updates

Submission history