Designing Wonder Practices

Wonder Practices is a small reference library of practices for movement, mindfulness, nervous system regulation, and communication. It's a portfolio piece and a personal tool. The launch set covers a few breath patterns, a cold face reset, a relaxation response, a loving-kindness meditation, and one routine that strings several together.

Each category gets a chip and a custom symbol: a dot for Quiet, a wave for Active, an outline heart for Intense, an open circle for Tender. The palette stays in the same deep-teal family across the whole site.

The category nav is a four-mountain landscape. Each peak is a category. Clicking one brings it forward, dims the others, and shows the practices below. The same scape sits at the top of every page.

The breathing timer is a small state machine. It tracks phases (inhale, hold, exhale, sometimes a second inhale or a hold at the bottom) and updates a circle that grows or shrinks with the breath. There's a 4-7-8 pattern, a cyclic sighing pattern, and a couple of contemplative practices without timers.

Built with Claude Code and the Superpowers planning skill. Static site, no backend, no analytics. Mobile-first.

More practices and personal notes from my physical therapy work are coming in the next pass. The CTRI Institute printable handouts are on the inspiration list for what's next.