Summary The application utilizes a sophisticated, Jetpack Compose-based UI system focused on data visualization and gamification. It moves beyond standard Material Design by incorporating physics-based animations, custom canvas drawing for charts, and interactive mascots. The system prioritizes fluid motion, haptic feedback, and a distinct visual hierarchy to represent digital wellbeing data.
Heatmaps : InteractiveCalendarHeatmap.kt, CompactWeeklyHeatmap.ktCharts : HeroAppUsageCard.ktIndicators : LimitProgressIndicator.kt, HeroCircularProgress.ktVisual Effects : WarpBackground.kt, SineWaveLine.kt, TextScramble.ktMascots : PixelPet.ktArt : WelcomeArtVector.kt Theme The UI relies heavily on the Material 3 color system but applies it dynamically to represent data intensity and state.
Colors
Data Visualization
Primary : Used for high intensity in heatmaps and active progress.Surface Container High : Used for low intensity or empty states in charts.Error : Used for limit breaches and “crossed out” states.Tertiary : Used for warning thresholds (e.g., 70% limit usage).
Interactive Elements
Inverse Surface : Tooltip backgrounds.Outline Variant : Subtle borders for empty data cells.Primary Container : Backgrounds for hero art vectors. Typography Style Usage Display Medium Large total screen time counters in Hero cards. Title Medium Section headers and month labels. Body Medium Standard text, app names in lists. Label Small Axis labels (Mon, Tue, Wed) and legend text.
Spacing & Layout Token Value Used For Gutter 2dp Spacing between heatmap cells. Standard 16dp Screen margins and card padding. Relaxed 24dp Internal padding for Hero cards. Tight 8dp Spacing between icons and text.
Components Interactive Calendar Heatmap What it is: A scrollable, month-based grid visualization showing daily intensity of data (e.g., screen time).Interaction Model: Visual Logic: State Visual Representation Empty Low opacity surface color with subtle border. Filled Gradient from Surface High to Primary based on value. Selected Thick border and bold text. Today Primary colored border.
Premium Packed Bubble Chart What it is: A physics-based visualization where app icons are represented as bubbles, sized relative to their usage time.Behavior:
Packing Algorithm: Bubbles are not in a grid; they spiral outward from the center, packing tightly based on their radius.Breathing: Bubbles gently scale up and down asynchronously to create an “alive” feeling.Interaction: Tapping a bubble triggers a spring animation and reveals a tooltip with usage stats.
Hero App Usage Card What it is: The primary dashboard component summarizing daily activity.States: State Content Loading Displays an “Infinity Loader” Lottie animation. Empty Shows a generic mobile icon with “No usage data” text. Low Usage Displays a star icon with a “Great job focusing” message. Active Displays the Total Screen Time and the Bubble Chart.
Progress Indicators What it is: A suite of linear and circular indicators for tracking limits and goals.Variants: Variant Description LimitProgressIndicator Linear bar that changes color (Blue -> Yellow -> Red) as the user approaches their limit. WavyCircularIndicator A circular loader with a sinusoidal wave path along the stroke. HeroCircularProgress A large ring that transitions from a loader to a Success (Check) or Failure (Cross) icon.
Mascots (Gamification) What it is: Interactive characters that respond to app state and user focus levels.Pixel Pet:
A retro, Tamagotchi-style pet rendered on a pixel grid.
Rendering: Uses Canvas to draw individual rects for pixels.Effects: Includes a CRT scanline overlay and “glitch” particle effects when confused.Moods: Idle, Eating, Cool (sunglasses), Confused, Sad.
Focus Spirit:
A fluid, organic blob that simulates jelly-like physics.
Physics: The “face” lags behind the “body” during movement to create drag.Rendering: Uses cubic bezier curves to create a soft, morphing shape.Moods: Asleep, Neutral, Curious, Determined, Happy.
Visual Effects Library Component Description WarpBackground A 3D perspective tunnel effect. It projects beams moving from the center outward, creating a sense of speed or depth. SineWaveLine A mathematical line drawing that undulates using a sine wave function, useful for dividers or subtle motion.
Component Description TextScramble A “Matrix-style” reveal where characters cycle through random symbols before settling on the final text.
Component Description PullToRefresh Uses random fitness-themed Lottie animations (e.g., running, swimming) tinted to the primary theme color.
Screen Structure Visualizations are typically embedded within a card-based layout structure:
ScreenScaffold ├── TopBar ├── ScrollableContent │ ├── HeroAppUsageCard (Bubble Chart) │ ├── SectionHeader │ ├── HeatmapCard (Calendar View) │ └── DailyDeviceSummaryList └── BottomBar
State Handling The UI system uses distinct visual metaphors for different data states:
State Visual Metaphor Loading Wavy circular indicators or Lottie animations. Success Green/Primary checkmarks, confetti, or “Happy” mascot mood. Warning Yellow/Tertiary progress bars (70-90% usage). Critical Red/Error progress bars (>90% usage), “Sad” mascot mood. Empty Dashed borders, low opacity icons, or “Asleep” mascot mood.
Animations & Physics The system avoids static transitions in favor of physics-based motion:
Springs: Used for bubble chart entry, mascot movement, and button presses.Infinite Transitions: Used for “breathing” effects on bubbles and the “warp” speed of the background.Canvas Drawing: Custom drawing cycles are used for the Pixel Pet and Focus Spirit to allow frame-by-frame manipulation of shape and color.Haptics: Tightly integrated with animations. Scrubbing a heatmap or touching a bubble triggers impact feedback proportional to the interaction intensity. Last modified on January 25, 2026
