KeySmash 🎹✨

Teclado Interactivo, Musical y Visual para Bebés y Niños Pequeños.
Una alternativa mejorada, moderna y 100% open-source a TinyFingers, diseñada para estimular el aprendizaje visual y auditivo de forma segura.

---

🎯 ¿Qué es KeySmash?

KeySmash convierte cualquier pulsación de tecla o toque de pantalla en una experiencia mágica llena de notas musicales, letras gigantes, efectos de confeti y animaciones de fondo.

Está diseñado específicamente para bebés y niños pequeños que aman presionar las teclas del ordenador, bloqueando atajos peligrosos del navegador (F5, Tab, Alt+F4, Ctrl+R) para que jueguen con total tranquilidad y seguridad.

---

🌟 Características Principales

• 🎹 100% Audio Sintético Local (Cero Latencia):

  • 🎹 Notas de Piano: Escalas musicales suaves sintetizadas en tiempo real con Web Audio API.
  • 🪵 Xilófono Melódico: Tonos cristalinos para oídos infantiles.
  • 🗣️ Voz y Letras Bilingüe: Pronuncia las letras en español 🇪🇸 e inglés 🇺🇸.
  • 🐾 Granja de Animales: Maullidos, ladridos, rugidos y sonidos divertidos.
  • 🤡 Efectos Cartoon: Sonidos cómicos tipo caricatura.

• 🌌 Temas Visuales y Partículas Ambientales:

  • 🌊 Océano Profundo & Peces: Fondo marino flotando con delfines, ballenas, pulpos, medusas, tortugas, cangrejos y burbujas.
  • 🌸 Rosado & Flores: Fondo degradado rosa pastel con cerezos, girasoles, rosas, tulipanes y mariposas.
  • 🎮⚡ Gamer Techno & Láseres: Fondo cibernético neón con rayos de energía, controles y aliencitos arcade.
  • 🌌 Galaxia Oscura: Polvo estelar y más de 160 estrellas flotando en movimiento espacial constante.

• 🚂 Rastros del Mouse / Dedo Interactivos:

  • 🐛 Gusanito: Gusanito articulado de colores (🐛 🟢 🟡 🔴 🟣) con cabeza animada.
  • 🚂 Trenecito Espaciado: Locomotora y vagones (🚂 🚃 🚃 🚃) separados siguiendo el puntero.
  • 🌈 Arcoíris: Destellos brillantes HSL de gran visibilidad (52px).
  • ☁️ Bruma Mágica: Nubes de niebla cósmica expansiva (85px).
  • 🚗 Carritos & Vehículos: Autos de carreras, ambulancias y patrullas (🚗 🚑 🚓).
  • 🐾 Animalitos: Emojis de mascotas en movimiento (🐱 🐶 🦁 🐸 🦄).

• 🎈 Histórico de Letras Flotantes (~3 a 5 min):

  • Las teclas presionadas rebotan y permanecen flotando en el fondo con resplandor luminoso (glow), rebotando suavemente en los bordes de la pantalla.

• 🎲 Aparición Aleatoria:

  • Las letras gigantes aparecen en posiciones aleatorias de la pantalla en cada pulsación. Cada nueva visita genera una combinación de inicio aleatoria.

• 🔒 Toddler Lock (Bloqueo Infantil Inteligente):

  • Intercepta teclas de sistema. Para abrir la configuración cuando está bloqueado, se requiere mantener la tecla ESC por 3 segundos con un indicador circular animado.

• 🎉 Smash Report Modal:

  • Muestra un reporte estadístico de la sesión: teclas presionadas, tiempo de juego, medidor KPS y cálculo de Nivel de Caos (Caos Diminuto, Caos Moderado, Tormenta de Teclas, CAOS TOTAL) con botones para copiar o compartir.

• 📱 PWA 100% Offline:

  • Instalable en escritorio, tablets y móviles. Funciona 100% sin conexión a internet.

---

📁 Estructura del Proyecto

keysmash/
├── index.html        # Estructura HTML5 semántica y accesible
├── styles.css        # Sistema de diseño con CSS3 Vanilla y Temas
├── sw.js             # Service Worker para funcionamiento 100% Offline (PWA)
├── manifest.json     # PWA Manifest para instalación en dispositivos
├── VERSION.md        # Memoria del historial de versiones y lanzamientos
├── js/
│   ├── app.js        # Controlador principal y preset aleatorio
│   ├── audio.js      # Motor Web Audio API local y SpeechSynthesis
│   ├── visuals.js    # Motor Canvas a 60 FPS (Temas, Partículas, Rastros y Galaxia)
│   ├── lock.js       # Captura de teclas y gesto ESC por 3s
│   └── i18n.js       # Diccionario bilingüe (Español / Inglés)
└── README.md         # Documentación oficial del proyecto

---

🚀 Probar Localmente

KeySmash está construido en Vanilla JS puro sin frameworks pesados. Puedes ejecutarlo de dos formas simples:

Opción 1: Abrir directamente en el navegador (Sin Node.js)

Simplemente haz doble clic o abre index.html en cualquier navegador moderno (Chrome, Edge, Firefox, Safari).

Opción 2: Usar Vite o servidor local

# Instalar dependencias o ejecutar Vite
npx vite --port 5173

# Abrir en el navegador
http://localhost:5173

---

✉️ Contacto y Soporte para Padres

¿Tienes sugerencias, ideas o comentarios? Escríbenos directamente a:
📧 contact@swiftstack.pro 🌐 https://swiftstack.pro

---

☕ Donaciones y Apoyo

Si disfrutas de KeySmash y quieres apoyar el desarrollo de nuevas funciones, efectos visuales y temas:

---

📄 Licencia

Este proyecto es de código abierto bajo la licencia MIT. Libre para usar, modificar y distribuir.