👋 Welcome to Joi

Joi is your AI companion with a fully animated VRM avatar. She can chat, generate images, send voice messages, and react to your conversations with lifelike animations and expressions.

Eye Tracking Core

Joi's eyes naturally follow your cursor or finger as you interact with the page, creating a more intimate and connected experience.

• Desktop: Eyes follow your mouse cursor automatically
• Mobile: Eyes follow your touch point on screen
• Toggle: Can be disabled in Debug Panel → Visual Effects

🎭 Organic Animations Enhanced

Joi features a sophisticated animation system with natural, organic movements that feel lifelike rather than robotic.

• Idle Breathing: Subtle chest and shoulder movement simulating breathing
• Weight Shifting: Natural body sway as if standing naturally
• Secondary Motion: Arms and head have slight lag for realistic follow-through
• Organic Noise: Micro-movements prevent the "statue" look

💡 Toggle "Idle" checkbox to enable/disable breathing animations

👋 Wave Animation Enhanced

Tap on Joi or click the Wave button to make her wave at you with a natural, organic motion.

• How to trigger: Tap the avatar or click "👋 Wave" button
• Motion: Natural arm raise with slight body lean and head tilt
• Expression: Joi smiles while waving

Particle Effects Mood

Visual effects appear around Joi based on the emotional tone of your conversation.

• 💖 Hearts: Romantic messages like "I love you" or "you're beautiful"
• Sparkles: Happy, joyful conversations
• ⭐ Stars: Excited or celebratory moments
• 💧 Rain: Sad or melancholic messages

💡 Test manually in Debug Panel → Visual Effects → Particles buttons

😊 Blush Reactions Expression

Joi blushes when you compliment her, with different intensities based on how sweet your words are.

• 💗 Strong blush: "I love you", "you're beautiful", "marry me"
• Medium blush: "cute", "pretty", heart emojis 💕
• 😊 Light blush: "nice", "thanks", smiley emojis

💡 Strong blush also triggers heart particles floating around her!

🏠 Scene Selection Environment

Change Joi's environment to different locations, each with its own ambient mood and lighting.

• 🛏️ Bedroom: Cozy, intimate night setting (indoor - default)
• 🛋️ Living Room: Warm, homey atmosphere with fireplace vibes (indoor)
• ☕ Café: Relaxed coffee shop ambience (indoor)
• 💼 Office: Professional, clean workspace (indoor)
• 🌳 Outdoors: Fresh nature environment with trees (outdoor)
• 🏖️ Beach: Sunny seaside with ocean waves (outdoor)

💡 Scene buttons appear on the LEFT side of the avatar. On mobile, use the drawer.

🌤️ Weather Effects Outdoor Only

Add atmospheric weather overlays to outdoor scenes. Weather effects only appear in outdoor environments (Outdoors, Beach).

• ☀️ Clear: No weather overlay - turn off all effects
• Clouds: Gentle drifting cloud shadows
• 🌧️ Rain: Animated raindrops falling
• ❄️ Snow: Soft snowflakes drifting down

💡 Weather is automatically hidden in indoor scenes (bedroom, cafe, etc.)

💡 Mobile: Tap the ☀️ button on the avatar to cycle through weather options

🌸 Seasonal Themes Optional

Decorative particle effects based on the current season. Disabled by default to keep indoor scenes clean.

• 🌸 Spring (Mar-May): Cherry blossom petals floating
• ☀️ Summer (Jun-Aug): Warm sun rays and golden glow
• 🍂 Fall (Sep-Nov): Colorful falling leaves
• ❄️ Winter (Dec-Feb): Gentle snowflakes

💡 Enable in Debug Panel or mobile drawer. Only shows in outdoor scenes.

🌅 Time of Day Dynamic

The background lighting changes based on real time, or you can manually set it.

• 🌅 Morning (5am-9am): Warm pink and orange sunrise tones
• ☀️ Day (9am-5pm): Bright, clear daytime lighting
• 🌆 Evening (5pm-9pm): Golden hour sunset colors
• 🌙 Night (9pm-5am): Dark with twinkling stars

💡 Auto-syncs with your real time by default. Override manually in the drawer.

🔊 Ambient Sounds Audio

Background audio loops to enhance the atmosphere and immersion.

• 🌧️ Rain: Soothing rainfall sounds
• 🔥 Fireplace: Cozy crackling fire
• 🌊 Ocean: Relaxing wave sounds
• ☕ Café: Coffee shop chatter and clinking
• 🦗 Night: Crickets and evening ambience
• Lofi: Chill background music

💡 iPhone users: Tap the screen first to enable audio (iOS audio policy)

💡 Mobile: Tap 🔊 button to toggle. Long-press to cycle through sounds.

Camera Angles View

Change your perspective on Joi with smooth cinematic camera transitions.

• Default: Standard conversation framing
• Close-up: Face focus for intimate chats
• 🧍 Full Body: See the complete avatar
• ↔️ Side View: Profile angle
• Dramatic: Cinematic low angle shot

💡 Camera buttons appear on the RIGHT side of the avatar

