Shakti Mandalas

Context

An art therapy studio in Guayaquil that paints mandalas to order, each one starting from the story of the person commissioning it. It sells workshops, sessions and physical pieces.

The brief asked for a site that conveyed handmade work without falling into stock-spirituality aesthetics: no purple gradients, no generic vector mandalas, no yoga typeface.

Approach

• The real product as the image. The hero shows hand-painted mandalas photographed on the work table with the markers still in frame. The paper texture is the argument: you can tell it’s handmade because you can see it.
• Template-conditional motion, measured. This is the decision I learned most from here. GSAP with ScrollTrigger, SplitText and DrawSVG loads only on the three narrative pages — home, about and services — where choreography earns its place. Blog, shop and contact get a light IntersectionObserver-plus-CSS layer. Cart, checkout and account are excluded entirely: zero kilobytes of motion.
• The reason isn’t weight, it’s judgement. Animating a checkout step improves nothing and introduces risk on the screen where someone decides to pay.
• prefers-reduced-motion in three layers: global CSS, an early return in JavaScript, and initial states applied only from JS and never in static CSS. That third layer is what avoids the classic failure: if the invisible initial state lives in CSS and the JS never runs, the content never appears at all.
• Cross-document View Transitions in pure CSS, no client router. A 360 ms fade-and-rise with the header and floating button held stable, disabled across WooCommerce areas.
• Custom FSE theme derived from the studio starter, with theme.json as the source of truth and GSAP served from the site’s own domain.

What I built

• Bespoke WordPress FSE theme with its own token system
• WooCommerce shop with a catalogue of mandalas and workshops
• GSAP motion layer with template-conditional enqueueing
• Pure-CSS page-to-page View Transitions
• Forms with antispam, and technical SEO with JSON-LD schemas
• Self-hosted woff2 typography

Outcome

Live on its own domain. The part that ages best is the motion layer: with the loading logic concentrated in one file that decides per template, adding a new page doesn’t mean auditing which scripts load.

A note on this work

A personal project, outside the studio: design, development, performance, accessibility, SEO and deployment. Mandala photography is supplied by the client, and the artwork is hers.