An original Swift Pieces remix inspired by Mela. Screenshots © Silvio Rizzi, for reference only; not affiliated. Terms
Recipe and Cooking Mode: a Swift Pieces remix in SwiftUI, inspired by Mela
A recipe manager in six screens across three tabs on a floating dock, in the Swift Pieces look, light or dark: a recipe library whose All, Quick and Soups tabs swap a grid of recipes to cook again and rows with a picture, time and two lines on each dish, every picture typographic cover art; a recipe under its large title with its cover as the hero, a line on the dish, facts as quiet cards and one squashy Start cooking; a centred cooking mode with an oven timer you turn and one step in focus; a sheet that scales servings on an expanding track and swaps metric for cups in tabs; tonight's recipe as a row with its cover, a week of meals you swipe to pin or remove, with an empty weekend that offers a recipe; and a shopping list with a rolling count over aisles in tracking tabs. Shape lock: actions are pills, cards 24, tiles 16. Built from Screen Header, Tracking Tabs, Cover Grid, Media Row, Stat Grid, Elastic Button, Commit Button, Timer Dial, Focus Steps, Expanding Track, Day Picker, Swipe Action Row, Odometer and Task Row.
- Swipe from All to Quick and open a recipe
- Tap Start cooking, turn the oven timer and step through
- Open the sliders button, drag the servings track and swipe to US cups
- Swipe a planned meal, or pick a recipe for the weekend
- Swipe between aisles and tick off the shopping list
- Tabs: Each tab keeps its own place, so switching back returns you where you were.
- Push: The next screen slides in from the trailing edge; back slides it away.
- Sheet: The sheet rises over the screen, rests at its detents and follows your drag to dismiss.
- Tap: A tap acts on release, so dragging off cancels it.
- Press: The control dips while your finger is down and springs back on release.
- Drag: It tracks 1:1 under your finger and settles with a spring when released.
- Swipe: It follows your finger, then commits or springs home based on distance and speed.
- Toggle: The state changes at once and the control animates to match.
- Select: The selection moves between options instead of blinking.
- Loading: The control shows progress in place, then resolves to success or an error.
- Spring: Motion overshoots slightly and settles, the way physical things do.
- Haptic: A short tap of vibration confirms the moment something happens.
