gentle-avatar
PAWAN JANGIRठीक है — मैं तुम्हें **पूरी तरह fresh, साफ और structured MASTER PROMPT** दे रहा हूँ, जिसे तुम सीधे use कर सकते हो 👇 (ये पहले वाले से भी refined और बेहतर है) --- # 🚀 🔥 EDUVORA CINEMATIC AI WEBSITE – MASTER PROMPT (FINAL) ```txt Build a futuristic AI-powered website called “Eduvora” that delivers a cinematic, interactive learning experience. OBJECTIVE: Create a premium AI Tutor platform that combines storytelling, animation, voice interaction, and a realistic talking avatar. The website should feel like a mix of a news studio, movie intro, and AI assistant. ----------------------------------- 🎨 DESIGN & UI STYLE ----------------------------------- - Dark theme (deep navy, black, purple gradients) - Neon glow accents (blue/purple) - Glassmorphism UI (blur + transparency cards) - Smooth animations and transitions - Clean, modern typography - Fully responsive (mobile + desktop) ----------------------------------- 🎬 CINEMATIC SCROLL EXPERIENCE ----------------------------------- Use scroll-based animation (GSAP ScrollTrigger or similar): Scene 1: INTRO - Animated headline: “Welcome to Eduvora” - Subtext fades in: “The Future of AI Learning” - Background: moving particles + light streaks - Parallax scrolling effect Scene 2: AVATAR ENTRY - Realistic 3D avatar appears (center screen) - Idle animation (breathing, blinking, slight head movement) - Subtitle appears: “Main hoon aapka AI Tutor” Scene 3: FEATURE STORY - Animated sequence instead of static cards: - Microphone icon → “Bol ke pucho” - Brain icon → “AI samjhega” - Avatar gesture → “Main samjhaunga” - Smooth transitions between elements Scene 4: LIVE DEMO SIMULATION - Chat bubble appears with user question - Avatar responds with: - Voice output - Subtitle text - Talking animation (lip sync) Scene 5: FINAL CTA - Big cinematic text: “Future of Learning Starts Here” - Glowing animated button: “Start Now” ----------------------------------- 🧍 3D AVATAR SYSTEM ----------------------------------- - Use realistic human-like avatar (GLB format) - NOT in T-pose (natural standing posture) - Include: - Idle animation - Talking animation - Eye blinking and facial expressions - Camera view: medium shot (waist-up framing) - Lighting: soft studio lighting ----------------------------------- 🎙️ VOICE INTERACTION SYSTEM ----------------------------------- - Use browser speech recognition (Web Speech API) - Convert voice → text - Send text to AI backend - Receive response - Convert response → human-like voice ----------------------------------- 🔊 TEXT-TO-SPEECH ----------------------------------- - Use realistic AI voice (e.g., ElevenLabs style) - Natural tone (like teacher/news anchor) - Play audio response in sync with avatar ----------------------------------- 🗣️ LIP SYNC (IMPORTANT) ----------------------------------- - Sync avatar mouth movement with audio - Use morph targets or viseme-based animation - Trigger speaking animation when audio plays ----------------------------------- 🧠 AI RESPONSE BEHAVIOR ----------------------------------- Use this system instruction: “You are a professional AI tutor. Speak clearly, confidently, and intelligently. Use simple Hindi mixed with English. Explain concepts in short, structured, easy-to-understand ways. Sound like a smart teacher or news anchor.” ----------------------------------- 🎥 BACKGROUND ANIMATION ----------------------------------- - Moving particles - Glowing lines - Digital grid - Subtle continuous motion loop ----------------------------------- 📄 WEBSITE STRUCTURE ----------------------------------- 1. Hero Section: - Title: Eduvora AI Tutor - Subtitle: Voice se pucho, AI se samjho - Buttons: Try Now, Watch Demo - Avatar visible 2. Features Section: - Voice Learning - AI Avatar Teacher - Fast Answers - All Subjects 3. How It Works: - Step 1: Speak - Step 2: AI processes - Step 3: Avatar explains 4. Demo Section: - Simulated chat interaction - Avatar response with voice 5. CTA Section: - “Start Learning Smarter” - Action button ----------------------------------- ⚡ PERFORMANCE OPTIMIZATION ----------------------------------- - Lazy load 3D assets - Optimize animations for smooth FPS - Compress media files - Ensure fast loading on mobile ----------------------------------- 💡 EXTRA FEATURES ----------------------------------- - Daily “Power Fact” section - Voice waveform animation while speaking - Subtitle captions for avatar speech - Smooth transitions between sections ----------------------------------- 📱 FINAL OUTPUT ----------------------------------- - Fully working modern AI website - Cinematic animation experience - Realistic avatar interaction - Voice-enabled AI tutor - Clean and premium UI ``` --- # 🎯 अब क्या करना है 👉 इस prompt को: * Lovable / Bolt / Framer AI / Web builder में paste करो * Generate करो * फिर avatar + voice APIs connect करो --- # 🚀 आगे का level (अगर सच में powerful बनाना है) मैं तुम्हें next में दे सकता हूँ: * ✅ Ready avatar file (download link) * ✅ Best AI voice setup * ✅ Backend API (chat system) * ✅ Free hosting (live website) --- 👉 बस बोलो: **“Next setup de”** 🔥
Comments (0)
Sign in to leave a comment
Project Tasks15
Align Global Theme Colors
As a developer, I want a centralized Tailwind CSS theme configuration with the project's color palette (#0D1B2A background, #1B263B surface, #E0E1DD text, #FF6F61 accent, #415A77 muted) so that all components share a consistent cinematic visual identity.
Build AI Chat Backend API
As a learner, I want my text or voice-transcribed questions sent to a FastAPI endpoint that returns AI-generated response text so that the tutor can answer my questions intelligently.
Build Daily Power Fact API
As a guest user, I want to see a timezone-consistent Daily Power Fact on the Landing page that rotates daily so that each visit offers a fresh and relevant learning insight.
Implement Landing Page UI
As a guest user, I want to see the Landing page rendered faithfully from the existing JSX design (v2) including hero section, navigation, Daily Power Fact teaser, and call-to-action so that I understand the product and am compelled to try the Demo.
Implement Demo Page UI
As a learner, I want to see the Demo page rendered faithfully from the existing JSX design (v2) including the chat interface, avatar viewport, subtitle panel, waveform area, and voice input controls so that I can immediately begin interacting with the AI tutor.
Integrate ElevenLabs TTS API
As a learner, I want the AI tutor's text responses converted to realistic speech audio via ElevenLabs TTS so that I can hear the tutor speak in a professional, natural-sounding voice.
Build Background Particle Animation
As a guest user, I want to see an animated background particle and grid system on the Landing and Demo pages so that the interface feels futuristic and cinematic without impacting performance.
Integrate GSAP Scroll Animations
As a guest user, I want cinematic scroll-triggered animations on the Landing page sections so that the experience feels immersive and professionally produced as I explore the page.
Build 3D Avatar Component
As a learner, I want to see a realistic 3D AI tutor avatar rendered via Three.js with a loaded GLB model supporting idle and talking animation states so that the interaction feels like speaking to a real news-anchor style instructor.
Integrate Web Speech API Input
As a learner, I want to speak my question directly into the browser using the Web Speech API so that I can interact with the AI tutor hands-free without typing.
Connect Daily Fact Frontend
As a guest user, I want the Landing page to fetch and display the current Daily Power Fact from the backend API so that the content is dynamic and timezone-aware.
Implement Avatar Lip-Sync System
As a learner, I want the 3D avatar's mouth to synchronize with AI-generated audio using viseme sequences and morph-target blending so that the tutor's speech appears natural and realistic.
Build Voice Waveform Visualizer
As a learner, I want to see a real-time animated audio waveform during voice input and AI speech playback so that I have clear visual feedback of the active audio state.
Wire Chat Flow End-to-End
As a learner, I want my typed or spoken question to flow through voice input, the chat API, ElevenLabs TTS, avatar lip-sync, and subtitle display in a seamless end-to-end interaction so that the Demo page functions as a complete AI tutor session.
Optimize Mobile Performance
As a mobile learner, I want the Demo and Landing pages to implement lazy-loading for heavy assets and a reduced-motion fallback for animations so that the experience is smooth and accessible on lower-powered devices.
Welcometogentle-avatar
Voice se pucho, AI se samjho
How It Works
From voice to knowledge in four simple steps — experience AI-powered learning like never before.
Speak Your Question
Use your voice to ask anything — the Web Speech API captures your words naturally in Hindi or English.
AI Responds Instantly
Our AI tutor processes your question and generates a clear, structured response in text and voice.
Avatar Animates
A realistic 3D avatar speaks the answer back to you with synchronized lip movements and natural gestures.
Learn & Grow
Absorb knowledge through an immersive, cinematic experience that makes complex concepts easy to understand.
Key Features
Voice Input
Ask questions naturally using your voice. Powered by the Web Speech API, gentle-avatar understands both Hindi and English for a seamless bilingual experience.
Realistic Lip Sync
Watch the 3D avatar speak with perfectly synchronized mouth movements using viseme and morph-target cues for a lifelike tutoring session.
AI-Powered Responses
Get intelligent, context-aware answers generated by advanced AI. Receive both text and voice responses tailored to your learning needs.
Mobile Optimized
Enjoy a premium experience on any device. Lazy-loaded 3D assets and reduced-motion fallbacks keep performance smooth on mobile.
Daily Power Fact
“The human brain processes speech at roughly 150 words per minute, but can comprehend up to 400 words per minute when listening — making voice-based AI tutoring one of the fastest ways to absorb knowledge.”
July 11, 2026 · UTC
What Our Learners Say
Real experiences from students and professionals using gentle-avatar
Ready to Learn with AI?
Experience the future of interactive learning. Ask questions by voice, get instant AI-powered answers, and engage with a realistic avatar tutor — all in one place.
No sign-up required • Free to explore • Works on all devices
No comments yet. Be the first!