Every screen, flow, block and app template in SwiftPieces Pro, for good.All of Pro, $199 once.$199 once.Get Pro

Screen · Media

Reader SwiftUI Screen

A long-read article with a serif headline and a floating pill that morphs into a reading toolbar.

An article reader: drawn cover art, a serif headline, pull quotes and a progress bar, with a floating pill that morphs into a toolbar on tap (type size, save, share, listen) and a scrimmed panel on long-press, through glassEffectID on iOS 26 and matched geometry below, with per-transition haptics and drag-down collapse.

  • SwiftUI
  • iOS 17.0+
  • morph-nav
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.

  • An editorial reader with cover art, pull quotes and progress
  • Tap morphs the pill to a reading toolbar, long-press to a panel
  • glassEffectID in a GlassEffectContainer on iOS 26, matched geometry below
  • Per-transition haptics and drag-down collapse

Used in

Productivity App (template), Meditation App (template)

02

Implementation notes

How it behaves, what it handles, and the decisions behind it.

At rest MorphNav is a compact pill with the title and one action. Tap it and the pill morphs into a full toolbar with a segmented row and every action; long-press the pill or the toolbar and it morphs into a sheet-like panel with the segments as rows, under a scrim. Dragging the panel down collapses it back to the toolbar, and tapping the scrim does the same. On iOS 26 the three states share one glassEffectID inside a GlassEffectContainer, so the glass itself morphs; below, a Material surface and matchedGeometryEffect carry the shape.

Notes

  • States: pill, toolbar, panel, plus pressed on the pill. Each transition has its own haptic: soft impact for pill to toolbar, rigid impact into the panel, .selection when collapsing. Segment changes tick with .selection.
  • The selected segment's fill shares a matchedGeometryEffect id between the toolbar capsule and the panel row, so switching state carries the selection with it.
  • The panel drag rubber-bands upward and collapses when predictedEndTranslation exceeds 90pt.
  • The pill is a VoiceOver button with an "Open panel" custom action; the toolbar and panel are containers with an escape action, and the panel carries .isModal.
  • Reduce Motion uses short ease-in-outs for every morph; Reduce Transparency swaps glass and Material for an opaque secondary background.
  • The Reader passes the theme into the pill's existing parameters: a solid ink background, the clay block as tint with its ink as selectedForeground, and the serif display face as titleFont. The pill's title counts down the minutes left from the scroll position, which also drives the progress bar.
  • The type size segments restyle the article body, and Listen, Save and Share write back into the screen with a short confirmation chip. The cover art is drawn in code with SPScenery plus a train in the same 400 × 500 space, so there are no assets.
  • MorphNavExample, the Quill notes screen the Productivity App template embeds, is still in the file unchanged.
  • MorphNavScreenExample at the end of MorphNav.swift is the Reader screen from the preview.

03

Keep building

Pieces that work well next to this one.