This onboarding bottom sheet features a looping animation that demonstrates the two sizes of the Net Worth widget. The widget container smoothly morphs its height, expanding from a compact horizontal card to a larger square card, and then collapsing back down. During the transition, the internal elements adapt: a purple line graph draws itself dynamically to represent net worth data, and a subtle chevron indicator fades in to signal the expand/collapse capability. The motion uses a highly polished spring easing that makes the card feel tactile and responsive, effectively teaching the user how the widget behaves in a playful, visual manner.

Category