[{"data":1,"prerenderedAt":464},["ShallowReactive",2],{"site-home-content":3,"project-kira-beats":160},{"id":4,"title":5,"body":6,"clients":16,"contactCta":34,"contactForm":38,"description":49,"extension":50,"footer":51,"heroLines":69,"image":76,"intro":76,"meta":77,"navigation":78,"path":93,"process":94,"projectsCta":76,"projectsIntro":76,"sectionTitles":121,"seo":126,"services":130,"slug":152,"stem":153,"teamCta":76,"teamMembers":76,"teamServices":76,"teamTitle":76,"visuals":154,"__hash__":159},"pages\u002Fpages\u002Findex.md","Estudio de diseño Suquet Estudi",{"type":7,"value":8,"toc":12},"minimark",[9],[10,11],"home-page",{},{"title":13,"searchDepth":14,"depth":14,"links":15},"",2,[],[17,20,23,26,28,31],{"src":18,"alt":19,"name":19},"\u002Fimages\u002Fclients\u002Funiversidad-valencia-suquet.svg","Universitat de València",{"src":21,"alt":22,"name":22},"\u002Fimages\u002Fclients\u002Fapash-suquet.svg","Apash Arquitectos",{"src":24,"alt":25,"name":25},"\u002Fimages\u002Fclients\u002Fproa-suquet.webp","Proa",{"name":27,"alt":27},"andros.dev",{"src":29,"alt":30,"name":30},"\u002Fimages\u002Fprojects\u002Ffairmont-polymers\u002Fcover.webp","Fairmont Polymers",{"src":32,"alt":33,"name":33},"\u002Fimages\u002Fprojects\u002Fcropcare\u002Fcover.jpg","Cropcare",{"title":35,"text":36,"linkLabel":37},"Háblanos de tu proyecto, solicita presupuesto","Escribe a contacte@suquet.studio o rellena el formulario de contacto.","Solicita más información",{"title":39,"namePlaceholder":40,"emailPlaceholder":41,"messagePlaceholder":42,"consentPrefix":43,"consentLink":44,"submitLabel":45,"locationPrefix":46,"location":47,"question":48},"Háblanos de tu proyecto","Nombre","Email","Cuéntanos tu proyecto","Al enviar este formulario aceptas nuestra","política de privacidad.","Enviar mensaje","Estamos en","Valencia","¿hablamos?","Diseñamos productos digitales con mucha vitamina C.","md",{"contactLabel":52,"email":53,"socialLabel":54,"socialHandle":55,"socialUrl":56,"legalLabel":57,"legalLinks":58,"copyright":68},"Contacto","contacte@suquet.studio","Instagram","@suquet.estudi","https:\u002F\u002Fwww.instagram.com\u002Fsuquet.estudi","Legal",[59,62,65],{"label":60,"to":61},"Aviso legal","\u002Faviso-legal",{"label":63,"to":64},"Política de cookies","\u002Fpolitica-de-cookies",{"label":66,"to":67},"Privacidad","\u002Fpolitica-de-privacidad","Hecho con 🤍 por Suquet Estudi",[70,71,72,73,74,75],"Estudio de diseño","Suquet Estudi.","Diseñamos","productos digitales","con mucha","vitamina C.",null,{},[79,82,85,88,91],{"label":80,"to":81},"Estudio","\u002F#services",{"label":83,"to":84},"Metodología","\u002F#process",{"label":86,"to":87},"Equipo","\u002Fequipo",{"label":89,"to":90},"Proyectos","\u002Fproyectos",{"label":52,"to":92},"\u002F#contact","\u002Fpages",[95,98,101,104,107,110,113,116,119],{"title":96,"text":97},"Primer contacto","Siempre tenemos una primera reunión donde conocernos y hablar de tu proyecto. Así definimos mejor el encargo antes de pasar a la toma de decisiones.",{"title":99,"text":100},"Briefing","Desarrollamos un briefing a partir de las notas tomadas en la primera reunión. Definimos las características del proyecto y elaboramos una propuesta para el cliente, con las soluciones más adecuadas al encargo.",{"title":102,"text":103},"Presupuesto","Analizamos el entorno digital en constante cambio y elaboramos una propuesta acorde a las necesidades reales. Presentamos al cliente un presupuesto junto con el cronograma y puntos a desarrollar del proyecto. Firmamos un acuerdo y empezamos el trabajo.",{"title":105,"text":106},"Plataforma de marca","Si no existe identidad o es necesario mejorar la existente, nosotros nos encargamos de definir la marca y crear una propuesta de valor acorde al negocio. Si ya existe una marca potente podemos pasar a la siguiente fase.",{"title":108,"text":109},"Diseño","Con la marca y funcionalidades definidas pasamos a la fase de diseño. Creamos el visual de la web\u002Faplicación\u002FCRM y hacemos revisiones con el cliente.",{"title":111,"text":112},"Evaluación","Evaluamos y medimos resultados. Realizamos cambios tras la revisión del cliente para cerrar la fase de diseño.",{"title":114,"text":115},"Desarrollo","Empieza el desarrollo web siguiendo fielmente la propuesta de diseño. Se realizan tests y revisiones para que todo funcione correctamente.",{"title":117,"text":118},"Entrega","Entregamos el proyecto finalizado, revisado y aprobado por el cliente. Listo para funcionar.",{"title":13,"text":120},"Nos basamos principalmente en la metodología de \u003Cb>Design Thinking\u003C\u002Fb>: investigar, definir, idear, prototipar, evaluar e implementar.",{"services":122,"process":123,"clients":124,"orange":125},"El estudio","Nuestro proceso","Compañías que ya confían en nosotros","queremos ser tu media naranja",{"title":127,"description":128,"noIndex":129},"Suquet Estudi | Diseño y desarrollo web en Valencia","Diseño web, diseño gráfico, branding, marketing y estrategia digital.",false,[131,138,145],{"title":132,"text":133,"items":134},"Branding y estrategia","Creación de una identidad de marca sólida y estrategias de marketing efectivas para destacar en el entorno digital.",[135,136,137],"Estrategia de marca","Estrategia de producto","Investigación y análisis",{"title":139,"text":140,"items":141},"Diseño e Identidad visual","Desarrollo de una estética digital atractiva para establecer una imagen de marca única y memorable.",[142,143,144],"Identidad de marca","Sistemas de diseño","Visual redes sociales",{"title":146,"text":147,"items":148},"Desarrollo web","Construcción de plataformas digitales funcionales y amigables para mejorar la visibilidad y la interacción en línea.",[149,150,151],"Desarrollo de interfaz de usuario. UX\u002FUI","Desarrollo de aplicaciones","Ecommerce","index","pages\u002Findex",{"dropsAlt":155,"serviceStarAlt":156,"processStarAlt":157,"orangeAlt":158},"Gotitas Suquet","Estrella Suquet","Estrella amarilla Suquet","Queremos ser tu media naranja","suSgbUHsrblCjmeZaHiDDeVmelVTufbrbYDrXluzx6A",{"id":161,"title":162,"body":163,"categories":424,"client":428,"cover":429,"description":432,"extension":50,"externalUrl":433,"featured":434,"gallery":435,"meta":445,"navigation":434,"order":14,"path":446,"published":434,"seo":447,"slug":450,"stem":451,"subtitle":452,"technologies":453,"year":76,"__hash__":463},"projects\u002Fprojects\u002Fkira-beats.md","Kira Beats",{"type":7,"value":164,"toc":412},[165,169,172,177,180,196,199,203,206,212,232,235,246,249,253,256,259,270,273,277,280,300,303,306,310,313,327,330,334,337,340,344,347,358,361,365,379,383,397,401,404,407],[166,167,168],"p",{},"Kira Beats es un proyecto personal en el que diseñé y desarrollé una radio online 24\u002F7 totalmente automatizada, combinando desarrollo web, infraestructura de streaming y branding digital en un único ecosistema.",[166,170,171],{},"El objetivo era claro: crear una experiencia musical inmersiva con identidad propia, mientras construía una plataforma escalable capaz de evolucionar hacia un producto digital real.",[173,174,176],"h2",{"id":175},"concepto","Concepto",[166,178,179],{},"Kira Beats es una emisión continua centrada en:",[181,182,183,187,190,193],"ul",{},[184,185,186],"li",{},"Deep House",[184,188,189],{},"Tech House",[184,191,192],{},"Música electrónica underground",[184,194,195],{},"Estética inspirada en el anime",[166,197,198],{},"El proyecto mezcla música, visuales y tecnología para generar una atmósfera pensada para trabajar, conducir o simplemente desconectar.",[173,200,202],{"id":201},"arquitectura-de-streaming","Arquitectura de streaming",[166,204,205],{},"El sistema está basado en una arquitectura desacoplada:",[166,207,208],{},[209,210,211],"strong",{},"AzuraCast (VPS) → OBS Studio → YouTube Live",[181,213,214,220,226],{},[184,215,216,219],{},[209,217,218],{},"AzuraCast:"," gestión de la radio y streaming de audio.",[184,221,222,225],{},[209,223,224],{},"OBS Studio:"," composición visual y emisión a YouTube.",[184,227,228,231],{},[209,229,230],{},"YouTube Live:"," distribución y descubrimiento.",[166,233,234],{},"AzuraCast se encarga de la lógica de la radio, Auto DJ, playlists y programación, mientras que OBS añade la capa visual:",[181,236,237,240,243],{},[184,238,239],{},"Overlays dinámicos",[184,241,242],{},"Metadata en tiempo real: canción y portada",[184,244,245],{},"Visualizador animado",[166,247,248],{},"Este enfoque permitió validar rápidamente el proyecto manteniendo flexibilidad para migrar en el futuro a una solución completamente basada en servidor.",[173,250,252],{"id":251},"integración-de-audio-y-datos","Integración de audio y datos",[166,254,255],{},"La radio expone una API de Now Playing, que se consume tanto en la web como en el overlay del stream mediante Browser Source en OBS.",[166,257,258],{},"Esto permite mostrar en tiempo real:",[181,260,261,264,267],{},[184,262,263],{},"Título de la canción",[184,265,266],{},"Artwork",[184,268,269],{},"Número de oyentes",[166,271,272],{},"El visualizador está desarrollado con canvas y funciones matemáticas personalizadas, simulando reactividad musical sin depender de análisis directo del audio.",[173,274,276],{"id":275},"identidad-visual-y-marca","Identidad visual y marca",[166,278,279],{},"Uno de los pilares del proyecto fue construir una identidad reconocible:",[181,281,282,288,294],{},[184,283,284,287],{},[209,285,286],{},"Paleta de colores:"," negro y rosa.",[184,289,290,293],{},[209,291,292],{},"Personaje:"," Kira como elemento central.",[184,295,296,299],{},[209,297,298],{},"Estilo:"," cyber, underground y neon.",[166,301,302],{},"Este sistema visual se aplica de forma consistente en la web, el stream, las redes sociales y las miniaturas.",[166,304,305],{},"El objetivo era crear una marca con personalidad propia, al nivel de canales 24\u002F7 consolidados, pero con una estética diferenciada.",[173,307,309],{"id":308},"plataforma-web","Plataforma web",[166,311,312],{},"La web actúa como núcleo del proyecto:",[181,314,315,318,321,324],{},[184,316,317],{},"Reproductor de radio en directo",[184,319,320],{},"Metadata en tiempo real",[184,322,323],{},"Componentes animados",[184,325,326],{},"Visualizador propio",[166,328,329],{},"No es solo un reproductor, sino una extensión de la experiencia de marca.",[173,331,333],{"id":332},"generación-de-contenido","Generación de contenido",[166,335,336],{},"La música se genera mediante flujos asistidos por IA con Suno, lo que permite crear contenido original de forma continua, mantener el control total de los derechos y escalar rápidamente la biblioteca musical.",[166,338,339],{},"Esto elimina dependencias externas y convierte el proyecto en un sistema autosuficiente.",[173,341,343],{"id":342},"estrategia-de-distribución","Estrategia de distribución",[166,345,346],{},"El crecimiento del proyecto se plantea a través de:",[181,348,349,352,355],{},[184,350,351],{},"Streaming 24\u002F7 en YouTube",[184,353,354],{},"Presencia en redes sociales: TikTok e Instagram",[184,356,357],{},"Interacción con la comunidad",[166,359,360],{},"A medio y largo plazo, la idea es evolucionar hacia una plataforma donde DJs puedan enviar sesiones, artistas puedan promocionarse y marcas puedan colaborar.",[173,362,364],{"id":363},"retos","Retos",[181,366,367,370,373,376],{},[184,368,369],{},"Mantener estabilidad en emisiones 24\u002F7.",[184,371,372],{},"Optimizar el rendimiento de OBS en macOS.",[184,374,375],{},"Diseñar overlays visuales eficientes.",[184,377,378],{},"Plantear una arquitectura escalable.",[173,380,382],{"id":381},"próximos-pasos","Próximos pasos",[181,384,385,388,391,394],{},[184,386,387],{},"Migración a un sistema sin OBS mediante FFmpeg y RTMP.",[184,389,390],{},"Automatización completa del pipeline.",[184,392,393],{},"Analítica avanzada.",[184,395,396],{},"Sistema de monetización.",[173,398,400],{"id":399},"conclusión","Conclusión",[166,402,403],{},"Kira Beats no es solo una radio, sino un proyecto que combina desarrollo, infraestructura, diseño y producto.",[166,405,406],{},"Representa cómo un proyecto personal puede evolucionar hacia una plataforma digital real cuando se integran creatividad y tecnología.",[166,408,409],{},[209,410,411],{},"Kira Beats — Music. Atmosphere. Identity.",{"title":13,"searchDepth":14,"depth":14,"links":413},[414,415,416,417,418,419,420,421,422,423],{"id":175,"depth":14,"text":176},{"id":201,"depth":14,"text":202},{"id":251,"depth":14,"text":252},{"id":275,"depth":14,"text":276},{"id":308,"depth":14,"text":309},{"id":332,"depth":14,"text":333},{"id":342,"depth":14,"text":343},{"id":363,"depth":14,"text":364},{"id":381,"depth":14,"text":382},{"id":399,"depth":14,"text":400},[146,425,426,427],"Branding","Producto digital","Infraestructura","Proyecto personal",{"src":430,"alt":431},"\u002Fimages\u002Fprojects\u002Fkira-beats\u002Fcover.webp","Kira en una ciudad nocturna de estética cyberpunk","Radio online automatizada con streaming, identidad visual, metadata en tiempo real y una plataforma web desarrollada con Nuxt.","https:\u002F\u002Fwww.kirabeats.com\u002F",true,[436,439,442],{"src":437,"alt":438},"\u002Fimages\u002Fprojects\u002Fkira-beats\u002Fabout.webp","Universo visual nocturno de Kira Beats con su rótulo de neón",{"src":440,"alt":441},"\u002Fimages\u002Fprojects\u002Fkira-beats\u002Fvisual.webp","Paisaje urbano de neón que forma parte de la identidad de Kira Beats",{"src":443,"alt":444},"\u002Fimages\u002Fprojects\u002Fkira-beats\u002Fsignature.webp","Imagen de firma de la identidad visual de Kira Beats",{},"\u002Fprojects\u002Fkira-beats",{"title":448,"description":449,"image":430},"Kira Beats | Suquet Estudi","Radio online 24\u002F7 que combina streaming, desarrollo web y branding en una plataforma automatizada y escalable.","kira-beats","projects\u002Fkira-beats","Plataforma de radio online 24\u002F7 que combina streaming, desarrollo web y branding para crear una experiencia musical automatizada y escalable.",[454,455,456,457,458,459,460,461,462],"Vue.js","Nuxt","Web","JavaScript","CSS","HTML","AzuraCast","OBS Studio","YouTube Live","VQNBXrteORWqc9dSG5uaNkTdvmPkzxA9QDl8wtI2sQg",1787368545715]