Screen · Health
Sleep SwiftUI Screen
Last night as a stepped stage timeline you scrub, with stage totals as capsule bars.
A night of sleep as a hypnogram: stages drawn as stepped blocks across the night, a scrubber you drag to read the stage and time under your finger, stage totals as capsule bars, and bedtime, wake and restfulness figures that update with the night you pick.
- SwiftUI
- iOS 17.0+
- sleep-timeline
$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 stepped stage timeline with a scrubber and a haptic at each stage change
- Stage totals as capsule bars that highlight with the timeline
- Switch nights with a swipe; figures roll between them
- Loading, empty (no ring data) and error states
- The Sleep screen from the preview, ready to adapt
In the Build Kit
Studio (style), Health and Fitness (brief), Meditation and Sleep (brief), Daily Health (recipe). Your agent builds around this screen in the same design.
Used in
Sleep App (template)
02
Implementation notes
How it behaves, what it handles, and the decisions behind it.
A night reads as a shape before it reads as data: each stage is a solid block in its own lane (Awake, REM, Light, Deep), joined to the next by a hairline step, drawn in from the left whenever the night changes. Drag anywhere on the chart and a scrubber follows your finger with a chip reading the stage and time under it, a haptic as it crosses into another stage, and the stage totals below lighting up with it. Swipe the time asleep, or tap a night in the strip, to move through the week.
Notes
- Map your samples to
[SleepSegment]per night, in order and without gaps, and pass them toSleepTimeline(segments:). HealthKit's sleep analysis samples map one to one. - Bind
scrubto read the time under the finger elsewhere. The array helperssleepStageTotals,sleepAsleep,sleepInBed,sleepEfficiencyandsleepSegment(at:)do the arithmetic the screen shows. - Colours come in as
fillsandinksby stage, so the chart is painted in your theme's blocks. The example uses four scheme blocks and the family's numerals for every figure. - VoiceOver reads the night as one summary and steps through the segments with swipe up and down ("REM, 3:42 AM to 4:10 AM"). At accessibility text sizes the lane labels give their width back to the chart.
- Reduce Motion swaps the left-to-right draw for a fade.
- The example ships loading, no ring data and error states as previews; each empty state has one action.
SleepTimelineExampleat the end ofSleepTimeline.swiftis the screen shown in the preview; copy it as a starting point.
03
Keep building
Pieces that work well next to this one.