Embeddable Anty animation system with 18 emotions, chat integration, particle effects, and anty->search bar morphing. Integrated (replaceable) chat bar element. FlappyAF game is WIP.
- Presets - Quick setup with
default,hero,assistant,icon,logopresets - 18 Expressive Emotions - Happy, sad, angry, excited, celebrate, pleased, shocked, spin, wink, idea, jump, nod, headshake, look-around, look-left, look-right, back-forth, and smize
- Chat Integration with OpenAI - Built-in chat panel with emotion mapping for AI-driven responses
- Particle Effects - Sparkles, confetti, love hearts, and feeding particles
- Search Bar Morph - Seamlessly morph from character into a fully functional search bar
- Super Mode - Power-up transformation with golden glow effects
- Logo Mode - Static logo state for branding use (no animations, no glows, can still receive animations)
- Customizable Size - Scales from tiny icons to large displays (24px to 320px+)
- Shadow and Glow Effects - Configurable ambient lighting effects
- Power On/Off Transitions - Animated state changes
- Idle Animations - Continuous floating and occasional blink animations
1. Add as a git subtree:
# Add anty to your project (one-time setup)
git subtree add --prefix=packages/anty https://github.com/antflydb/anty.git main --squash
# Pull updates later
git subtree pull --prefix=packages/anty https://github.com/antflydb/anty.git main --squash2. Add path alias to your tsconfig.json:
{
"compilerOptions": {
"paths": {
"@anty": ["./packages/anty/packages/anty-embed/src/index.ts"]
}
}
}3. Import and use:
import { AntyCharacter } from '@anty';import { useRef } from 'react';
import { AntyCharacter, type AntyCharacterHandle } from '@anty';
function App() {
const antyRef = useRef<AntyCharacterHandle>(null);
const handleClick = () => {
antyRef.current?.playEmotion('happy');
};
return (
<div>
<AntyCharacter
ref={antyRef}
size={160}
expression="idle"
showShadow={true}
showGlow={true}
/>
<button onClick={handleClick}>Make Happy</button>
</div>
);
}Use presets for quick setup with sensible defaults:
<AntyCharacter preset="default" /> // Standard (160px), with shadow & glow
<AntyCharacter preset="hero" /> // Large (240px), with shadow & glow - for landing pages
<AntyCharacter preset="assistant" /> // Small (80px), with shadow - for chat corners
<AntyCharacter preset="icon" /> // Tiny (32px), no effects - for navbars
<AntyCharacter preset="logo" /> // Static logo mode - for brandingPresets can be overridden with explicit props:
<AntyCharacter preset="assistant" size={100} /> // Uses assistant preset but with size=100| Preset | Size | Shadow | Glow | Notes |
|---|---|---|---|---|
default |
160 | ✓ | ✓ | Standard display |
hero |
240 | ✓ | ✓ | Large centered display |
assistant |
80 | ✓ | - | Small chat assistant |
icon |
32 | - | - | Tiny, still animated |
logo |
- | - | - | Static, logoMode enabled |
| Emotion | Description |
|---|---|
happy |
Wiggle rotation with happy eyes |
excited |
Jump with spin, no confetti |
celebrate |
Epic celebration with confetti burst |
pleased |
Gentle bounce with happy eyes |
smize |
Eye-only smile (smile with eyes) |
sad |
Drooping motion with teardrop |
angry |
Drop and shake animation |
shocked |
Jump with bracket separation and wide eyes |
spin |
Y-axis 360 spin with jump |
jump |
Classic Mario-style jump |
idea |
Aha moment with lightbulb emoji |
wink |
Asymmetric eye wink with tilt |
nod |
Vertical head bob (yes) |
headshake |
Y-axis rotation shake (no) |
look-around |
Look left then right (eye-only) |
look-left |
Eye-only look left |
look-right |
Eye-only look right |
back-forth |
Look left then right with considering eyes |
| Prop | Type | Default | Description |
|---|---|---|---|
preset |
'default' | 'hero' | 'assistant' | 'icon' | 'logo' |
- | Preset configuration (see Presets section) |
expression |
ExpressionName |
'idle' |
Current expression/emotion to display |
size |
number |
160 |
Character size in pixels |
showShadow |
boolean |
true |
Whether to show shadow |
showGlow |
boolean |
true |
Whether to show glow effects |
frozen |
boolean |
false |
Freeze all animations for static display |
logoMode |
boolean |
false |
Logo mode with full color eyes, no animations |
isSuperMode |
boolean |
false |
Whether super mode is active |
debugMode |
boolean |
false |
Whether to show debug overlays |
searchEnabled |
boolean |
false |
Enable integrated search bar |
searchPlaceholder |
string |
'Search...' |
Search bar placeholder text |
searchShortcut |
string |
- | Keyboard shortcut indicator (e.g., "Cmd+K") |
searchConfig |
SearchBarConfig |
- | Search bar configuration |
onEmotionComplete |
(emotion: string) => void |
- | Callback when emotion animation completes |
onSearchOpen |
() => void |
- | Callback when morph to search starts |
onSearchCloseComplete |
() => void |
- | Callback when morph back to character completes |
| Method | Description |
|---|---|
playEmotion(emotion) |
Play an emotion animation |
morphToSearchBar() |
Morph character into search bar |
morphToCharacter() |
Morph search bar back to character |
setSuperMode(scale) |
Enter/exit super mode |
powerOff() |
Power off the character |
wakeUp() |
Wake up the character |
pauseIdle() |
Pause idle animations |
resumeIdle() |
Resume idle animations |
killAll() |
Stop all animations |
spawnSparkle(x, y, color) |
Spawn a sparkle particle |
spawnLoveHearts() |
Spawn love heart particles |
spawnConfetti(x, y, count) |
Spawn confetti particles |
<AntyCharacter
searchEnabled={true}
searchPlaceholder="Ask anything..."
searchShortcut="Cmd+K"
searchConfig={{
width: 642,
height: 70,
borderRadius: 10,
innerRadius: 8,
bracketScale: 0.14,
borderWidth: 2.75,
}}
onSearchOpen={() => console.log('Search opened')}
onSearchCloseComplete={() => console.log('Search closed')}
/>
// Trigger programmatically
antyRef.current?.morphToSearchBar();
antyRef.current?.morphToCharacter();// Enter super mode with 1.45x scale
antyRef.current?.playEmotion('super');
antyRef.current?.setSuperMode(1.45);
// Exit super mode
antyRef.current?.setSuperMode(null);// Power off
<AntyCharacter expression="off" />
// Power on (idle)
<AntyCharacter expression="idle" />For static branding use without idle animations or shadow or glows- can still be sent emotion animations:
<AntyCharacter logoMode={true} />npm run devOpen http://localhost:3000 for the main playground, or http://localhost:3000/embed for the embed demo.
cd packages/anty-embed && npm testA minimal test app exists at examples/test-consumer/ to verify imports work correctly:
cd examples/test-consumer
npm install
npm run dev- React - UI component library
- GSAP - Animation engine for smooth, performant animations
- TypeScript - Type-safe development
- OpenAI - Chat integration with emotion mapping
- Vitest - Unit testing
MIT