Meet Sprite
A little AI guide with a lot of character. Sprite replaces the generic website chatbox with an animated mascot that helps visitors navigate, answers questions, and adds warmth to a very technical website.
A chatbox with character
Most website chatboxes feel the same: a cold bubble in the corner that screams "corporate support ticket." Sprite is different. It's a small animated mascot that floats at the bottom of the page, greets visitors with personality, and guides them around the site through natural conversation.
It knows every section, every service, every FAQ answer. Ask it for a joke and it dances. Tell it you're bored and it suggests something interesting. It reads the mood of the conversation and adjusts its expression: happy, surprised, thinking, even a little annoyed if you push it.
For a studio that talks about design logic and disciplined craft, Sprite is the proof that technical rigour and warmth aren't mutually exclusive.
Plain HTML, CSS, and JS
No frameworks. No build tools. No npm install. Sprite is a single component (one CSS file, one JS file, a block of HTML) that you paste into any page. The entire animated character is drawn with CSS. Every expression, every blink, every dance move is a keyframe animation on a few nested divs.
The conversation engine is pattern matching with weighted keyword detection. The sentiment tracker is four regex checks per message. The scroll trigger uses IntersectionObserver. The voice features are the browser's built-in Web Speech API. Nothing external, nothing heavy.
- HTML5Widget structure
- CSS3Character art, animations, theming
- Vanilla JSConversation engine, sentiment, state
- Web Speech APITTS output & voice input
- IntersectionObserverScroll-triggered pill reveal
- CSS Custom PropertiesLight/dark theming
The charm of a pixel companion
Design studios talk about craft. Dev shops talk about performance. Both are necessary, neither is sufficient. What makes a website memorable is the feeling it leaves, and a small animated character that waves when you arrive, thinks while it searches, and dances when you ask for a joke creates a moment that a static page never will.
Sprite turns passive browsing into a conversation. It lowers the barrier to reaching out, surfaces content visitors might not find on their own, and gives the studio a voice that isn't just copy on a page. It's the detail that makes people smile and come back.
Roadmap
The current MVP is live and working. Here's what's coming.
AI-powered live chat
Shipped. Sprite now runs on a real AI backend: it understands context, remembers the conversation as you move between pages, and answers questions it was never explicitly programmed for, personality intact. The pattern engine stays on as an offline fallback.
Customisable sprites
A configuration layer that lets site owners choose their sprite's appearance, personality, colour, and default expressions. Different sites get different characters: same engine, unique identity.
Voice conversations with AI
Full two-way voice chat. Talk to Sprite, hear it respond in a synthesised voice, and watch its expressions match the conversation in real time. The current Web Speech API foundation will be upgraded to support continuous, natural dialogue.
Advanced TTS with emotion
Moving beyond the browser's default speech synthesis to an expressive TTS engine that adjusts tone, pace, and inflection based on the sprite's emotional state, so it sounds as alive as it looks.
Built by
Luis Howin
Creative Director
Claude Code
Technical Lead