Reflect

An AI Sanctuary that turns thoughts into poetry. It features a breathing interface, parallax void effects, and emotional color theory powered by Gemini 2.5, designed to dissolve stress into mist.

Comment

Inspiration

The modern web is loud. It is full of notifications, urgencies, and endless scrolling. For the Vibe-a-thon, I didn't want to build another productivity tool or a chatbot that gives you generic advice.

I wanted to build a Mirror.

I was inspired by the concept of "Digital Animism" - the idea that software can feel biological rather than mechanical. I wanted to create a space where a user could dump their mental load into the void, and have the void "breathe" with them before offering a perspective shift.

What it does

Reflect is a digital sanctuary that metabolizes stress.

  1. Listens: You type your burden or heavy thought into the void.
  2. Breathes: The interface initiates a biological, 8-second "Inhale... Exhale..." cycle, guiding you to physically slow your heart rate while the AI processes.
  3. Analyzes: Using Gemini 2.5 Flash Lite, it deconstructs the emotional texture of your words, identifying the core sentiment and assigning it a specific color code (e.g., a muted teal for "Melancholy").
  4. Transforms: The entire application atmosphere shifts to that color using a radial bleed. It returns a short, poetic insight designed to shift your perspective.
  5. Releases: When you are ready to let go, the "Reflect Again" action triggers a physics-based particle animation, where your words scatter, blur, and dissolve into the digital ether.

How I built it

Reflect is an experiment in "Atmospheric UI," built using React and TypeScript. To achieve the immersive "Vibe," I had to push 2D web technologies to mimic a 3D environment.

  1. The "Fake 3D" Parallax Engine I didn't use heavy 3D libraries like Three.js. Instead, I used Framer Motion's physics hooks (useSpring, useTransform) to map the user's mouse position to different layers of the app. The Snow: Drifts slowly (x: 50). The Orb: Moves inversely to the mouse (x: -30). The Result: A deep "window" effect that makes the screen feel like a portal.
  2. The AI as an Artist (Gemini 2.5) I used Google Gemini 2.5 Flash Lite not just for text, but for Color Theory. I engineered a strict system prompt that forces the AI to return raw JSON containing: A poetic, 12-word insight. An abstract "Emotional State" . A specific Hex Color Code based on that emotion. This allows the application to dynamically repaint the entire atmosphere. If the AI detects "Hope," the dark void bleeds gold. If it detects "Anxiety," it turns a cold, muted violet.
  3. Biological Pacing Most apps try to be as fast as possible. I deliberately slowed Reflect down. The interface forces an 8-second "Inhale... Exhale..." animation cycle. Even if the API responds instantly, the app waits. This forces the user to physically slow their heart rate before reading the answer.

Challenges I ran into

The "Vanishing Data" Crash: I built a complex exit animation where text blows away like sand. Initially, the app would crash because the React state was clearing the data (null) before the 1.5-second animation could finish.I had to master Framer Motion's exit lifecycles to ensure the UI remained stable while the data visually disintegrated.

Balancing "Eerie" vs. "Calm": My goal was a "Void" aesthetic, but early versions looked too scary (like a horror game). I had to fine-tune the Orb's gradient transparency and the snow particle density to ensure it felt like a sanctuary, not a haunted house.

Latency Masking: API calls can be unpredictable. I solved this by decoupling the "Thinking" state from the actual API response time. If the AI is fast, we force a delay to finish the breathing exercise. If the AI is slow, the breathing continues naturally. The user never feels like they are "waiting on a server."

Accomplishments that I am proud of

2D Parallax Physics: I achieved a high-fidelity "3D Window" effect without using heavy 3D libraries. By mapping mouse coordinates to framer-motion springs, the Snow, Orb, and Background layers move at different velocities, creating genuine depth and immersion.

Tactile Typography: I am proud of the micro-interactions. The result text isn't static; individual words glow and physically lift when hovered, making the AI's insight feel like a precious, tangible object.

The Vibe: I successfully built an app that prioritizes feeling over function. In a world of productivity tools, I built a "stopping" tool, and it actually works to make you feel calmer.

What I learned

I learned that Vibe is a feature. You don't always need complex databases or user accounts to make software valuable. Sometimes, the most valuable thing code can do is simply help you feel heard.

What's next for Reflect

  1. Sonic Atmospheres: Currently, I have used a static ambient drone. Next, I want to use the AI's sentiment analysis to dynamically generate the background music (e.g., playing a major key shimmer for "Hope" or a deep bass resonance for "Grief").

  2. Voice Mode: Adding "Whisper to the Void" functionality, allowing users to speak their burdens instead of typing.

  3. The Gallery: A private, local-storage based journal where users can look back on their past reflections as a constellation of colored stars, visualizing their emotional journey over time.

Built With

Share this project:

Updates