What kind of interactions can the mascot perform?

The mascot supports gaze tracking (following the cursor), scroll-reactive emotional sequences, click responses, and complex 'performances' which are sequences of emotions and gestures.

Can the mascot's performance be optimized for mobile devices?

Yes, the integrator includes mobile-responsive patterns that allow you to adjust target FPS and disable heavy features like gaze tracking to ensure smooth performance on handheld devices.

How does the mascot sync with AI chat responses?

It includes an LLM Emotion Plugin pattern that can automatically detect sentiment from provider responses (like Anthropic or OpenAI) and trigger corresponding emotional transitions.

Which frameworks does the Mascot Integrator support?

The skill provides optimized implementation patterns for React (including Next.js App Router), Vue 3, Svelte, and vanilla JavaScript environments.

Mascot Integrator

Name: Mascot Integrator
Author: joshtol

byjoshtol

•

デザインツール

Integrates the emotive-mascot engine into web applications and frameworks to create responsive, particle-based AI avatars.

概要

The Mascot Integrator skill empowers developers to embed dynamic, expressive AI mascots into any web project using the emotive-engine. It provides specialized implementation patterns for popular frameworks like React, Vue, and Svelte, as well as vanilla JavaScript, facilitating the creation of interactive interfaces that respond to user behavior and LLM-driven sentiment. Whether you are building a supportive healthcare assistant, an encouraging learning coach, or a responsive retail guide, this skill offers the configuration patterns and troubleshooting expertise needed to humanize digital interactions through fluid, emotion-driven motion.

主な機能

Framework-specific setup patterns for React, Vue, Svelte, and Vanilla JS
Pre-configured performance sequences for specific industry use cases
Comprehensive troubleshooting and performance optimization guidance
Interactive gaze tracking, scroll reactivity, and click-based animations
LLM integration for sentiment-driven emotional responses and transitions
10 GitHub stars

ユースケース

Integrating a sentiment-aware AI assistant into a healthcare or patient portal
Creating an interactive, encouraging mascot for educational and learning platforms
Adding a responsive visual guide to e-commerce checkout and retail workflows

概要

主な機能

Framework-specific setup patterns for React, Vue, Svelte, and Vanilla JS
Pre-configured performance sequences for specific industry use cases
Comprehensive troubleshooting and performance optimization guidance
Interactive gaze tracking, scroll reactivity, and click-based animations
LLM integration for sentiment-driven emotional responses and transitions
10 GitHub stars

ユースケース

Integrating a sentiment-aware AI assistant into a healthcare or patient portal
Creating an interactive, encouraging mascot for educational and learning platforms
Adding a responsive visual guide to e-commerce checkout and retail workflows