A what's-new screen of mixed-size tiles that open into detail.
A mixed-size tile grid packed by a custom Layout, with press depth, haptics, scroll-linked reveal and a matched-geometry detail surface.
$199 once, every piece included. See how installing works · Sign in
SwiftUI source you own, built on Apple frameworks only.
LayoutSubscription App (template)
How it behaves, what it handles, and the decisions behind it.
A custom Layout packs 1×1, 2×1 and 2×2 tiles into square cells, scanning left to right so wide and large tiles settle around small ones. Tiles depress with a spring and a soft haptic on press; release opens a detail surface that morphs out of the tile with matchedGeometryEffect, dims the grid, and can be dragged down to dismiss (flicks commit via predictedEndTranslation). Reveal is scroll-linked through scrollTransition. Tiles sit on themed surfaces with a single accent for symbols.
ScrollView so the detail surface can cover all of it. Give it the screen (or a tall frame) and use header for the section title.BentoGridBlockExample at the end of BentoGridBlock.swift is the screen shown in the preview; copy it as a starting point.SPTheme from @Environment(\.spTheme), so install the design-system item with it.tint defaults to color.accent and colors the symbol badges.color.bg. Tiles use spSurface(.e1) and the detail surface uses spSurface(.e4), both with radius.lg, so the morph keeps its corners.type.headline, type.title2 and type.title1; badge corners are capped at radius.md, so tighter themes square them up.Pieces that work well next to this one.