Construyendo Sesiones Espiritistas: Mi Experiencia en el Hackatón de Kiroween

Conoce la experiencia única en el Hackatón de Kiroween, donde se construyeron sesiones espiritistas. Un relato fascinante de inmersión en lo sobrenatural y la tecnología.

2 dic 2025 • 4 min read • Q2BSTUDIO Team

Construyendo Sesiones Espiritistas: Mi Experiencia en el Hackatón de Kiroween

Participé en el hackatón Kiroween y el resultado fue una mezcla entre juego y museo virtual. Construí Sesiones Espiritistas, una web interactiva que convierte folklore global y episodios oscuros de la historia en una experiencia que parece una conversación con el pasado. La idea fue sencilla: lograr que el usuario sienta que se comunica con algo antiguo, descubriendo mitos, rituales extraños y leyendas inquietantes mediante una interfaz que responde a sus elecciones.

La experiencia arranca con un mapa mundial interactivo. Al pulsar sobre un país el usuario entra en una de tres rutas temáticas: Cuentos del Pueblo para folclore y mitos, Secretos de la Corona para historia política y Libro del Mercader para historia económica. Cada ruta se despliega como un libro con páginas que se voltean de forma realista, con el detalle visual del papel curvándose y el sonido del giro. Cada página plantea una pregunta de opción múltiple sobre la tradición. Acertar permite avanzar; fallar provoca un giro dramático que devuelve el libro al principio, añadiendo tensión y un sentido de riesgo educativo.

Toda la atmósfera se potenció con efectos 3D de humo realizados con Three.js y react-three fiber, paisajes sonoros ambientales con llamadas de búho y aullidos lejanos, y un latido que se intensifica antes de responder. El objetivo fue que el aprendizaje sobre Baba Yaga o sobre rutas históricas no se sintiera como deberes. La mecánica de voltear páginas se implementó con react-pageflip y el mapa con react-simple-maps, mientras que la interfaz y el estilo corrieron con Tailwind CSS y la aplicación principal en Next.js y React con TypeScript. La calidad de código y formato se mantuvo con Biome.

Desde la perspectiva de desarrollo el uso de Kiro fue decisivo. Su flujo basado en especificaciones me obligó a diseñar la arquitectura antes de escribir código, usando patrones EARS y reglas de calidad INCOSE para evitar pérdidas de foco a horas intempestivas. Las tareas se fragmentaron en bloques manejables y la posibilidad de marcar actividades como opcionales permitió priorizar entregar antes que perseguir la perfección. Un sistema de hooks automatizó la documentación: un hook llamado README Beautifier embellecía el archivo con badges temáticos, diagramas y formato correcto cada vez que lo actualizaba, liberando tiempo de desarrollo real.

También diseñé reglas de dirección para el agente de Kiro que impidieron cambios automáticos de código sin orden explícita. Esto evitó refactors sorpresa y mantuvo el control cuando depuraba funciones sensibles. Entre los retos técnicos destacaron la política de autoplay de navegadores para audio, que resolvimos reutilizando el botón de mute como desbloqueador de sonido global, y la coreografía entre la API imperativa de FlipBook y el estado declarativo de React para que las animaciones no se rompieran ni se sintieran lentas.

La optimización de efectos visuales fue otro punto crítico. Efectos de partículas 3D pueden convertir la experiencia en una pesadilla térmica en hardware antiguo, así que detectamos capacidades WebGL, reducimos el conteo de partículas y aplicamos fallbacks CSS para mantener inmersión sin convertirlo en demo técnica.

Qué sigue: la versión actual cubre 19 países con tres rutas cada uno. Hay planes para ampliar países, añadir rutas, árboles de preguntas más profundos, logros, tablas de clasificación y más tipos de preguntas como ordenar cronologías o respuestas cortas. También hay trabajo pendiente en accesibilidad con modos de alto contraste, tamaños de texto ajustables y mejoras para lectores de pantalla. En paralelo se consideran optimizaciones de rendimiento como carga perezosa de datos, virtual scrolling y code splitting más agresivo.

En Q2BSTUDIO llevamos esta mentalidad a nuestros proyectos de software a medida y servicios de inteligencia artificial. Somos una empresa de desarrollo de software que crea aplicaciones a medida, integra soluciones de inteligencia de negocio y habilita agentes IA para empresas. Si busca desarrollar aplicaciones a medida o una solución multiplataforma puede conocer más en aplicaciones a medida y si le interesa cómo la inteligencia artificial potencia procesos empresariales visite nuestra página de inteligencia artificial.

Además ofrecemos servicios cloud aws y azure, ciberseguridad y pentesting, y proyectos de inteligencia de negocio y power bi para convertir datos en decisiones. Palabras clave que guían nuestro trabajo incluyen aplicaciones a medida, software a medida, inteligencia artificial, ciberseguridad, servicios cloud aws y azure, inteligencia de negocio, ia para empresas, agentes IA y power bi.

En resumen, Sesiones Espiritistas demostró que el contenido educativo puede ser inmersivo y memorable, y que las herramientas potenciadas por IA pueden aumentar el control del desarrollador en lugar de reemplazarlo. Kiro aportó estructura y automatización, los hooks ahorraron tareas repetitivas y las reglas de dirección devolvieron el poder de decidir. En Q2BSTUDIO aplicamos la misma disciplina para ofrecer soluciones robustas y escalables en software a medida, inteligencia artificial y servicios cloud.

A BREAK?

Play for a moment before you go

OUR SERVICES

How we can help you

Artificial intelligence

AI agents, chatbots, and intelligent assistants that automate tasks and serve your customers 24/7 to improve the efficiency of your business.

More info

Software Development

Web, mobile, and desktop applications, intranets, e-commerce, SaaS, and management platforms designed for your company's specific needs.

More info

Cloud services

Migration, infrastructure, managed hosting, high availability, and security on Microsoft Azure and Amazon Web Services to help your business scale without limits.

More info

Cybersecurity and pentesting

Security audits, penetration testing and protection of applications, data and infrastructure on-premise and cloud, with ethical hacking and regulatory compliance.

More info

Business Intelligence

Dashboards and data analysis with Power BI: we integrate your sources, design dashboards and KPIs and turn your data into decisions.

More info

Process automation

We automate repetitive tasks and connect your applications with n8n, Power Automate, Make, and RPA, eliminating manual work and increasing productivity.

More info

Training for Companies

We train your teams in technology with criteria: web development, databases, Git, best practices and security, automation with n8n, artificial intelligence for companies and creation of AI solutions with Azure AI Foundry.

More info

Code Auditing

We audit the code that you, your team or an AI create: we tell you what is good and what to improve, we secure it and make it ready for production, web or app.

More info

AI Image Generation

We create for you the images that your business needs with artificial intelligence: product, networks, advertising, illustration and avatars. You tell us what you want and we deliver it ready to use.

More info

AI Video Generation

We create videos with artificial intelligence for you: promotional, networking, virtual presenters, dubbing and animations. You tell us the idea and we will deliver it assembled and ready to publish.

More info

AI Conversational Avatars

We create conversational avatars with AI – digital humans with a face and voice – that serve your customers and teams with the knowledge of your company, on your website, interactive monitors, WhatsApp or Teams.

More info

Online Marketing and AI

Google Ads, Meta Ads, LinkedIn Ads and AI Engine Positioning (GEO/AEO): we attract customers and make your brand appear where they search for you, also on ChatGPT, Gemini and Perplexity.

More info

Do you have a project in mind?

Tell us your vision and we'll turn it into a software solution. Whatever the scope, we make your idea real.

Live Chat