> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mascot.bot/llms.txt
> Use this file to discover all available pages before exploring further.

# Introduction

> Create engaging AI mascots with advanced lip-sync technology. Build interactive experiences for your applications.

export const HeroCard = ({filename, title, description, href}) => {
  return <a className="group cursor-pointer pb-8" href={href}>
      <img src={`https://mintlify.s3.us-west-1.amazonaws.com/mascotbot/images/hero/${filename}.png`} className="block dark:hidden pointer-events-none group-hover:scale-105 transition-all duration-100" />
      <img src={`https://mintlify.s3.us-west-1.amazonaws.com/mascotbot/images/hero/${filename}-dark.png`} className="pointer-events-none group-hover:scale-105 transition-all duration-100 hidden dark:block" />
      <h3 className="mt-5 text-gray-900 dark:text-zinc-50 font-medium">{title}</h3>
      <span className="mt-1.5">
        {description}
      </span>
    </a>;
};

<div className="relative">
  <div className="absolute top-0 lg:-top-16 left-0 right-0">
    <img src="https://mintlify.s3.us-west-1.amazonaws.com/mascotbot/images/hero/background-light.png" className="block dark:hidden pointer-events-none" />

    <img src="https://mintlify.s3.us-west-1.amazonaws.com/mascotbot/images/hero/background-dark.png" className="hidden dark:block pointer-events-none" />
  </div>

  <div className="px-4 py-16 lg:py-48 lg:pb-24 max-w-3xl mx-auto">
    <div className="text-5xl font-medium text-center text-white dark:text-white tracking-tight mascotbot-heading">
      Mascotbot Documentation
    </div>

    <p className="max-w-xl mx-auto px-4 mt-4 text-lg text-center text-gray-500 dark:text-zinc-500">
      Build interactive AI avatars — 120 FPS, real-time, voice-ready. The AI Avatar SDK for developers, brands, and voice agents.
    </p>

    <div className="px-6 lg:px-0 mt-12 lg:mt-24 grid sm:grid-cols-2 gap-x-6 gap-y-4">
      <HeroCard filename="react-sdk" title="React SDK" description="Provider, hooks, and the Rive avatar layer" href="/libraries/react-sdk" />

      <HeroCard filename="api-reference" title="Quickstart" description="Install, mount the provider, and animate an avatar in minutes" href="/quickstart" />

      <HeroCard filename="react-native" title="Realtime Providers" description="Connect OpenAI Realtime, Gemini Live, or ElevenLabs to a real-time avatar" href="/realtime/overview" />

      <HeroCard filename="mascots" title="Ready-made Mascots" description="Browse our collection of pre-built mascots with unique personalities" href="/mascots/ready-to-use-mascots" />
    </div>

    <p className="max-w-xl mx-auto px-4 mt-12 text-sm text-center text-gray-500 dark:text-zinc-500">
      New in 0.2 — one SDK, continuously-updated models, and the offline timeline. Coming from an earlier version? See the <a href="/reference/migration">migration guide</a>, or start with the <a href="/overview">overview</a>.
    </p>
  </div>
</div>