Cargando simulador...
App.tsx
Instalación Rápida
Instala en un Comando
Añade el simulador a tu proyecto React en segundos utilizando tu gestor de paquetes preferido.
$
npm install rrortega-whatsimule
Todo lo que necesitas
Características Principales
Diseñado meticulosamente para ofrecer una experiencia interactiva idéntica a WhatsApp en cualquier aplicación React.
Pixel-Perfect WhatsApp
Fiel a la interfaz oficial de WhatsApp Web y Mobile. Soporta temas Claro/Oscuro, marcos iPhone & Android, y patrones de fondo Doodle/Puntos.
Teclado Virtual Interactivo
Animación de tipeo letra por letra con Teclado QWERTY dinámico, respuesta háptica visual y sonido sintético de pulsación de teclas.
Envío & Carga de Medios
Previsualización a pantalla completa de imágenes con comentarios dinámicos, desenfoque progresivo y anillo SVG circular de carga.
Notas de Voz & Grabación
Simulación de barra manos libres de grabación con espectro de ondas en vivo, estado "Grabando audio..." y transcripción automática en cursiva.
Totalmente Personalizable
Ajusta dimensiones en vivo, scripts conversacionales ilimitados, avatares, nombres, velocidades de simulación y efectos 3D de perspectiva.
Listo para Producción
Librería optimizada en TypeScript con compilación dual ESM/CJS, cero dependencias pesadas y fácil integración con NPM/PNPM.
Efectos de Audio Sintético
Efectos de sonido nativos (Web Audio API) para tipeo de teclado, envío y recepción de mensajes sin requerir archivos de audio externos.
Perspectiva & Inclinación 3D
Efectos sutiles de inclinación 3D al hacer hover o scroll, auto-scroll fluido inteligente y soporte para múltiples velocidades de animación.
API Imperativa & Seteo Manual 3D
Manipula el simulador en tiempo real desde JS/React mediante ref: ajusta la perspectiva 3D (setPerspective), alterna la posición del botón de reinicio, velocidad de reproducción y navegación de pasos.
Llamadas Entrantes (iOS & Android)
Simula la experiencia de llamadas en pantalla completa. Muestra dos botones iniciales (Rechazar/Aceptar) con entrada zoomIn, toque animado, despliegue de cápsula translúcida y arrastre horizontal (swipe) para colgar.
Notificaciones Push Interactivas
Simula notificaciones push del sistema en tiempo real con alertas de sonido, diseño glassmorphism en iOS / Material en Android y gestos táctiles animados de toque o descarte.
Bloques de Código & Markdown
Renderizado de mensajes en formato de código monoespaciado ```código```, preservación de saltos de línea, viñetas de lista (- / *), negritas/cursivas y simulación de borrado de borrador (eraseBeforeSend).
Tarjetas & Selección de Contactos
Flujo completo de compartición de contactos: apertura del selector, filtrado dinámico mediante búsqueda con teclado y renderizado de la tarjeta de contacto oficial (Contact Card).
Menú de Adjuntos de 8 Opciones
Hoja inferior deslizable con las 8 opciones nativas de WhatsApp (Galería, Cámara, Ubicación, Contacto, Documento, Encuesta, Evento e Imágenes de IA) con gestos táctiles animados.
