Bienestar · Web inmersiva · Sistema de gestión del estudio
YogaRooted
Una web hecha de papel, agua y luz, y el sistema sereno que gestiona el estudio por detrás.
- Cliente
- YogaRooted
- Sector
- Bienestar · Clases, cursos y consultas
- Mercado
- España · Online
- Rol
- Dirección de arte, diseño y desarrollo completo
- Periodo
- 2026
- Alcance
- Web inmersiva · Reservas · Cursos · Facturación · Informes
YogaRooted es un estudio de yoga y meditación que lleva una sola profesora. El encargo pedía algo que se sintiera como cruzar el umbral de un templo de piedra al amanecer: épico, mágico, con aura y en calma. Dirigí y construí esa web en WebGL y diseñé el sistema de gestión que reserva, factura e informa por detrás.
Las webs de bienestar se parecen todas: atardeceres, posturas de stock, un widget de reservas en pastel. El estudio necesitaba lo contrario: un lugar con presencia real que, aun así, hiciera imposible no ver lo práctico (horario, precios, reserva). Y detrás, una profesora ahogada entre cinco herramientas y un calendario de papel.
Un único material para todo: un papel cálido que puede volverse agua, recibir luz y sostener oro. Cada estancia es una pequeña práctica; cada interacción tiene una alternativa tranquila.
El logotipo, cobrando vida
La marca del estudio es una gota, dos hojas, un círculo abierto y dos puntos. La obertura cuenta exactamente esa historia en trece segundos: una rama en tinta y acuarela, una gota que se condensa y cae, papel que se vuelve agua, ondas que dibujan un Sri Yantra dorado y la palabra Enraizar.
Nada de esto es vídeo. Cada fotograma se dibuja en tiempo real con Three.js y GLSL propio: fibra de papel, refracción, cáusticas, difusión de tinta.
La misma sala a las nueve de la mañana y a medianoche
La web lee el reloj del visitante. Al amanecer la luz es cobre; a mediodía, clara; al atardecer, dorada. De noche el papel pasa a oliva profundo, la tinta se vuelve crema y el yantra brilla. Los fotogramas clave se interpolan sin saltos y el contraste se mide para cumplir AA a cualquier hora. Arrastra sobre la imagen:
Un templo dibujado trazo a trazo
Al hacer scroll, un Sri Yantra se construye como se dibuja a mano: primero lápiz y compás, cotas y puntos de construcción, después el loto y el recinto y, al final, pan de oro sobre la tinta. Cada etapa nombra su término sánscrito, su transliteración y su fuente.
Estancias que premian la atención
Mantén pulsado el halo y te enseña la respiración cuadrada. Acerca una linterna y aparecen notas ocultas. Quédate quieto cuatro segundos y surge una tinta invisible: un Yoga Sutra en devanagari. Gira el cielo nocturno hasta que sus estrellas formen un loto. Y si pulsas tres nodos del yantra de Sarasvatī en el orden correcto, el papel se fractura y te deja entrar en una meditación guiada.
- Versión 2D para dispositivos modestos y navegadores sin WebGL
- Una composición completa para movimiento reducido
- Fotogramas adaptativos: 60 fps al interactuar, 10 fps en reposo
- Cada interacción accesible con el teclado
Reservar en tres pasos
Práctica → día y hora → datos. Cada plaza se dibuja como un bindu (el punto central de un yantra), así que “quedan dos” es información, no presión. Las sesiones online y presenciales comparten calendario; cursos, bonos y consultas pasan por el mismo flujo, y la factura se genera desde el pedido.
- 1Tres pasos, dichos desde el principio
- 2Plazas como bindus bajo cada día
- 3Hora local y aforo en vivo, en palabras
Cursos, un cuaderno de campo y la app del alumno
Los cursos se encuadernan como manuscritos, cada uno en un pigmento de la paleta. El cuaderno de campo recuerda las estancias visitadas, tus días de respiración y tu próxima clase, y un reloj de sol permite fijar la luz. Los alumnos tienen su propio espacio para volver a reservar en dos toques.
El sistema detrás de las pantallas
Cuatro palabras guiaron cada decisión (épica, magia, aura, calma) y una tensión las sostuvo: grandeza sin ruido. Toda la web vive sobre un único material, un papel cálido que puede volverse agua, recibir luz y sostener oro.
Color
Todos los colores salen del logotipo y de la rama en acuarela. La paleta se modula según la hora local del visitante: de noche el papel pasa a abismo oliva y el texto a crema, y el contraste se vuelve a medir en cada fotograma clave.
Tipografía
Enraizar
Titulares · títulos · citasGaramond de alto contraste con cursiva verdadera: la voz de un manuscrito.
Hatha lento · 75 min · Quedan 2 plazas
Texto práctico · horario · reservasLimpia y actual para que la información práctica nunca sea mística.
Mūla · raíz
Inscripciones · etiquetasCapitales romanas grabadas, usadas con mesura, como inscripciones en piedra.
मूल योग यन्त्र
Términos sánscritosSiempre acompañado de su transliteración IAST y su significado.
Retícula y espaciado
- Columnas
- 12
- Ancho máx.
- 1440px
- Medianil
- 24px
- Unidad base
- 8px
El espaciado crece en pasos de Fibonacci (8, 13, 21, 34, 55, 89), las mismas proporciones con las que se construyen los yantras, para que el blanco respire en lugar de apilarse.
Decisiones, y por qué
-
01
El logotipo es el guion de la obertura
Por quéUna gota, dos hojas, un círculo abierto y dos puntos se convierten en los primeros trece segundos: la marca se aprende, no se enseña.
En lugar de
Un vídeo genérico de atardecer en la portada. -
02
Oro solo donde toca la luz
Por quéLa escasez lo mantiene sagrado; el exceso lo convierte en adorno.
En lugar de
Bordes dorados en cada tarjeta y botón. -
03
Plazas dibujadas como bindus
Por quéEl aforo forma parte del lenguaje visual: escasez honesta, sin cuentas atrás.
En lugar de
Etiquetas rojas de “¡Solo quedan 2!”. -
04
La magia nunca esconde el horario
Por qué“Reservar una práctica” está en la cabecera de cada estancia, con palabras claras.
En lugar de
La reserva escondida al final de la experiencia.
Esquema
- 1Una gota: se condensa en la hoja y cae a los 4,2 s
- 2Dos hojas: la rama en acuarela que abre la escena
- 3Un círculo abierto: la onda que convierte el papel en agua
- 4Dos puntos: los bindus: origen y destino, el centro del yantra
- Dirección de arte y concepto visual
- Web inmersiva + versión 2D
- Flujo de reserva y pago
- App de gestión (7 módulos)
- Facturación e informes
- Área del alumno
- Membresías con renovación automática y pausa.
- Listas de espera que ocupan solas las plazas liberadas.
- Versión en inglés para alumnos internacionales de retiros.
