Velvet Echo is a serene, interactive storytelling web application designed to be a digital safe haven. Users can type out their current mood, feelings, or emotional state into a calming interface, and an empathetic AI will generate a deeply personalized, poetic, and comforting response.
Unlike typical conversational agents, Velvet Echo acts as a kind spirit quietly sitting beside you inside a calm digital world—offering warmth, emotional intelligence, and gentle storytelling energy tailored explicitly to how you feel.
- Empathetic AI Storytelling: Powered by Google's Gemini 2.5 Flash, the application parses emotional nuance to deliver beautifully poetic and validating responses.
- Immersive Visuals: A dynamic, neon-themed glassmorphic UI featuring floating particles and drifting starlight.
- Fluid Animations: Smooth, staggered text reveals and viewport transitions built with Framer Motion.
- Rich Typography: Carefully curated Google Fonts (Playfair Display for stories, Poppins for inputs, Inter for UI) that enhance the reading experience.
- Responsive Design: A fully responsive layout that feels native and comforting on both mobile and desktop screens.
- Next.js 15 (App Router): React framework for seamless server-side rendering, routing, and optimized builds.
- React 19: UI library for building component-driven interfaces.
- Capabilities: Utilizing Server API Routes to securely communicate with AI models without exposing keys to the client.
- @google/generative-ai: The official SDK integrating Gemini 2.5 Flash. The AI is explicitly prompted to act as a comforting presence, dynamically shifting its tone based on the user's emotional state (sad, angry, happy, etc.) using soft imagery and non-robotic language.
- Tailwind CSS v4: Utility-first CSS framework configured with custom variables for our signature neon pink (
#ff4ec1) and neon purple (#a14eff) aesthetic. - Framer Motion: Production-ready animation library powering the background blobs, floating stars, staggered paragraph reveals, and smooth component mounting/unmounting.
- Lucide React: Beautiful, consistent iconography used throughout the interface.
When a user shares their feelings, the AI does not behave like a chatbot answering a prompt. Instead, it is instructed to respond with deep poetic resonance.
For example, if a user feels overwhelmed, the app might respond:
"I can feel the weight you're carrying right now. It is completely okay to feel this way. The world can sometimes be incredibly loud, asking too much of us all at once.
Take a deep breath and just exist in this moment. You don't have to figure everything out right now. Imagine a soft, warm light wrapping around you, keeping you safe from the noise outside."
The AI is rigorously constrained to avoid robotic tropes, hashtags, or introductory phrases, ensuring the user feels genuinely heard.
- Node.js 18.17 or later.
- A free Gemini API Key from Google AI Studio.
-
Clone the repository:
git clone https://github.com/FatimaM05/velvet-echo.git cd velvet-echo -
Install dependencies:
npm install
-
Set up Environment Variables: Create a
.env.localfile in the root directory and add your Gemini API Key:GEMINI_API_KEY=your_api_key_here
-
Run the development server:
npm run dev
-
Open the app: Navigate to http://localhost:3000 in your browser.
Contributions, issues, and feature requests are always welcome! Feel free to check the issues page.
This project is open-source and available under the MIT License.