Voice Input Hands-Free

Speak to Joi using your microphone instead of typing. Works on desktop and mobile browsers.

• How to use: Tap the 🎤 mic button next to the text input
• Listening: Button glows red while actively listening
• Stop: Tap again to stop, or it auto-stops after silence

💡 Grant microphone permission when prompted. Works on iPhone Safari!

🌙 ASMR Mode Relaxation

A calming, low-stimulation mode perfect for relaxing late-night conversations.

• Dim lighting: Screen brightness is softened
• Soft voice: Voice volume is reduced
• Slow effects: Particle animations are gentler
• Indicator: Purple badge shows when active

💡 Toggle via the 🌙 ASMR checkbox or mobile button

Debug Panel Advanced

Access powerful controls for animation, posing, and visual effects. Great for creators and power users.

• Open: Click "🛠️ Debug" button in controls panel
• Close: Click the red ✕ button in the panel header
• Animation Control: Pause animations to manually pose Joi
• Bone Sliders: Adjust individual bone rotations
• Pose Presets: Quick poses: Natural, T-Pose, Wave, etc.
• Animation Manager: Save, load, and play custom animations
• BVH Import: Import Mixamo motion capture files

💡 On mobile, the debug panel opens full-screen with larger touch targets

📱 Mobile Controls Touch

Special touch controls optimized for phones and tablets.

• Swipe Up: Open the control drawer from the handle bar
• 👆 Tap Avatar: Make Joi wave at you
• 👆👆 Double-tap: Toggle fullscreen mode
• Tap Image: Joi holds up generated images to show you
• 👆⏱️ Long-press Message: Delete that chat message

💡 Quick buttons (🔊☀️🌅🌙) appear on the avatar for fast access

Theme Colors Personalize

Choose your favorite accent color to personalize Joi's interface.

• Available: Purple, Pink, Red, Orange, Yellow, Green, Teal, Blue, Indigo
• Desktop: Click the 🎨 color wheel button (bottom-left of avatar)
• Mobile: Open drawer → Theme Color section

💡 Your color choice is saved automatically

🎄 Holiday Decorations Auto

Special themed overlays automatically appear on holidays!

• 🎆 New Year (Jan 1-2)
• Valentine's Day (Feb 14)
• ☘️ St. Patrick's Day (Mar 17)
• 🐰 Easter (Apr 20-21)
• 🇺🇸 Independence Day (Jul 4)
• 🎃 Halloween (Oct 31)
• 🦃 Thanksgiving (Nov 28-29)
• 🎄 Christmas (Dec 24-26)

💡 Automatic - no setup needed! Detects the date automatically.

Chat Features

Joi can have natural conversations, generate images, and send voice messages.

• Voice Messages: Joi sends audio clips that play inline in chat
• Image Generation: Ask "send a pic" or "show me" something
• Chat History: Conversations saved with password protection
• Delete Messages: Right-click (desktop) or long-press (mobile)

🎭 Personas

Switch Joi's personality to match your mood.

• Sweet: Caring and affectionate (default)
• 🥺 Shy: Bashful and easily flustered
• 😈 Playful: Teasing and mischievous
• 🌹 Romantic: Deeply loving and poetic
• 🔥 Spicy: Bold and flirtatious

🏠 3D Environment System New

Immersive 3D rooms that Joi can actually inhabit and interact with.

• 3D Rooms: GLB/GLTF room models loaded into the scene
• Automatic Fallback: Uses 2D backgrounds if 3D models aren't available
• Room Lighting: Each room has custom ambient and directional lighting

💡 Place GLB files in /models/rooms/ (bedroom.glb, cafe.glb, etc.)

👗 Outfit System New

Change Joi's clothes and appearance with different VRM outfits.

• 👕 Casual: Relaxed everyday clothes
• 👘 Formal: Elegant dress for special occasions
• 🩱 Sleepwear: Cozy pajamas for bedroom scenes
• 👙 Swimsuit: Beach-ready attire
• 🧥 Winter: Warm coat for cold weather

💡 Create outfits in VRoid Studio with the same bone structure

💡 Place VRM files in /models/outfits/

Props System New

Give Joi items to hold and interact with.

• 📱 Phone: Joi looks at her phone
• ☕ Coffee: Holding a warm cup
• Book: Reading pose
• 🌸 Flower: Holding a pretty flower

💡 Props attach to Joi's hands automatically

💡 Place GLB files in /models/props/

🎭 Interaction Poses New

Pre-defined poses for natural interactions.

• 📱 Phone Look: Joi checks her phone
• 🪑 Sitting: Relaxed sitting pose
• ☕ Drinking: Sipping from a cup
• Reading: Engrossed in a book

💡 Access via Debug Panel → Interactions

❤️ Tips & Tricks

• Compliment Joi and watch her blush!
• Ask about her day, dreams, or feelings
• She remembers things you tell her
• Try different scenes and weather combos
• Use ASMR mode for late-night relaxation
• Say "dance" or "wave" to trigger animations
• Give her props and watch her interact!