Midway

[image attached][image attached][image attached][image attached][image attached][image attached][image attached][image attached][image attached][image attached][image attached][image attached][image attached][image attached][image attached]
Download/reference the app shown in this post and clone it exactly, including the iPhone visual design, layout, interactions, animations, typography, spacing, and all visible states. Make it functional and runnable in the simulator. Match the reference as closely as possible and include any interaction shown in the source. Reference: https://x.com/RaminNasibov/status/2120151222065692729 ("an app concept that picks a fair spot to meet for groups of friends"). The 15 attached screenshots are frames of the 20-second source video, in time order (file names carry the second, e.g. 07-t7.8 = 7.8 s). Study every one before writing code.

Build a native SwiftUI iOS app named Midway using Opus 5.5. It is a group meet-up planner: six friends on a map of Manhattan vote on what to do, the app grows a walking-time heat map out from each friend until one area is reachable by all six, ranks the pizza places inside that area by rating and fairness, and draws everyone's walking route to the winner. Portrait only, light mode only. Do NOT put a fake handset frame or fake status bar inside the app; the simulator provides the device and the real status bar. No permissions, no backend, no location: use the deterministic fixture data below.

The whole flow plays by itself on launch, on one deterministic timeline (seconds from the start of the flow), exactly like the source video. The only user taps are "Send to group" at the end and the × button, which restarts the whole flow from 0.0 s with every state reset (this is how I film it, so the restart must be instant and clean every time; it also restarts if the app is relaunched).

