Dar Ride

Download/reference the app shown in this post and clone it exactly, including the iPhone visual design, layout, interactions, animations, typography, spacing, 3D map rendering 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/MiruDaws/status/2107811879036792845 (two screen recordings: the home screen, 29 s, and a ride in progress, 44 s). The author is publicly challenging anyone to clone it, so the result has to look stunning, not like a prototype.

Build a native SwiftUI iOS app named Dar Ride using Opus 5.5: a ride-hailing app for Dar es Salaam, Tanzania (prices in TZS, vehicle types Ride / Bajaji / Boda) whose signature is a stylized 3D night-time city map built from real OpenStreetMap data. Portrait iPhone. Do NOT put a fake handset frame inside the app; the simulator provides that. Everything must work offline with bundled data, no accounts, no permissions prompts.

THE 3D MAP (the hero; spend most of the effort here)
- Real geography: the Msasani Peninsula / Sea Cliff / Slipway area of Dar es Salaam. During the build, in the sandbox, fetch OpenStreetMap data from the Overpass API for roughly lat -6.775..-6.735, lon 39.262..39.290: building footprints (with building:levels / height when present), roads (with names and highway class), the coastline / water, swimming pools, parks, and named POIs (restaurants, cafes, hotels, shops, schools). Simplify it and bundle it as compact JSON in the app. Fetch the driving route from Golden Tulip Hotel (Msasani) to Sea Cliff Hotel from the public OSRM API (router.project-osrm.org) and bundle the polyline. Labels must be the real OSM names (the video shows Sea Cliff Hotel, Hotel Sea Cliff, Sea Cliff Village, The Slipway, Slipway Hotel, Hotel Slipway, Lido Slipway, Cafe Boba, Crocs, The Terrace, The Waterfront, Elegance, Thai Kani, The Bar, A Novel Idea, Taste of Mexico, Cocktails & Dreams, Msumbi Coffee, Soul Spring, Home Butcher, Mama Mia - Gelato Italiano, P&N Electrics, Peninsula English Medium School, Vibe255 Bar & Restaurant, Panchvant, Ammy Shop, German Dental Clinic, UNDP Funguo Programme, JSI, The Grill House, Dar fitness store, Anvir Villas, Golden Tulip Hotel, Torini Garden). Only if the network is truly unreachable, generate a procedural peninsula that uses those names.
- Renderer: SceneKit (or RealityKit) inside SwiftUI. Look: dusk/night, warm and cozy. Ground deep green grass (#34472A); roads deep plum (#4A2F45) with a lighter curb edge, white dashed centre lines and white lane arrows on main roads; buildings extruded from the real footprints with flat roofs in lavender/mauve (#B58FB0 / #A47BA0) and some red (#B5302E) and blue (#2E5A9A) roofs, walls slightly darker; walls carry warm emissive lit-window grids (#FFE08A to #FFC861, random on/off per window, deterministic seed) so the whole city glows; hotels near the shore are tall (6-9 floors) with rows of lit windows and balconies; swimming pools as glowing cyan-blue rectangles; beach umbrellas and lounge chairs near hotels; lots of trees with rounded dark-green canopies (#2F5A2A to #3D7034, slightly varied sizes and tones) on short brown trunks along the streets, palm trees along the coast; street lamps along roads as small posts with a small warm point glow and only a faint, small pool of light on the ground (no big yellow ellipses); the ocean a deep saturated teal (#14807F to #1B9A97, not pale cyan), slightly darker toward the horizon, with fine small animated ripples and a soft sparkle (no stripy repeating highlight bands), a rocky shoreline band, and a few sailboats and small boats on the water with gentle bobbing. Soft fog/haze toward the horizon, ambient purple light plus a warm key light, soft shadows if the frame rate allows. Merge geometry by material (a handful of draw calls, not one node per building) so it stays smooth (60 fps target) in the simulator.
- POI labels: white rounded-rectangle pills with black SF Pro semibold 15pt text and a thin pointer line down to the place, projected from 3D positions every frame, de-cluttered, fading in and out with distance.
- Base map: a flat dark-grey style of the same data (charcoal #2E2E2E ground, grey #3A3A3A building blocks, light-grey street lines, grey uppercase street names like BANDARI LANE, MSASANI PENINSULA, SEA CLIFF, small grey POI icons and names). The stylized 3D world streams in on top of it tile by tile: blocks of buildings rise up, colour fades from grey to the night palette, trees pop in with a little scale bounce. This happens on first appearance, when a ride starts, and when the camera zooms far out and back in (zoomed far out shows the grey base map). It is a key visual moment; make it look deliberate and beautiful.
- Gestures: one-finger pan, pinch zoom, two-finger rotate and tilt. Recenter button (circular, dark translucent #2E2E2E at 80% with a white location.north.fill arrow) at the map's bottom-right.

HOME SCREEN (video 1)
- The 3D map fills the top ~55% and continues behind the sheet. On Home, when idle, the camera does a slow cinematic flyover low and close at rooftop height (about 60-90 m above ground, 50-60° tilt, narrower field of view) so the big Slipway and Sea Cliff hotels fill the screen: about 70% of the loop glides over the resort hotels (pools, umbrellas, palms) and the lit residential streets of Msasani, with only a short pass out over the ocean past the sailboats, then it repeats. The white POI label pills show on Home too; the reference home screen is full of them (Cafe Boba, Crocs, The Terrace, The Waterfront, Slipway Hotel, Thai Kani, Taste of Mexico...). Any touch takes over; it resumes after 4 s idle.
- Bottom sheet: white, 32pt top corner radius, grabber. Row of three vehicle options, each a large 3D-rendered icon (~70pt) with a title and ETA: "Ride" (white compact SUV/hatchback, 3/4 view) "4 min"; "Bajaji" (beige tuk-tuk) "5 min"; "Boda" (white/grey motorbike) "4 min". Selected title bold black, others grey; a black 3pt underline indicator under the selected one that slides between options; thin grey divider line. Then a "Where to?" pill (white, soft shadow, magnifying glass, 22pt medium text). Then chips: 3D house icon "Home", 3D black briefcase "Work", 3D red pushpin "Gym" (white pills with light-grey border). Then "My drivers" (22pt semibold) with an underlined "See all" at right, and a horizontal row of round 3D clay-style driver avatars (Tanzanian men, flat caps, dark jackets, friendly) named Juma, Baraka, Hamisi, Rashidi, Salim. A floating translucent glass tab bar sits over the bottom: Home (house.fill), Activity (clock.arrow.circlepath), Account (person.crop.circle.fill), the selected tab with a light pill behind it.
- Tapping "Where to?" opens a search sheet with real nearby places from the bundled POIs (Sea Cliff Hotel first, then The Slipway, Golden Tulip Hotel, Msasani City Mall). Tapping Sea Cliff Hotel starts the ride (the driver Juma has already picked you up near Golden Tulip Hotel).

RIDE IN PROGRESS (video 2, 0-39 s)
- 0 s: top-down 2D view of the grey base map showing the whole route as a white line with a dark outline running north along the coast road, a small 3D white car on the route and a white square destination marker with a black dot and a "4 min" label at the end (Sea Cliff). Grey labels SEA CLIFF, MSASANI PENINSULA, The Grill House, Golden Tulip Hotel, etc.
- 1.5 s: the camera swoops down to a close follow-cam behind and above the car, the map rotating so the route points up; grey extruded blocks; then the stylized 3D world streams in around the car (2.5-5 s) while the camera eases over about 2.5 s to a pitch of about 50° below the horizon (not near top-down), which it holds for the whole drive.
- Follow-cam framing, close like the reference: the car is about 1/7 of the screen width, placed about 40% down from the top of the visible map (not down near the card) and facing up the screen, so the road, houses and trees around it are big, the road recedes into the distance between rows of lit houses on both sides, and the far city and the ocean haze show near the top of the screen.
- The car is a white low-poly compact (Toyota Vitz-like: emissive pure white body so it reads white at night, black windows, red tail lights, soft shadow) that drives the real route at a steady pace with smooth turns, the camera following it; the route ahead is a glowing white double line on the road that still reads in the distance; occasional golden light shafts sweep across the scene. Real labels pass by (UNDP Funguo Programme, JSI, German Dental Clinic, Sea Cliff Village, The Alcove, Hotel Sea Cliff, Sea Cliff Hotel). The destination marker with its "N min" label stays visible ahead. The drive lasts about 35 s of real time.
- Top-left: white circle with share icon (square.and.arrow.up). Top-right: white circle with a 3D red emergency siren/beacon icon (SOS). Map bottom-right: a car-view toggle (car.fill, switches between top-down 2D and 3D follow) and the recenter arrow, both dark translucent circles.
- Bottom card (white, 32pt radius): "Heading to Sea Cliff Hotel" (24pt semibold, on one line, minimumScaleFactor 0.8) with "4 min" big bold at right and "remaining" small under it; under the title a gold check-circle and "Moving well · 5 min in traffic" in grey; a gold progress bar (#B8975A) on a light track that fills as the car moves; the minutes count down 4 → 3 → 2 → 1 with a numeric content transition. Under the card, small grey links: "© OpenStreetMap   OSRM · FOSSGIS   Fix the map".

ARRIVAL (video 2, 39-44 s)
- When the car reaches Sea Cliff Hotel the camera settles and a full-height white sheet slides up with a spring: gold circle with a white check and "You've arrived" (30pt bold); "Sea Cliff Hotel · 07/10/2026 · 15:26" grey; driver row: 3D white car icon, "Juma" semibold, "White Toyota Vitz" grey, a yellow (#F2D04A) plate badge "T 123 ABC". Grey rounded card: car icon "Economy" with "9.5 km · 29 min" at right; divider; rows "Base fare TZS 3,000", "Distance (9.5 km) TZS 9,500", "Time (29 min) TZS 3,393"; divider; "Total" and "TZS 15,893" large bold. White bordered card: 3D handshake icon + "Driver receives TZS 15,893 · 100%". "Add a tip" (20pt semibold) with four chips: "No tip" (selected, gold #C9A86A fill, white text), "500", "1,000", "2,000" (light grey); tapping updates the total and the driver line. "100% of the tip goes to the driver." small grey. "Payment" heading, a wide gold gradient button "Top up wallet" (#D4B57A to #A8874E, white text, soft shadow), and an underlined "Pay cash instead" that returns to Home.

ASSETS: generate every icon and image with your image generation tool, in one consistent glossy 3D-render style on a transparent background: the Ride car, the Bajaji, the Boda, the house, the briefcase, the red pushpin, five driver avatars, the red siren, the white car for the receipt, and the handshake. Also generate tileable textures for the lit-window building facades, roofs, grass and water if they improve the look. Trim and size them properly, no visible backgrounds or halos, and bundle them as assets. Do not crop anything from the video.

TYPE AND FEEL: SF Pro throughout; black #111 text, grey #8A8A8A secondary; generous spacing as in the video; spring animations; haptics on selection. The map should feel alive at all times (boats bobbing, water moving, lamps glowing).

Build fully, run compile/build validation, resolve all errors, and launch in the web simulator. Check Home, the ride and the arrival visually in screenshots and iterate until they look like the reference: dense real buildings, glowing windows, trees, teal ocean with boats, readable labels. Prioritize fidelity to the source and the working Home -> Where to? -> ride -> arrival flow. Deliver a complete implementation rather than a plan.