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
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 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

  • action is yours: load or create data, then set isEmpty = false. It animates the change itself; no withAnimation needed.
  • 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.
  • GhostStateBlockScreenExample at the end of GhostStateBlock.swift is the Projects screen from the preview.

Theming

  • Reads SPTheme from @Environment(\.spTheme), so install the design-system item with it.
  • tint defaults to color.accent for the button; the button label uses color.accentOn.
  • Ghost rows fill with color.fill and round with radius.md; the title and message use type.title3 and type.subhead in color.textPrimary and color.textSecondary.
  • It paints no ground of its own, so it sits on whatever surface you place it in.