How We Feel Onboarding

The onboarding flow for How We Feel uses organic, fluid motion to create a calm and supportive atmosphere. Transitions between screens feature soft morphing shapes, crossfades, and staggered text reveals. A key highlight is the interactive emotion grid, where colorful circles representing different energy levels and pleasantness expand, contract, and drift with elastic physics as the user pans. When a specific emotion bubble is tapped, it smoothly scales and morphs into a large, stylized vessel shape that anchors the top of the screen, while contextual check-in options slide up from the bottom. Circular progress bars, hand-drawn illustration reveals, and playful character animations further enrich the experience.