The AppRoom Mascot - Your AI Marketplace Companion
Ari is a friendly robot who represents everything AppRoom stands for: trust, rewards, and community. Designed with Disney-level character principles, Ari helps make AI skill building more approachable and fun.
Friendly and welcoming - happy eyes with gentle smile
<AppRoomMascot
size={120}
variant="default"
color="primary"
animated={true}
/>Ari represents our L0-L4 trust verification system. Every skill is verified, every transaction is secure.
Ari celebrates your success. With 85% revenue share and instant payouts, builders earn more.
Ari makes AI accessible. Whether you're browsing, building, or earning, Ari is here to help.
Installing skill...
Show during installation flow
Browsing skills
Use in marketplace browse view
Payout received!
Show on earnings page
L4 Verified
Display with trust badges
Publishing skill...
Show during skill creation
First skill published!
Celebrate milestones
Navbar icon
Use in navigation bars
Small avatar
Profile pictures, tooltips
"Earn 85% on every subscription"
Lead with earnings, be specific about value
"L4 Verified - KYC Complete"
Be transparent about trust levels
"Your skill just earned $29!"
Celebrate wins, big or small
"Make money with AI"
Too vague, not specific enough
"Trust us, we're secure"
Show don't tell - use L0-L4 system
"Our platform is the best"
Use data, not superlatives (show 85% vs 70%)
"I'm here to help every AI developer monetize their skills. Whether you're publishing your first MCP server or earning your 100th payout, I'll be with you every step of the way."
85%
Revenue Share
L0-L4
Trust Verified
Instant
Payouts
1. Import the component:
import { AppRoomMascot } from '@/components/AppRoomMascot';2. Use in your component:
<AppRoomMascot
size={80}
variant="earning"
color="primary"
animated={true}
/>3. Available props:
size: number (default: 80) - Size in pixelsvariant: 'default' | 'browsing' | 'installing' | 'earning' | 'verified' | 'building' | 'celebrating' | 'minimal'color: 'primary' | 'secondary' | 'accent' | 'monochrome' | 'white'animated: boolean (default: true)className: string - Additional CSS classes