🎭 PNG Tuber
A virtual avatar that reacts to your voice, perfect for faceless streaming or V-Tuber style content.
Overview
PNG Tuber displays an animated avatar that:
- Detects when you're speaking
- Switches between idle and speaking images
- Adds personality without showing your face
- Works with Discord voice detection
How It Works
- Connect your Discord account
- Select or upload avatar images
- Join a Discord voice channel
- Your avatar animates when you speak!
Requirements
- Discord account
- Discord voice channel
- Microphone
- Two avatar images (idle and speaking)
Settings
Avatar Selection
| Setting | Description | Default |
|---|---|---|
| Selected Avatar | Preset or custom avatar | avatar1 |
| Custom Idle Image | Your own idle image URL | (empty) |
| Custom Speaking Image | Your own speaking image URL | (empty) |
Transition Settings
| Setting | Description | Default |
|---|---|---|
| Transition Type | How images swap | Crossfade |
| Transition Speed | Swap duration (ms) | 150 |
Animation Settings
| Setting | Description | Default |
|---|---|---|
| Speaking Animation | Movement while talking | Wobble |
Animation options:
- None: Static image
- Single Bounce: One bounce when speaking starts
- Continuous Bounce: Keeps bouncing while speaking
- Breathe: Gentle breathing motion
- Wobble: Side-to-side movement
- Pulse: Size pulsing
- Head Bob: Up-down motion
Visual Settings
| Setting | Description | Default |
|---|---|---|
| Dim When Silent | Darken when not speaking | On |
| Scale | Avatar size (50-200%) | 100 |
| Offset X | Horizontal position | 0 |
| Offset Y | Vertical position | 0 |
Setup Instructions
Step 1: Connect Discord
- Go to Utilities → PNG Tuber in your dashboard
- Click Connect Discord
- Authorize Citrus to access your Discord
- Return to the dashboard
Step 2: Choose Your Avatar
Use a Preset:
- Select from available preset avatars
- Preview appears immediately
Use Custom Images:
- Upload your idle image
- Upload your speaking image
- Images should be the same size
- PNG format with transparency recommended
Step 3: Configure Animations
- Select your transition type
- Choose a speaking animation
- Adjust transition speed
- Enable/disable dim when silent
Step 4: Add Overlay to OBS
- Copy the PNG Tuber overlay URL
- In OBS, add a Browser Source
- Paste the URL
- Set dimensions: 500 x 500 (or match your image)
- Position your avatar
Step 5: Activate
- Join a Discord voice channel
- Your avatar will detect your voice
- Test by speaking—avatar should animate!
Creating Custom Avatars
Image Requirements
- Format: PNG (transparent background)
- Size: Same dimensions for both images
- Resolution: 500x500 to 1000x1000 recommended
- Style: Clear difference between idle and speaking
Tips for Good Avatars
- Clear Difference: Speaking should look distinct from idle
- Transparent Background: Easier to overlay
- Consistent Style: Both images should match
- Simple Animation: Don't overcomplicate
Common Avatar Styles
| Style | Description |
|---|---|
| Open/Closed Mouth | Most common—mouth changes |
| Full Expression | Face changes entirely |
| Abstract | Non-human representations |
| Logo-Based | Your brand animates |
Discord Integration
Why Discord?
Discord's voice activity detection is:
- Reliable and accurate
- Low latency
- Works across platforms
- Doesn't require additional software
How to Use
- Open Discord on your computer
- Join any voice channel
- Make sure your mic is working in Discord
- The overlay detects your voice activity
Permissions Needed
- Voice activity status
- User profile (for connection)
Troubleshooting
Avatar Not Animating
| Issue | Solution |
|---|---|
| Not responding to voice | Check Discord voice channel connection |
| Discord not connected | Reconnect Discord in settings |
| Mic not working | Test mic in Discord |
Display Issues
| Issue | Solution |
|---|---|
| Images not showing | Check image URLs are valid |
| Wrong size | Adjust scale setting |
| Wrong position | Modify offset X/Y |
Animation Issues
| Issue | Solution |
|---|---|
| Jerky transitions | Increase transition speed |
| No animation | Select animation other than "None" |
| Too much movement | Choose subtler animation |
Best Practices
- Test Before Streaming: Verify everything works
- Use Clear Differences: Make idle/speaking distinct
- Match Your Brand: Avatar should fit your style
- Keep It Simple: Subtle animations often work best
- Consider Accessibility: Ensure avatar doesn't distract
FAQ
Q: Can I use this without Discord? A: Currently Discord is required for voice detection.
Q: What image formats are supported? A: PNG is recommended; JPG and GIF also work.
Q: Can I have more than two images? A: Currently only idle and speaking; more expressions coming soon.
Q: Does it work with voice changers? A: Yes, as long as Discord detects your voice.
Q: Can I use animated GIFs? A: Yes, but transitions may be less smooth.
Q: Do I need to be in a Discord call? A: You need to be in a voice channel, but not necessarily with others.