Screen · Productivity
Projects SwiftUI Screen
A projects screen that starts as breathing ghost rows and hands off to your real projects.
A projects tab with a first-run empty state: ghost rows breathing at low alpha and a friendly create action, then your real projects slide into the same surface as colored blocks through a matched transition.
- SwiftUI
- iOS 17.0+
- ghost-state
$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 projects screen with a designed empty state
- Ghost rows breathing at low alpha
- Real projects slide into the same surface
- A matched transition from empty to loaded
Used in
Subscription App (template), Meditation App (template)
02
Implementation notes
How it behaves, what it handles, and the decisions behind it.
Instead of a lonely symbol, the pattern draws the silhouette of what is missing: three ghost rows (list, grid or card shape) breathing at low alpha above the message and the call to action. When you flip isEmpty to false the ghosts slide out and your content slides into the same surface through a matched geometry transition, so the reveal reads as the list arriving rather than a screen swap.
Notes
actionis yours: load or create data, then setisEmpty = false. It animates the change itself; nowithAnimationneeded.- Ghost rows are
accessibilityHidden; the title and message combine into one element. - Reduce Motion stops the breathing and swaps the slide for a crossfade. A soft impact haptic fires on the reveal.
- The screen wraps the block with a workspace pill, a title with a count sticker, scope pills and a floating tab bar. Loaded projects are overlapping color cards with big percentages; deleting the last one from a card's context menu brings the ghosts back.
GhostStateBlockExample, the earlier Cadence projects tab, stays in the file unchanged because the Subscription App template embeds it.GhostStateBlockScreenExampleat the end ofGhostStateBlock.swiftis the Projects screen from the preview.
Theming
- Reads
SPThemefrom@Environment(\.spTheme), so install thedesign-systemitem with it. tintdefaults tocolor.accentfor the button; the button label usescolor.accentOn.- Ghost rows fill with
color.filland round withradius.md; the title and message usetype.title3andtype.subheadincolor.textPrimaryandcolor.textSecondary. - It paints no ground of its own, so it sits on whatever surface you place it in.
03
Keep building
Pieces that work well next to this one.