Orbe IA

Cinevva's analyzer read this game's design doc and its source, then wrote the brief below. "Make your own" hands it to the game creator as your opening message, so you start from a real spec rather than a one-line idea.

Recrea una demo interactiva móvil/web llamada “Orbe IA”, en español, dibujada sobre un canvas a pantalla completa y optimizada para tacto, sin scroll. No es un juego tradicional con niveles: es una interfaz jugable de asistente creativo por voz, con navegación entre pantallas, micrófono, respuestas locales y tarjetas de creación simulada.

Estética y layout: fondo azul marino muy oscuro (#08111f) con un degradado radial azul más claro centrado aproximadamente en la parte superior. Usa tipografía sans-serif del sistema, texto blanco azulado (#eef6ff), texto secundario azul grisáceo (#8fa9c7), cian brillante (#47e6ff), verde menta (#74f0a1), morado (#a778ff), y paneles azul oscuro (#111e33 / #172946). La interfaz debe ser responsive al ancho y alto de la ventana. En la esquina superior izquierda muestra “ORBE IA” en cian, negrita, y debajo “asistente creativo por voz” en azul grisáceo. Añade detrás de esa zona un halo circular cian tenue con una pulsación animada suave.

Pantalla inicial: centrada en la parte superior muestra “Pregúntame sin escribir” grande y en negrita, seguido por “Toca el micrófono y habla”. Debajo coloca un gran botón circular de micrófono centrado horizontalmente, aproximadamente al 36% de la altura de pantalla y limitado a una posición vertical máxima cercana a 270 px. El botón tiene un halo circular translúcido que pulsa; en estado normal el círculo interior es cian y en estado escuchando es verde. Dibuja dentro un icono de micrófono negro: cápsula vertical redondeada, arco de soporte, tallo y base. Debajo del botón muestra “Pulsa para hablar” en blanco en estado normal o “Escuchando…” en verde mientras escucha.

Al tocar el micrófono, entra en estado de escucha, limpia transcripción y respuesta, cambia el color/halo a verde y muestra “Escuchando…”. Si el navegador tiene SpeechRecognition o webkitSpeechRecognition, usa reconocimiento de voz en español de España (es-ES), sin resultados intermedios, tomando la primera alternativa. Al recibir voz, muestra un panel redondeado “Tú dijiste” en cian y debajo la transcripción; después muestra un segundo panel azul “Orbe IA” con la respuesta y reproduce la respuesta mediante speechSynthesis en es-ES si está disponible. Si no hay reconocimiento de voz, después de unos 700 ms simula la transcripción “¿Qué puedes crear?” y responde. Si ocurre un error, muestra “No pude oírte. Prueba diciendo: “¿qué puedes crear?””. Si termina la escucha sin resultado, muestra “Prueba: “¿quién eres?””.

Las respuestas son deterministas y locales, no conectan con un modelo real: si la pregunta contiene “quién”, “que eres” o “eres”, responde “Soy Orbe IA, un asistente creativo. Puedo explicar ideas, inventar historias y ayudarte a planear creaciones.”; si contiene “imagen”, responde “Puedo convertir una idea en un prompt visual: estilo, colores, cámara, ambiente y detalles.”; si contiene “video”, responde “Puedo preparar una escena con guion corto, planos, movimiento de cámara y sonido sugerido.”; si contiene “juego”, responde “Puedo diseñar un juego: objetivo, controles, niveles, enemigos y recompensas.”; si contiene “hola”, responde “¡Hola! Pregúntame quién soy, cómo crear una imagen, un video o un juego.”; para cualquier otra cosa responde “Entendí tu pregunta. Puedo darte una explicación, una idea creativa o convertirla en un plan para una imagen, video o juego.”. El mensaje inicial interno puede ser “Hola. Pulsa el micrófono y pregúntame algo.” aunque la pantalla inicial visible muestra el prompt y el botón.

En la parte inferior de la pantalla inicial, cerca de la altura H-155, muestra centrado “También puedo ayudarte a crear:”. Debajo coloca tres botones redondeados iguales en una fila, con pequeño espacio entre ellos: “🖼 IMÁGENES”, “🎬 VIDEOS” y “🎮 JUEGOS”, sobre panel azul oscuro. En un móvil estrecho deben seguir cabiendo en una fila como tres tarjetas compactas. En el borde inferior muestra centrado y pequeño: “En esta demo la IA responde localmente; para una IA real necesitas conectar un servicio.”. Tocar cualquiera de las tres tarjetas abre la pantalla de laboratorio y prepara inmediatamente un resultado: para imágenes “Imagen lista para imaginar: un castillo de cristal sobre nubes violetas.”; para videos “Video listo para imaginar: cámara viajando por Marte.”; para juegos “Juego listo para imaginar: misión espacial con saltos y tesoros.”

Pantalla de creación/laboratorio: conserva la cabecera ORBE IA. Cerca de arriba muestra “Laboratorio creativo” grande y debajo “Elige una idea para simular una creación”. Presenta tres tarjetas verticales grandes, redondeadas, con borde azul: icono a la izquierda y textos “Crear una imagen” / “Un castillo flotando sobre nubes”, “Crear un video” / “Un viaje por Marte en 10 segundos”, y “Crear un juego” / “Una aventura espacial con misiones”. Si hay un resultado preparado, muestra un panel azul más claro con la etiqueta verde “Resultado preparado” y el texto correspondiente. Abajo fija dos botones: a la izquierda “← Volver” y a la derecha “✨ Crear idea”, este último en morado. Tocar Crear idea cambia el resultado a “Creación simulada completada. En una versión conectada, aquí aparecería el resultado real.”; tocar Volver regresa a inicio.

También implementa una pantalla “Cómo funciona” accesible si se decide exponerla, con el título “Cómo funciona”, el texto: “Habla con el micrófono, escucha una respuesta y toca una tarjeta para imaginar imágenes, videos o juegos. Esto es una demo jugable: no conecta todavía a un modelo real ni genera archivos finales.”, y un botón “← Volver”. Mantén la interacción basada en pointer/touch, sin controles de teclado requeridos. La animación continua debe incluir el pulso de los halos circulares y la UI debe verse como la captura: limpia, plana, con grandes espacios verticales, paneles redondeados y contraste alto.