Shakti Mandalas

Contexto

Un estudio de arteterapia en Guayaquil que pinta mandalas por encargo, cada uno partiendo de la historia de quien lo pide. Vende talleres, sesiones y piezas físicas.

El encargo pedía una web que transmitiera el trabajo manual sin caer en la estética de “espiritualidad de stock”: ni degradados morados, ni mandalas vectoriales genéricos, ni tipografía de yoga.

Enfoque

• El producto real como imagen. El hero muestra mandalas pintados a mano, fotografiados sobre la mesa de trabajo con los rotuladores a la vista. La textura del papel es el argumento: se nota que está hecho a mano porque se ve.
• Motion condicional por plantilla, medido. Es la decisión de la que más he aprendido en este proyecto. GSAP con ScrollTrigger, SplitText y DrawSVG entra solo en las tres páginas narrativas — portada, quiénes somos y servicios — donde la coreografía aporta. Blog, tienda y contacto llevan una capa ligera de IntersectionObserver más CSS. Y carrito, checkout y mi cuenta quedan excluidos por completo: cero kilobytes de motion.
• La razón no es el peso, es el criterio. Animar el paso de un checkout no mejora nada y sí introduce riesgo en la pantalla donde el usuario decide pagar.
• prefers-reduced-motion en tres capas: CSS global, salida temprana en JavaScript, y estados iniciales aplicados solo desde JS y nunca en CSS estático. Esa tercera capa es la que evita el fallo clásico: si el estado inicial invisible vive en el CSS y el JS no llega a ejecutarse, el contenido no aparece nunca.
• View Transitions entre documentos con CSS puro, sin router de cliente. Fundido y elevación de 360 ms, con header y botón flotante estables, y desactivadas en las zonas de WooCommerce.
• Tema FSE propio derivado del starter del estudio, con theme.json como fuente de verdad y GSAP servido desde el propio dominio.

Trabajo realizado

• Tema WordPress FSE a medida con sistema de tokens propio
• Tienda WooCommerce con catálogo de mandalas y talleres
• Capa de motion GSAP con enqueue condicional por plantilla
• View Transitions entre páginas en CSS puro
• Formularios con antispam y SEO técnico con schemas JSON-LD
• Tipografías self-hosted en woff2

Resultado

En producción sobre su dominio. La parte que mejor envejece es la de motion: al estar la lógica de carga concentrada en un solo fichero que decide por plantilla, añadir una página nueva no obliga a revisar qué scripts se cargan.

Nota sobre el trabajo

Proyecto personal, fuera del estudio: diseño, desarrollo, rendimiento, accesibilidad, SEO y despliegue. Las fotografías de los mandalas las aporta la clienta, y son obra suya.