DEV Community

karleeov
karleeov

Posted on

Whether it's "coding," "cooking," "rock climbing," or "helping others" -- the AI will craft something beautiful just for you.

#devchallenge #weekendchallenge #webdev #react

This is a submission for Weekend Challenge: Passion Edition

What I Built

Passion Flame is an interactive web experience that celebrates what sets our souls on fire. The core idea: passion is like fire -- it starts as a single spark, grows when shared, and becomes unstoppable when many come together.

The app lets anyone submit what they're passionate about, and Google's Gemini AI crafts a unique, poetic tribute to that passion. Each submission becomes a "flame" on our collective Wall of Flames -- a growing monument to human passion across the globe.

Key features:

  • Interactive flame particle animation (Canvas 2D) that reacts to your mouse movement -- 120 flickering particles rising from the depths
  • AI-powered passion poet -- Google Gemini generates beautiful, metaphorical descriptions of whatever you submit (with graceful fallback to curated poetic templates)
  • The Wall of Flames -- a masonry gallery of all submitted passions, each rendered as a unique flame-colored card
  • Scroll-triggered animations powered by GSAP with animated stat counters
  • Fully responsive across mobile, tablet, and desktop
  • Persistent storage via localStorage so your passions survive page refreshes

Demo

🔗 Live Demo: https://idohi7cmhfm2w.kimi.page

Try submitting your own passion! Whether it's "coding," "cooking," "rock climbing," or "helping others" -- the AI will craft something beautiful just for you.

Code

The source code is available on GitHub (link coming soon). Built with:

  • React 19 + TypeScript + Vite
  • Tailwind CSS for styling
  • Canvas 2D for the flame particle system
  • GSAP + ScrollTrigger for scroll animations
  • Google Gemini API for AI text generation

How I Built It

I started with the metaphor: passion as fire. Fire is primal, universal, and visually striking -- perfect for a "Passion" themed challenge. I wanted something that felt immersive from the moment you land on the page.

The Flame Animation

The hero section features a Canvas 2D particle system with 120 flame-colored particles that spawn from the bottom and rise with physics-based movement. Each particle has its own velocity, lifespan, and sway. Mouse movement creates a repulsion force -- push the flames around!

The AI Integration

I used Google's @google/generative-ai SDK with the Gemini 1.5 Flash model. The prompt engineering was key: I crafted a prompt that asks for "short, poetic, inspiring descriptions (2-3 sentences)" with "fire/flame metaphors" and a character limit. When no API key is available, the app falls back to a curated set of 6 poetic templates that rotate based on the passion text hash.

The Visual Design

The color palette is built entirely around fire: deep crimsons, bright oranges, warm ambers, and golden yellows against a near-black background. Typography pairs Playfair Display (elegant serif for headings) with Inter (clean sans-serif for body text). Every section has GSAP scroll-triggered entrance animations for that polished feel.

Prize Category

Best Use of Google AI -- The Gemini integration is central to the experience. Every passion submission gets a unique AI-generated poetic description, making each interaction personal and memorable.

Built in a weekend fueled by coffee and genuine passion for building things that spark joy. 🔥

Top comments (0)