Observed video sequence (0-19.8 s), which the app must reproduce at the same times:
- 0.0-0.35 s: the vote sheet springs up from the bottom over the map (slight overshoot). Header "What's the plan?" with "0 of 6 voted" on the right. Four cards in a 2x2 grid: Pizza, Bar, Ramen, Tacos.
- 1.2 s: Maya votes. A thin grey ring pulses out around her avatar on the map (expands ~1.6x and fades, 0.4 s), a copy of her avatar lifts off and flies along a short arc down into the top-right corner of the Pizza card (0.45 s, shrinking from 44 pt to 24 pt), then settles at the card's bottom-right as a small 24 pt avatar; the card's count "1" pops in at its top-right (scale 0.6 -> 1 spring); header becomes "1 of 6 voted".
- 1.9 s: Leo votes Bar (same animation, lands ~2.25 s). "2 of 6 voted".
- 2.35 s: Priya votes Pizza (lands ~2.7 s, Pizza count 2, two overlapping mini avatars). "3 of 6 voted".
- 3.0 s: Jonah votes Ramen (lands ~3.35 s). "4 of 6 voted".
- 3.5 s: Sofia votes Pizza (lands ~3.85 s, Pizza 3). "5 of 6 voted".
- 4.0 s: Dev votes Pizza (lands ~4.35 s, Pizza 4, four overlapping mini avatars). "6 of 6 voted".
- 4.7 s: Pizza wins: the Pizza card fills with the coral accent (#F25A3A, white text and count), Bar, Ramen and Tacos fade to 35% opacity, the header becomes "Pizza it is" and the right label "4 of 6 votes".
- 5.7-6.1 s: the vote sheet slides down and fades out. The step chips switch from "1 Vote" to "2 Middle". The map camera zooms in ~1.3x towards the friends' centre (0.6 s ease-in-out). A short bottom card slides up: 3D pizza slice icon, title "Finding the middle", subtitle "How far each of you walks", and on the right a big counter "0" with a small "min" unit after it.
- 6.3-10.3 s: the counter counts 0 -> 20 (one minute every 0.2 s). As it counts, a soft red walking-time heat map grows out from all six friends at once (see Heat map below): each friend's area is a soft-edged blob that grows with the minutes; where blobs overlap the colour gets deeper; small grey place dots (~5 pt) are scattered over the map. At 17 min the area all six can reach appears as a deep red core in the middle (around Union Square / E 12th St) with three small black dots in it (the pizza places), a black pill label "All six can walk here" fades in just below it, and the card title switches to "Found the middle" with subtitle "1 pizza place works for all six". At 19 min: "2 pizza places work for all six". At 20 min: "3 pizza places work for all six".
- 10.6 s: the chips switch to "3 Spot". The bottom card slides away, the map camera zooms in ~2x onto the shared area, the friends' avatars slide off the edges, and the heat map becomes ONE solid salmon blob (#E8A492 at ~90%, soft blobby edge) covering just the area all six can reach. Three rating pins pop in on it (staggered 0.1 s): white rounded pills "★ 4.9", "★ 4.8", "★ 4.2" with a small pointer, and a small bold label under each pin: "Nonna Rae" (top), "Fiore Pizza" (middle), "Lucky Crust" (bottom). At the same time a sheet springs up: header "Which one's best?" with "rating + walk" on the right, and three rows: "Nonna Rae" / "★ 4.9 · 3.3k reviews", "Fiore Pizza" / "★ 4.8 · 2.1k reviews", "Lucky Crust" / "★ 4.2 · 412 reviews".
- 11.3-13.2 s: each row in turn is highlighted (row fill darkens from #F4F2EE to #E8E7E0) while its "longest walk" counts up on the right in big bold type with the small grey caption "longest walk" below: Nonna Rae counts to "20 min" (11.3-11.9 s), Fiore Pizza to "16 min" (11.9-12.5 s), Lucky Crust to "18 min" (12.5-13.1 s).
- 13.6 s: the header becomes "Best for all six" with "great rating, fair walk" on the right. The Fiore Pizza row turns black (#111) with white text and gets a small coral pill badge "Best balance" right after its name; it springs to the top of the list while Nonna Rae and Lucky Crust move down and fade to 45%. On the map the Fiore Pizza rating pill turns black with white text and the other two pins fade.
- 14.8-15.4 s: the sheet morphs into the place card and the map camera zooms back out to show all six friends; the salmon blob shrinks and fades away; the friends' avatars slide back in from the edges. The Fiore Pizza marker is a white rounded-square tile (48 pt, radius 14, shadow) holding the 3D pizza slice, with a small bold label "Fiore Pizza" in a white pill just above-right of it.
- 15.5-16.5 s: black walking routes (4 pt, round caps and joins) draw out from the Fiore Pizza marker to each friend along the street grid (right-angle and diagonal segments following Manhattan's avenues and streets, never straight crow-flies lines), all six at once, ~1 s, ease-out. As each route arrives, that friend's name label gains a bold time: "Maya 16 min", "Jonah 15 min", "Leo 13 min", "Sofia 15 min", "Priya 16 min", "Dev 16 min".
- Place card (from ~15.0 s): 3D pizza icon tile (64 pt, #F4F2EE, radius 16) on the left; title "Fiore Pizza" (bold, 28 pt); "★ 4.8 · 2,140 reviews · $$"; "E 12th St · open until 1 AM". Below, three equal stat tiles (#F4F2EE, radius 16) appearing one after another (0.15 s stagger): "16 min" / "longest walk", "13 min" / "shortest walk", "8:00 PM" / "meet up". Below them a full-width black capsule button "Send to group" (white semibold text centred) with a white circle on its right end holding a black arrow (SF Symbol "arrow.right").
- 18.3 s (when I tap "Send to group"): the button fills with the coral accent #F34F2E (0.3 s), its text cross-fades to "Sent to Friday crew", the circle's arrow becomes a coral checkmark (SF Symbol "checkmark", bold), light haptic. Hold on that final state until × is tapped.

Fixed chrome (all steps):
- Top-left: title "Friday crew" (SF Pro Display Bold, 34 pt, #10100E) and below it "Tonight, 8:00 PM · 6 going" (17 pt, #6E6E73). Top-right: a 44 pt white circle with a black "xmark" (17 pt, semibold) and a soft shadow; tapping it restarts the flow from 0.0 s.
- Under the title, three step chips (capsules, 30 pt tall, 13 pt horizontal padding, 8 pt apart): "1 Vote", "2 Middle", "3 Spot". The number is drawn lighter (60% opacity) than the word. Unselected: white fill with a faint shadow, dark text. Selected: #383539 fill, white text. The selection animates with a matchedGeometryEffect-style slide.
- The title area has a white -> transparent gradient over the map (top 170 pt) so the title reads cleanly.
- A small "© OpenStreetMap" attribution caption (9 pt, grey) sits at the map's bottom-left above the sheet.

Map:
- Use SwiftUI MapKit (Map with MapCamera / position), style .standard(elevation: .flat, emphasis: .muted, pointsOfInterest: .excludingAll, showsTraffic: false), light colour scheme, all built-in map controls hidden, user interaction disabled during the scripted flow. Initial region centred on 40.7330, -73.9925 (Union Square / Greenwich Village) with a ~2.6 km span so Chelsea is top-left, Gramercy top-right, East Village right, West Village bottom-left and SoHo bottom.
- Friends (coordinates, avatar background colour): Maya (40.7400, -74.0005, warm brown #C97B4A), Jonah (40.7420, -73.9840, yellow #F7C548), Sofia (40.7335, -74.0060, mint #A8D8B9), Leo (40.7325, -73.9795, blue #7FB6E8), Priya (40.7245, -73.9985, lavender #B9A6E8), Dev (40.7255, -73.9890, pink #F3A6B5). Places: Fiore Pizza (40.7330, -73.9910), Nonna Rae (40.7352, -73.9905), Lucky Crust (40.7310, -73.9918).
- Avatar markers: 44 pt circle with the friend's background colour, a 3D Memoji-style head-and-shoulders portrait inside, a 3 pt white ring, soft drop shadow; the name in a small white pill (12 pt semibold, #222) just below (Maya's and Jonah's labels sit above their avatars, as in the screenshots).
- Draw the heat map, the routes, the pulse rings and the flying avatars in a SwiftUI overlay above the Map using MapReader / MapProxy.convert(_:to:) so they stay locked to the map while the camera animates (re-render them from onMapCameraChange(frequency: .continuous)).

Heat map (steps 2 and 3): render it in a Canvas over the map. Sample a coarse grid (every ~6 pt). For each cell, compute how many friends can reach it within the current minute count (walk speed ~80 m/min, Manhattan-style distance |dx| + |dy| in metres so the blobs grow as rounded diamonds aligned to the street grid, plus a little deterministic noise so the edges look organic). Fill each cell with red #E8553F at alpha = 0.10 + 0.07 x (friends who reach it); cells all six reach get #E26856 at 0.75 plus a darker centre #C8402C. Blur the whole layer ~8 pt so it reads as a soft glow. In step 3 draw only the all-six area, as the solid salmon blob.

Images: generate the assets with gpt-image-2.5-flare (run `env` to find the project's proxied OPENAI_API_KEY and call https://api.openai.com/v1/images/generations with background "transparent", size 1024x1024, then downscale to @3x PNGs in the asset catalog). Six avatars: glossy 3D Memoji/Pixar-style head-and-shoulders portraits facing the camera, smiling, plain transparent background: Maya (woman, dark curly hair, warm brown skin), Jonah (man, curly ginger hair, round glasses), Sofia (woman, wavy blonde hair, light skin), Leo (man, short dark hair, light-tan skin, light stubble), Priya (woman, long straight black hair, brown skin), Dev (man, short black hair, beard, brown skin). Four food icons in the glossy 3D emoji style of the screenshots: a pepperoni pizza slice, an orange cocktail in a rocks glass with an orange slice on the rim (Bar), a ramen bowl with egg, narutomaki and chopsticks, a taco with lettuce, tomato and a lime wedge. If image generation fails, fall back to the Apple emoji 🍕🍹🍜🌮 and initials, and keep going.

Visual details:
- Sheets and cards: white sheet (#FFFFFF) with 32 pt top corner radius, a 36x5 pt grey grabber, soft upward shadow, 20 pt side padding. Vote cards: #F4F2EE fill, radius 22, 12 pt gaps, ~150 pt tall; the 3D food icon (~64 pt) at the top-left, the name (20 pt semibold) at the bottom-left, the count (34 pt bold) at the top-right, the voters' mini avatars (24 pt, white 2 pt ring, overlapping by 8 pt) at the bottom-right. Header "What's the plan?" 28 pt bold; right label 15 pt #6E6E73.
- Rows on the ranking sheet: #F4F2EE, radius 16, 72 pt tall; name 22 pt semibold; "★ 4.9 · 3.3k reviews" 15 pt grey with a dark star and dark rating number; right side "20 min" 26 pt bold over "longest walk" 13 pt grey.
- Bottom card in step 2: white, 32 pt top radius, 3D pizza icon ~60 pt at the left, title 24 pt bold, subtitle 16 pt grey, counter 44 pt bold with "min" 17 pt grey.
- Accent coral: #F34F2E. Text: #10100E. Secondary text: #6E6E73. Map background tint around: #F6F2ED, water #CDE1EF, parks #D6E6C8 (MapKit muted standard is close enough).
- Typography: SF Pro (system font), tight tracking on the bold titles.
- Animations: native springs (response ~0.45, damping ~0.8) for sheets and pops; ease-in-out for camera moves; everything on one TimelineView / keyframe schedule so the run is identical every time.

Code layout: keep files small: Fixtures.swift (friends, places, routes as coordinate arrays along the streets), FlowClock.swift (timeline + restart), MapStage.swift (Map + overlay), HeatMapLayer.swift, RouteLayer.swift, AvatarMarker.swift, VoteSheet.swift, MiddleCard.swift, RankSheet.swift, PlaceCard.swift, StepChips.swift, MidwayApp.swift. Keep SwiftUI types simple and split complex view bodies.

Keep every file you create inside /home/user/workspace (fonts, generated images, scripts): tool access to /tmp and other paths outside the workspace is denied in this sandbox.

Build fully, run compile/build validation, resolve all errors, and launch in the web simulator. Prioritize fidelity to the attached screenshots and the timing above. Deliver complete implementation rather than a plan.