Daily scores on a rail of tilted cards, paged by a half-circle tick dial you turn.
A score carousel for health and tracking apps: cards on a perspective rail tilt away from the centre as you swipe, each a colour block with a two-tone title, a giant light percentage and a drawn arc, while a half-circle dial of fine ticks underneath scrubs through the days with a detent per day.
$199 once, every piece included. See how installing works · Sign in
SwiftUI source you own, built on Apple frameworks only.
Frost (style), Health and Fitness (brief), Daily Health (recipe). Your agent builds around this screen in the same design.
Sleep App (template)
How it behaves, what it handles, and the decisions behind it.
The rail pages one card at a time. The centre card faces you; its neighbours turn about the vertical axis, shrink and darken as they leave the centre, and the screen edges crop them, so the rail reads as a row of objects rather than a list. Each card is one solid block: a two-tone title, a giant light percentage with a superscript unit, a thin circle with the score drawn as an arc, and one line that loops once as it crosses it, which is the score's last seven days. Under the rail, a half circle of fine radial ticks turns through the last fourteen days. The accent tick at twelve o'clock stays put while the ruler turns under it, each day clicks into place with a haptic, and every card's figure rolls to the new day as it passes.
ReadinessCarousel(days:selection:) a day per entry, each with the same scores in the same order, and bind selection to the day index. Scores pick their colour by block, an index into blocks, so a score keeps its block from day to day.ScrollView with scrollTransition, so momentum, rubber banding and scroll-position binding behave like any iOS rail. initialCard centres a card on appear; start on the second one so neighbours show on both sides.ReadinessDial stands on its own. Dragging sideways turns it with a detent per step, a flick carries on to where it would land, and past either end the ruler still moves but less and less. Pass progress instead and it becomes a meter that fills its ticks left to right, which is how Drift pairs a ring.ReadinessLoopArt is the card's circle, arc and line, reusable in widgets and details. The line morphs between days instead of jumping.ReadinessCarouselExample at the end of ReadinessCarousel.swift is the screen shown in the preview, with round floating buttons in place of a tab bar and a score detail with contributors as capsule bars. Copy it as a starting point.Pieces that work well next to this one.