/* Custom font declarations */
@font-face {
  font-family: "Rawlinson";
  src: url("https://app.mascot.bot/fonts/RawlinsonCond.woff2") format("woff2"),
    url("https://app.mascot.bot/fonts/RawlinsonCond.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Custom heading style for main title */
.mascotbot-heading {
  font-family: "Rawlinson", sans-serif;
} 

.mint-pointer-events-none {
    pointer-events: none
}
.mint-absolute {
    position: absolute
}
.mint-relative {
    position: relative
}
.mint-left-0 {
    left: 0px
}
.mint-right-0 {
    right: 0px
}
.mint-top-0 {
    top: 0px
}
.mint-mx-auto {
    margin-left: auto;
    margin-right: auto
}
.mint-mt-1 {
    margin-top: 0.25rem
}
.mint-mt-1\.5 {
    margin-top: 0.375rem
}
.mint-mt-12 {
    margin-top: 3rem
}
.mint-mt-4 {
    margin-top: 1rem
}
.mint-mt-5 {
    margin-top: 1.25rem
}
.mint-block {
    display: block
}
.mint-grid {
    display: grid
}
.mint-hidden {
    display: none
}
.mint-max-w-3xl {
    max-width: 48rem
}
.mint-max-w-xl {
    max-width: 36rem
}
.mint-cursor-pointer {
    cursor: pointer
}
.mint-gap-x-6 {
    column-gap: 1.5rem
}
.mint-gap-y-4 {
    row-gap: 1rem
}
.mint-px-4 {
    padding-left: 1rem;
    padding-right: 1rem
}
.mint-px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem
}
.mint-py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem
}
.mint-pb-8 {
    padding-bottom: 2rem
}
.mint-text-center {
    text-align: center
}
.mint-text-5xl {
    font-size: 3rem;
    line-height: 1
}
.mint-text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem
}
.mint-font-medium {
    font-weight: 500
}
.mint-tracking-tight {
    letter-spacing: -0.025em
}
.mint-text-gray-500 {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity))
}
.mint-text-gray-900 {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity))
}
.mint-transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
}
.mint-duration-100 {
    transition-duration: 100ms
}
.mint-group:hover .group-hover\:mint-scale-105 {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.dark\:mint-block:is(.dark *) {
    display: block
}
.dark\:mint-hidden:is(.dark *) {
    display: none
}
.dark\:mint-text-zinc-50:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(250 250 250 / var(--tw-text-opacity))
}
.dark\:mint-text-zinc-500:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(113 113 122 / var(--tw-text-opacity))
}
@media (min-width: 640px) {
    .sm\:mint-grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}
@media (min-width: 1024px) {
    .lg\:mint--top-16 {
        top: -4rem
    }
    .lg\:mint-mt-24 {
        margin-top: 6rem
    }
    .lg\:mint-px-0 {
        padding-left: 0px;
        padding-right: 0px
    }
    .lg\:mint-py-48 {
        padding-top: 12rem;
        padding-bottom: 12rem
    }
    .lg\:mint-pb-24 {
        padding-bottom: 6rem
    }
}

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

Introduction

Mascotbot Documentation

Below is a selection of pre-made mascots available to all subscribers. Feel free to use them for testing, early integration, or commercial projects while we craft your custom mascot. Each one offers unique personality traits, different visual styles, and multiple potential use cases.

Ready-to-Use Mascots

Meet Our Ready-to-Use Mascots: A Quick Start Guide

Viseme Prediction API for facial animation and speech synthesis

API Reference

Takes base64 encoded audio and streams viseme (mouth shapes) predictions using Server-Sent Events (SSE).
Requires valid API key.


Process Audio for Visemes

Converts text to speech using various TTS engines and generates synchronized viseme data for facial animation.
Returns real-time streaming data via Server-Sent Events (SSE) for low-latency playback.

Supports multiple TTS engines:
- **mascotbot** (default): Built-in TTS engine
- **elevenlabs**: High-quality TTS with custom voices  
- **cartesia**: Alternative TTS provider

The response streams both audio chunks (base64-encoded PCM) and viseme timing data.


Generate Speech and Visemes

Learn how to connect any TTS to our lipsync API for animating mascots.

Integrating TTS & Lipsync

Integrating Lipsync API with Any TTS for Mascot Animation

Mascotbot delivers a private, cloud-based ML API for lightning-fast, real-time lipsync aligned with speech, React and React Native SDK for display and control. We use Rive for character animation, ensuring top performance across browsers and mobile devices

Getting Started

Libraries

Ready-made Mascots

Mascotbot Documentation

React SDK

React Native SDK

Ready-made Mascots

API Reference