Features & Documentation
Everything the app does today — at a glance.
Chat & UI
- Real-time chat interface with neon user & bot bubbles.
- Enter to send, Shift+Enter for newline.
- SAFE / DARK modes with on-brand neon accents.
- Header actions: Copy conversation and Clear.
- Avatar & sound confirmations render with a neon cat SVG badge + label (no emoji).
- Primary footer row (Home / Features / Blog / Merch) + secondary row for external links.
Voice & Audio
- Onyx TTS voice with earcons/chimes disabled (no beep).
- Talking-head audio toggle with distinct on/off icons.
- Global hard mute — one click stops all audio immediately and blocks new speech.
- Public API:
RTCVoice.speak(text),RTCVoice.stop(). - Events:
rtc:audio:state,rtc:speaking:start/stop,rtc:voice:level. - Brandmark “speaking” glow mirrors voice state.
Memory & Context
- LocalStorage persistence of the whole conversation.
- Context-aware sends: last turns shipped as
{ prompt, context }. - Data stays on your device; one-click clear wipes it.
Avatar & Motion
- Parser-first avatar command routing with timed keyword fallback.
- Calibration shim (invert yaw/pitch centrally).
- Micro-gestures (nod, shake) and movement keywords (look left/right/up/down).
- Confirmations appear as SVG badge + label bubbles for consistent visual feedback.
- Mouth-sync driven by
rtc:voice:levelfor lifelike animation.
Sounds
- New: Type “meow” or “hiss” — the avatar plays Onyx-voiced cues.
- Dispatch:
rtc:avatar:sound• Confirm:rtc:avatar:confirm. - Each confirm renders as a neon cat SVG badge with the action label (e.g., meow, hiss).
Image Generation
- New: Type
image: neon cat(or “draw <thing>”) to generate images inline. - Shows a minimal “Generating image…” status message (no progress bar), then an inline image card.
- Final result includes preview + Open and Save actions.
- Powered by the backend; returns direct URLs or image blobs with graceful error handling.
Reliability & UX
- Time-window duplicate guard for user messages.
- Typed text cache so you never lose a draft.
- Health endpoint ping for diagnostics.
Mobile & iOS
- Footer/keyboard polish: reserves space for the fixed footer.
- iOS media bridge ensures audio plays even with ringer off.
- Dynamic
--footer-hCSS var so content never sits under the footer.
SEO & Feeds
Developer
- Avatar build toggle (baseline ⇄ working) in non-production mode.
- Three.js modules loaded via import map; preloaded avatar builds for faster FCP.
- Strict “UI handled by chat” flag prevents double-wiring.
- Global audio event bus + centralized stop registry for safe teardown.
Links & Pages
- Blog landing page with latest posts.
- Merch page with product grid, on-brand CTAs, and JSON-LD.
- Individual blog posts under
/blog/. - Feeds: RSS & Atom.
- TikTok, TikTok Shop, Etsy & GitHub links in footer.
- This Features page with neon-themed docs layout.
Merch
- Dedicated store page: merch.html.
- Responsive product grid (auto-fill cards) with image, title, price, sizes, and description.
- On-brand CTAs: Buy on Etsy and TikTok Shop buttons with neon SVG icons.
- SEO: per-product JSON-LD Product block (price, currency, availability, URL, brand).
- Scales to many items—duplicate the
<article class="card bubble">block per product. - Image path convention:
./img/merch/<slug>.png(e.g.,rigidtacocat-tee.png).
Blog
Browse everything on the Blog landing page, or jump straight into a post:
FAQ
Where is my data stored? In your browser’s LocalStorage only.
Why no beep before speech? We disabled earcons/chimes for smoother flow.
How do I copy the chat? Use the Copy icon in the header.
How do I mute voice? Tap the talking-head icon — hard mute stops all audio instantly.
How do I make it meow or hiss? Type “meow” or “hiss.” You’ll see a neon cat SVG + label confirmation bubble.
How do I generate images? Try commands like image: neon cat or draw a cyberpunk lion. A short “Generating image…” message appears before the inline card.
Where can I get merch? Visit the Merch page — tees and more, with on-brand neon goodness.