Screen · Health

Mood SwiftUI Screen

A daily mood check-in around a glass orb with a Siri-style wave inside and a week of moods as bars.

A mood check-in screen: a dark glass orb whose thin voice wave travels through the equator, in a distinct palette per mood that glides as you choose, mood choices as round-faced blocks, and the week's moods as a bar chart.

  • SwiftUI
  • iOS 17.0+
  • noise-orb
Get SwiftPieces Pro

$199 once, every piece included. See how installing works · Sign in

01

What's included

SwiftUI source you own, built on Apple frameworks only.

  • A mood check-in with choices and a weekly chart
  • A dark glass orb with four sine membranes travelling inside
  • Five mood palettes, indigo to coral, that glide on change
  • NoiseOrb(size:palette:) for avatars and assistants

In the Build Kit

Meditation and Sleep (brief). Your agent builds around this screen in the same design.

Used in

Meditation App (template)

02

Implementation notes

How it behaves, what it handles, and the decisions behind it.

A dark glass ball with a Siri-style voice wave inside, shipped as NoiseOrb.metal. Four thin sine membranes travel left to right through the equator with white crests, seen through a refracting shell with a cool and a warm rim. Motion is fixed to the thinking look: there is no energy or stirring, and the sphere never scales, floats or pulses. Colour is the one input, so the orb can show a mood.

Notes

  • Use it anywhere: NoiseOrb(size: 160, palette: .siri). The ball fills 90% of the square frame, so leave the frame square.
  • palette takes a NoiseOrb.Palette: four bands, a dark ground, a crest and the cool and warm rim. Build your own from hex or from Color. A change crossfades over 0.8 seconds.
  • Presets: .siri (the default), and five moods from cool and deep to warm and bright: .rough (indigo and violet), .low (sky to ocean blue), .okay (mint to teal), .good (gold and amber) and .great (apricot, coral and pink).
  • NoiseOrb.metal must be in Compile Sources; the CLI installs it beside the Swift file. Its stitchable function is noiseOrbSiriWave with helpers in the noiseOrbSiri namespace, so it links next to the other orb pieces in one target.
  • The clock is relative to first appearance, which keeps Float time precise. Reduce Motion pauses the wave and makes palette changes instant. One VoiceOver element labeled "Orb" with the value "Thinking".
  • The screen: a two-tone question, the orb in the selected mood's palette over a soft glow in the mood's block, moods on a snapping rail of round-faced blocks (swipe or tap), and the week as bars capped by faces in each day's color, with today following the selection. Picking a mood glides the orb to its colours.
  • NoiseOrbExample at the end of NoiseOrb.swift is the Mood screen from the preview.