Swift PiecesPro
  • Library
    Screens48Finished, designed screens for real apps.Templates10Complete apps built from the screens.Build Kit24Styles, briefs and recipes for your coding agentEverything58The whole library, with search
  • Docs
  • Pro

Library

  • Screens48
  • Templates10
  • Build Kit24
  • Everything58
  • Docs
  • Pro
  • Account
Get Swift Pieces ProFree library ↗
Swift PiecesPro

Production-ready SwiftUI screens and app templates for iOS. The pieces to build the whole app.

Library

  • Screens
  • Templates
  • Build Kit
  • Everything

Product

  • Pro
  • Your account
  • Sign in

Resources

  • Docs
  • CLI
  • MCP and agents
  • Free library

Social

  • X / Twitter
  • GitHub

SWIFTPIECES PRO

© 2026 Swift Pieces. One payment, lifetime access, per-developer commercial license.

Curated withby Saivion

LibraryScreensNow Playing

Screen · Media

Now Playing

A music library with a floating player that grows into a full now-playing screen.

A floating now-playing capsule with a progress ring that grows into a full player under the finger: matched-geometry artwork and title, the cover above a solid control panel, favorite and more buttons, scrub and volume bars that thicken under the finger, and an optional action row.

SwiftUIiOS 17.0+mini-player

Get Swift Pieces 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 floating capsule with a progress ring above the tab bar
  • Expands under the finger with matched artwork and title
  • The cover above a solid control panel with a big play dial
  • Scrub and volume bars that thicken under the finger
  • Favorite, more and an optional action row

02

Implementation notes

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

At rest it is a floating capsule above the bottom edge: artwork, title and artist, a play/pause button ringed by playback progress, and skip. Tap it or drag up and it becomes the full player: height, margins and corner radius follow the finger, the artwork and title travel between the two layouts with matchedGeometryEffect, and an ambient backdrop drawn from the cover fades in behind them. Release projects the flick with predictedEndTranslation and commits with a spring and a soft haptic.

The full player has a large title row with optional favorite and more buttons, a scrub bar and a volume slider that thicken from 6pt to 12pt while held, transport controls, and an optional row of actions such as lyrics, a sleep timer or the queue. The artwork eases smaller while paused. No AVFoundation: pass a NowPlaying model, isPlaying and progress, and handle the callbacks.

Options

  • isFavorite: Binding<Bool>? adds a star to the title row.
  • volume: Binding<Double>? adds the volume slider (0 to 1).
  • actions: [MiniPlayerAction] fills the bottom row; isOn draws an action selected.
  • onMore adds an ellipsis button for your own menu or confirmation dialog.
  • tint colors the scrub, volume and transport controls. The full player always renders dark over its backdrop, so the default .primary reads white there.

Notes

  • States: capsule, dragging (rubber-banded past both ends), expanded, scrubbing, adjusting volume, playing/paused (artwork scale), favorite and actions on/off.
  • The layout switches from compact to expanded at 30% travel so the matched morph has room; below that the capsule stretches, above it the full player's controls fade in with progress.
  • Place it in a ZStack over your content; it reads the container's safe area and ignores it while expanding, so it reaches the display edges at full height. Pass bottomInset to float above a tab bar.
  • The scrub and volume gestures are child DragGestures so they win over the expand drag. VoiceOver gets adjustable actions: 15-second steps for position, 10% steps for volume.
  • Reduce Motion replaces springs with short ease-outs and skips the paused-artwork scale. Reduce Transparency swaps the material and blurred cover for opaque surfaces.
  • MiniPlayerExample at the end of MiniPlayer.swift is the screen shown in the preview; copy it as a starting point. Its covers are drawn in code (AlbumArt), so it has no asset dependency.

03

Keep building

Pieces that work well next to this one.

Screen · Media

Podcast Player

An episode player built on a waveform you scrub, with chapters, speed and sleep.

Screen · Media

Gallery

A trip album that pages with depth, captions on color blocks, and a pinch to peek at the centred photo.

Screen · Education

Lessons

A language-learning home with a streak, today's goals as color blocks and a floating tab bar whose lens follows your finger.