gentle-avatar

byPAWAN 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”** 🔥

LandingDemo
Landing

Comments (0)

No comments yet. Be the first!

Architecture

Service Dependenciesv2
External
Storage
LiteLLM Gateway :4000
Backend :7011
Frontend :7012
Client
GPT 5.4
ElevenLabs TTS
Langchain
MySQL :3306
LiteLLM
FastAPI Server
React App
Three.js Avatar
GSAP Animations
Browser
Web Speech API
Landing design preview
Landing: View Intro
Landing: Watch Demo Button
Demo: Explore Chat
Demo: Type Question
Demo: View Avatar Response
Demo: Hear Voice Output
Demo: View Waveform
Landing: Scroll How It Works
Landing: View Features
Landing: View Power Fact
Landing: Click Try Now