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
$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. palettetakes aNoiseOrb.Palette: four bands, a dark ground, a crest and the cool and warm rim. Build your own from hex or fromColor. 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.metalmust be in Compile Sources; the CLI installs it beside the Swift file. Its stitchable function isnoiseOrbSiriWavewith helpers in thenoiseOrbSirinamespace, so it links next to the other orb pieces in one target.- The clock is relative to first appearance, which keeps
Floattime 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.
NoiseOrbExampleat the end ofNoiseOrb.swiftis the Mood screen from the preview.
03
Keep building
Pieces that work well next to this one.