Just a picture
PNG or SVG for your profile picture, blog articles, stickers or thumbnails. Needs only your browser.
LAB EXPERIMENT & GUIDE20 MIN BUILD
Make your own animated mascot free, in about 20 minutes.
Design a character in your browser, give it 23 ready moods, and bring it live onto your website with procedural SVG animations. No drawing, no login, and zero blurry pixels.
Interactive Character Preview
Test the live procedural SVG mascot below. Switch between ready moods to inspect the eye physics, breathing rhythm, and reaction dynamics.
Current mood: idle
Switch mood state:
01 / WHAT YOU’LL MAKE
A little character that lives on your website.
Bible Strong Avatar Lab is a free studio that runs in your browser. You pick a body shape, configure the eyes, and choose colors. The studio does the procedural animation: natural blinking, breathing, and 23 moods ranging from sleeping to celebratory dancing. Then you export it as clean SVG code or a compact JSON bundle.
Live on your website
Moves, blinks, breathes, and reacts to user interactions, scrolls, and form events with React or vanilla JavaScript.
Your own Studio
Run the Avatar Lab Studio locally on your machine, tweak procedural geometry, and work completely offline.
02 / THE MASCOT TEMPLATE
Plan it first. Two minutes.
Opening the editor without a plan leads to dragging random sliders. Run this prompt through ChatGPT or Claude first to get an exact design card specifying starter shape, colors, and key animation triggers.
PROMPT 1 · MASCOT TEMPLATE (CHATGPT OR CLAUDE)
You are a character designer. Help me design a simple mascot that I will build in Bible Strong Avatar Lab (avatars.bible-strong.app).
About me:
- My brand or page: [your brand or website name]
- What I do: [e.g. Web Platform Engineer / modern web applications]
- My audience: [clients, engineers, recruiters]
- Brand colours: [#2349c6, #000000, #f7f5ef, or "suggest some"]
- Vibe in 3 words: [friendly, focused, playful]
How the Studio works (only use these options):
- Bodies are simple 3D-looking shapes. Starters I can copy: Strobi (round ball), Freddy (block with ears), Citrus (drop), Nova (bean), Grok bot (black ball), Sunee (sun with dots), Kirby (puffy), Cloudee (cloud), Cubee (soft cube), Onee (soft blob).
- I can change size, roundness, rotation, body colour, eye colour, and each eye's width, height, position, spacing and tilt. I can add extra simple shapes, like ears.
- Faces have eyes only, no mouth. Personality comes from shape, colour and eyes.
- Ready animations: sleeping, waking, idle, listening, thinking, searching, working, excited, bored, suspicious, angry, drowsy, happy, curious, confused, surprised, proud, shy, sad, laughing, scared, playful, celebrate.
Give me a MASCOT CARD with:
1. A name that is easy to say, and a one-line personality
2. Which starter to copy, and why
3. Body: shape changes, body colour (hex), eye colour (hex)
4. Eyes in plain words (size, spacing, tilt)
5. 5 animations from the list, and the moment each one plays on my website or in my videos
6. 3 places to use the mascot
7. A checklist for the Studio tabs: Pose, Expressions, Animations, Export
Keep it short and simple.03 / BUILD IT IN THE STUDIO
Build it in Avatar Lab.
Open avatars.bible-strong.app in your browser. No account required; progress saves automatically in local storage.
1
Pick your starter
Choose Strobi (friendly ball), Freddy (block with ears), Citrus (drop), Nova (bean), or Grok bot (black ball). Double-click to begin editing.
2
Shape & color
Set your body color (e.g., cobalt #2349c6 or AMOLED dark #96adff), adjust roundness, and rotate or position on the canvas.
3
Eyes do most of the acting
Set width, height, spacing, and tilt. Closer eyes look cute and playful; slightly tilted eyes look cheeky and focused.
4
Expressions & animations
Choose from 23 ready animations: idle, waking, excited, listening, thinking, celebrate, and sleep. Blinking is handled procedurally.
04 / CODE INTEGRATION
Put it on your website.
Download your character's .avatar.json or use the procedural React SVG component directly. Use this prompt with Cursor, Claude Code, or Antigravity to wire it up:
PROMPT 3 · REACT OR NEXT.JS INTEGRATION
Add my animated mascot to this website.
- My mascot file: avatar.avatar.json, which I put in src/
- Package: @bible-strong/avatar-react (on npm). Docs: github.com/smontlouis/bible-strong-avatar-lab
- Use createAvatar(definition) and import '@bible-strong/avatar-react/styles.css' once.
What I want:
1. Show the mascot in the bottom-right corner of every page, 120px wide.
2. Start with the animation "idle". Read my JSON first and list the animation names it has.
3. If this is a Next.js or React site, put the mascot in a client component.
4. If the visitor prefers reduced motion, show a still expression instead.
5. On phones, it must not cover any button.
Then tell me the command to run the site and what I should see.05 / INTERACTIVE REACTIONS
Make it react to visitors.
A static looped mascot is just a sticker. A character that responds to clicks, scrolls, and form actions feels alive and delightful.
| User Event / Action | Mascot Reaction | Purpose & UX Impact |
|---|---|---|
| Page load / Mount | waking → idle | Welcoming entrance without layout shifts |
| Hover on primary button | excited | Micro-encouragement toward CTA conversion |
| Form submission / success | celebrate | Joyful milestone confirmation |
| Form validation error | confused | Empathetic error feedback |
| 30 seconds of inactivity | drowsy → sleeping | Playful background ambient behavior |
| Direct click on character | happy / laughing | Easter egg micro-interaction |
PROMPT 5 · MAKE IT REACT PROMPT
Make my mascot react to visitors. It already shows on my site with @bible-strong/avatar-react (or avatar-web).
Use its controller: play(animation), pause(), stop(), setExpression(expression), getState(), and the onAnimationEnd callback. Only use animation names that exist in my .avatar.json.
Reactions:
- Page opens: play "waking", then switch to "idle" when it ends (or after 2 seconds if it loops)
- Hover on [my main button]: "excited"
- [My contact form] sent: "celebrate"
- Form error: "confused"
- No mouse, scroll or typing for 30 seconds: "drowsy", then "sleeping". Any movement wakes it up.
- Click on the mascot: "laughing"
Rules: no layout jumps, use tap instead of hover on phones, and turn reactions off if the visitor prefers reduced motion. Show me the code and a short list of what triggers what.06 / FREE CLOUDFLARE AI INTEGRATION
Turn your mascot into a grounded AI companion.
Why stop at static movements? By connecting your procedural SVG mascot to Cloudflare Workers AI, your character can hold real-time streaming conversations, answer questions strictly about your website, and react visually with synchronized facial moods — completely free (10,000 free AI Neurons every day).
Llama 3.1 on Cloudflare
Powered by @cf/meta/llama-3.1-8b-instruct running directly on Cloudflare’s global edge network with sub-second time-to-first-token.
Visual state binding
The mascot visually switches to thinking while awaiting tokens, excited when streaming starts, and happy upon completion.
Grounded RAG architecture
Pre-indexed site knowledge and markdown corpus constrain the LLM to only answer verified portfolio facts with direct clickable links.
Dual-layer rate limit
Edge IP sliding window (10 req/min) plus client 1.5s cooldown protect your 10,000 free daily neurons from bot spam and exhaustion attacks.
PROMPT 6 · CLOUDFLARE WORKERS AI + MASCOT INTEGRATION PROMPT
Connect my animated mascot to a free streaming AI chatbot powered by Cloudflare Workers AI.
Setup requirements:
1. Model: Cloudflare Workers AI '@cf/meta/llama-3.1-8b-instruct' (10,000 free neurons/day on free tier).
2. Backend: Cloudflare Worker on route '/api/chat' returning Server-Sent Events (SSE) text/event-stream.
3. Mood Synchronization:
- User sends prompt: Mascot enters "thinking" mood.
- Stream starts receiving chunks: Mascot enters "excited" mood.
- Stream finishes: Mascot enters "happy" mood.
- On error: Mascot enters "confused" mood and triggers in-browser keyword fallback.
4. Dual-Layer Rate Limiting & Anti-Spam:
- Server: Sliding window rate limit (10 requests/min per IP via cf-connecting-ip) returning HTTP 429, plus 500-char max message length cap.
- Client: 1.5s rapid-fire cooldown and max 12 messages per 2 minutes in sessionStorage (mascot enters "drowsy" mood if throttled).
5. Grounding: Pass my site's llms-full.txt or knowledge chunks in system prompt so it never hallucinates.
6. Markdown formatting: Ensure URLs and emails are autolinked.
Show me the complete Cloudflare Worker code with the rate limiter and the React integration hook.07 / SPECIFICATIONS & CREDITS
Engineering details.
Vector resolution independence
Mascots are rendered procedurally with pure SVG paths rather than bitmap sprites, guaranteeing razor-sharp clarity on standard and Retina screens alike.
Accessibility & reduced motion
When visitors enable system reduced motion (prefers-reduced-motion: reduce), animations settle into a calm still expression.
Open source foundation
Created by Stéphane Montlouis-Calixte (@_smontlouis on GitHub ), licensed under AGPL-3.0.
Experience it right on this site
Notice the floating mascot in the corner of your screen? It uses these exact reaction rules, adapts between Warm Paper and pure AMOLED Black, and accompanies your visit!