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.
$199 once, every piece included. See how installing works · Sign in
SwiftUI source you own, built on Apple frameworks only.
glassEffectID in a GlassEffectContainer on iOS 26, matched geometry belowProductivity App (template), Meditation App (template)
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.
.selection when collapsing. Segment changes tick with .selection.matchedGeometryEffect id between the toolbar capsule and the panel row, so switching state carries the selection with it.predictedEndTranslation exceeds 90pt..isModal.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.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.Pieces that work well next to this one.