A starter kit for building a personalized keyboard-smash desktop app for toddlers.

Press keys, get big visuals and overlapping sounds.

Try the browser demo: OttoSmash Live Demo

Notes:

• audio starts after your first key press/tap (browser autoplay policy)
• this demo serves the starter assets and base behavior from this repo

If you have never used Terminal or installed Node before, read this first:

• ELI5.md

• src/ Electron + TypeScript app source
• sounds/ full starter sound set
• pics/ empty folder (add your own images)
• scripts/render_emojis.swift + scripts/emoji_config.json (optional emoji generator)
• scripts/split_utterances.mjs (split long recordings into individual utterance clips)
• PLAN.md step-by-step build plan for one-shot AI-assisted development

1. Clone this repo.
2. Open it in Codex or Claude Code.
3. Ask for a one-shot build/customization using the prompt in PLAN.md.

If you are new to coding assistants, follow this exactly:

1. Get this folder onto your computer.
2. Open this folder (ottosmash_starter_kit) in your AI coding tool.
3. Install dependencies first:

npm install

4. Paste one clear request, such as:

Read PLAN.md and build this app in one pass. Keep all existing scripts. Assume dependencies are installed. Then run typecheck and build, and tell me what command to run next.

5. Let the assistant edit files and run commands.
6. When it finishes, run:

npm run dev

Use plain language. Example prompts:

• Make this version themed for trucks and dinosaurs.
• Use only sounds that start with family_ in sounds/.
• Add a settings panel with sliders for fade speed and polyphony.
• Set family pictures to appear twice as often as emoji pictures.

• Codex: open this folder as the workspace, then ask it to execute the plan in PLAN.md.
• Claude Code: open this folder in the Claude coding environment and give the same prompt.
• OpenCode: open this folder as the project root and use the same prompt; the workflow is the same.

You do not need to understand every file first. Start with one clear request, run the app, then iterate with small follow-up requests.

For the best toddler experience, use:

• familiar voices (parents, siblings, grandparents) for sounds
• photos of familiar people, pets, and favorite objects in pics/

• Node.js 22.12+ (LTS recommended)
• npm 10+ (normally bundled with Node 22+)
• ffmpeg and ffprobe on PATH (for audio conversion/splitting)

npm install
npm run dev

• npm run build - bundle app to dist/
• npm run build:web - build static browser demo to site/ (for GitHub Pages)
• npm run dev - build + launch app
• npm run start - launch app from existing dist/
• npm run typecheck - run TypeScript checks
• npm run render:emojis - generate emoji PNGs into pics/
• npm run split:utterances -- --input <file> - split a long recording into many .wav clips
• npm run normalize:audio -- --dry-run - preview WAV normalization + AIFF conversion jobs
• npm run dist - unsigned ARM64 macOS DMG in release/
• npm run dist:universal - unsigned universal macOS DMG in release/
• npm run dist:win - Windows NSIS installer build
• npm run dist:linux - Linux AppImage build

Pushes to main trigger .github/workflows/pages.yml, which:

• runs npm ci
• runs npm run build:web
• deploys site/ to GitHub Pages

• Add .wav files to sounds/
• Add .png/.jpg/.jpeg/.webp/.gif files to pics/

The app also auto-loads from these optional folders if they exist:

• ~/Music/ottosmash for extra sounds (.wav)
• ~/Pictures/ottosmash for extra images

On macOS, if assets in these folders do not appear, grant Files and Folders permission for the app in System Settings -> Privacy & Security.

If you record a long session with multiple utterances separated by silence, split it automatically:

npm run split:utterances -- --input ./raw/family_session.wav --prefix family --out ./sounds

Useful tuning options:

• --noise -35 silence threshold in dB (higher magnitude like -45 is more sensitive)
• --gap 0.35 minimum silent gap to split utterances
• --min-clip 0.18 minimum output clip duration
• --pad 0.03 small padding added around each segment
• --dry-run preview segments without writing files

Outputs are normalized to mono 44.1kHz 16-bit WAV.

If you have mixed audio formats, this helper script can:

• re-encode existing sounds/*.wav to mono 44.1kHz 16-bit WAV
• convert aifs/*.aif or aifs/*.aiff to sounds/ottosmash_*.wav
• write a manifest CSV and backup overwritten files

Preview first:

npm run normalize:audio -- --dry-run

Run conversion:

npm run normalize:audio

Useful options:

• --source-aifs <dir> custom AIFF source directory
• --sounds-dir <dir> custom output sounds directory
• --overwrite overwrite existing AIFF-converted targets

The app supports two image categories:

• emoji pics: filenames starting with emoji_, emoji-, or pic-emoji
• family pics: filenames starting with family or pic-family

Anything non-emoji in ~/Pictures/ottosmash is treated as a family pic by default.

• f force family picture
• e force emoji picture
• s force shape
• l force letter
• press Escape 5 times to quit

• scripts/render_emojis.swift is macOS-specific (uses AppKit).
• On Windows/Linux, use a platform-appropriate workflow (for example, emoji source assets, Twemoji-based rendering, or a Python/Pillow pipeline) and place resulting images in pics/.
• This repo intentionally does not include generated Apple emoji artwork.

OttoSmash is inspired by the original BabySmash (1990s shareware) by Justin Cohen. This project references that original lineage, not newer apps that use the same name.