🎯 Typey Site
A fun, interactive typing application designed for kids with sound effects, text-to-speech, and visual feedback. Built with Vue 3 and modern web technologies.
🎯 Usage
Basic Typing
- Start typing in the input field at the bottom
- Hear each letter as you type (if speech is enabled)
- Press Enter to complete a line and hear it spoken
- View your history in the scrolling area above
Local Tidbyt display
When Typey is running locally, every completed line can also take over a
Tidbyt for ten seconds. Rendering and pushing live in a separate local service,
tidbyt-api, which holds the API key; the browser never sees it.
- Start tidbyt-api (
npm start in that repo; its README covers setup and the
optional Minecraft recipe mode). It listens on 127.0.0.1:8173.
- Run
npm run dev here, open the local URL, type a line, and press Enter. The
dev server forwards /api/tidbyt to the service. If the service is not
running, lines are still typed and the request quietly returns 503.
To use the deployed site with the same bridge, keep tidbyt-api running and
open https://typey.site/?tidbyt=local. The query parameter is an
explicit opt-in: without it, the production site never contacts localhost.
Chrome and other Chromium browsers support this HTTPS-to-loopback flow. Safari
may block the plain-HTTP loopback request as mixed content.
Analytics and privacy
Typey reports a handful of anonymous events to PostHog so it is possible to see
which easter eggs and settings children actually use. It is off unless
VITE_POSTHOG_PROJECT_TOKEN and VITE_POSTHOG_HOST are set (see
.env.example); without them nothing is loaded or sent, locally or in
production.
When it is on:
- Never what was typed. Events carry only names chosen by the app — which
easter egg played, which setting changed, which control was pressed — plus
visible time on the page, load timing, and an error's class name. A property
allowlist in
src/features/analytics/properties.js drops anything else the
app tries to send.
- Only PostHog's standard context on top. The SDK adds the page path,
parsed browser and OS, screen size, timezone and per-page-load IDs, plus its
own pageview. A
before_send hook strips query strings from every URL, drops
the raw user-agent string and full referrer URLs, and never sets person
properties.
- No identity. No cookies or local storage, no person profiles, no
identify(). Each page load is a new anonymous visitor. Do-Not-Track is
respected.
- No recording. Autocapture, session replay, heatmaps, surveys and
PostHog's extra scripts are all off.
Turn on Discard client IP data in the PostHog project settings too; IP
handling happens on PostHog's side and the browser SDK cannot switch it off.
Controls
- ✨ Words - browse the whole typing dictionary, search it, tap any word to watch what it does
- ⚙️ Settings → 🤫 Secret Words - the typed triggers on their own, each with a line saying what it does, so they can be found again without scrolling the dictionary
- 🎵 Sound Toggle - Enable/disable keystroke sounds
- 🗣️ Speech Toggle - Enable/disable text-to-speech
- 🔄 Auto-Speak Toggle - Automatically speak completed lines
- ⇪ Caps Lock - Force uppercase typing (the title, prompt and settings follow it too)
Keyboard
- Enter - finish the line and set off its animation
- ↑ - bring the last line back into the input to fix a typo
- ⌘→ / ⌘← - skip to the next practice word, or go back to the one before
- Escape - pop every balloon, stop Silly Mode and Party Mode, wake night mode, and clear the battery
Historical Lines
- Click any completed line to hear it spoken again
- Watch progressive highlighting as words are spoken
- Scroll through your typing history
Speech API Support
- Desktop browsers - Full speech synthesis support
- Mobile browsers - Limited but functional
- macOS Safari - Requires user interaction for speech
✨ Features
🎹 Interactive Typing
- Real-time typing with visual feedback
- Sound effects for each keystroke
- Caps Lock mode for uppercase typing
- Practice prompts - a word to copy, with each letter turning red as it's spelled right; the first wrong letter turns blue, and a different first letter means you're typing something else, so nothing lights up at all
- Colour words wash the screen - type "red" and the whole page turns red until you send the next line
- Motion that matches meaning - animals run (and turn to face the way they're going), food is thrown and falls back, weather rains, balloons float
- Emoji families - typing a generic word like "ball" or "tree" mixes related glyphs; specific words like "soccer" stay a single picture
- Emoji Mode - every letter, digit and symbol draws as a matching emoji (A → 🍎, B → 🐻); speech still reads the real words
- Silly Mode - type "silly" to have five random words send themselves, three seconds apart, each with its own animation; Escape (or "silly" again) stops them
- Color Mode - type "color" (or "colour", or "rainbow") to paint every character a different rainbow color; type it again to go back to plain text
- Goodnight / night mode - type "goodnight" (or "good night") to put the page to bed: a deep indigo sky with a moon and slowly twinkling stars. "black", "dark", "moon", and "night" also open night; "good morning", "light", "sun", "morning", "sunrise", "day", "daytime", and "noon" wake it. Colour Mode and the screen-colour washes stay off while it lasts; type "goodnight" again (or press Escape) to wake it up
- Percent Battery - type
50% (or any percent from 0-9999) to charge a battery to that much; it then parks in the corner like a phone's charge indicator and loses a point with every key you press. Hitting 0% — typed, drained, or from an equation — opens night mode instead of a separate blackout. Over 100% the charge bursts out of the battery and the screen fills with lightning
- Overcharged - past 1000% the screen's frame runs with electricity; each keystroke spends 100 charge, and about one in five shows a bolt that eats the letter you just typed, until the charge is spent back under the line
- Equation modifiers - put a
$ or % on either side of a sum (2 + 3$, 20 + 30%) and the answer arrives in those units: five bills raining, or a battery charged to 50%. Mix them and the last one typed wins
- Auto-scroll to keep content in view
🔊 Speech Synthesis
- Letter-by-letter speech as you type
- Line-by-line speech when you press Enter
- Historical line playback - click any completed line to hear it spoken
- Progressive highlighting - see words highlight as they're spoken
- Cross-platform compatibility - works on macOS, Windows, and mobile
🎨 Visual Design
- Modern, clean interface with smooth animations
- Responsive design that works on all devices
- Accessibility features for inclusive use
- Customizable themes and styling
🎮 User Experience
- Intuitive controls with clear visual feedback
- Hover effects and smooth transitions
- Keyboard navigation support
- Mobile-friendly touch interactions
Made with ❤️ for kids learning to type!
