Timothy Lindblom

# Build: "Street to QR" pickup transition (pixel-accurate recreation) Recreate this 8.17-second flow in a React Native app as closely as you can. A coffee order becomes ready, then the camera rises from street level above a storefront. The 3D city block seen from above **is** the pickup QR code, and it flattens into a real 2D QR on a pickup screen. Five reference images are attached, named by timestamp: `t0.00` (opening), `t4.40` (QR modules starting to appear), `t4.70` (camera cresting the roof), `t5.00` (near top-down on the center ring), `t8.00` (final screen). They are the source of truth. If this brief and an image disagree, the image wins. Everything between them is described in the timeline below. The images are recordings of a phone screen on a `#E9E8ED` backdrop with a soft shadow. That backdrop is not part of the app. In each 1080x1920 image the screen occupies x 163-917, y 75-1710, at 1.916 image px per pt. ## Stack and deliverable - React Native with Expo and TypeScript. If a project already exists here, integrate into it and use its navigation and conventions. Otherwise scaffold one. Target iOS first. - 3D scene: `expo-gl` + `three` + `@react-three/fiber/native`, in a full-screen view behind the UI. - UI: native RN views animated with `react-native-reanimated`. Frosted surfaces use `expo-blur`. The final QR and icons use `react-native-svg`. Use `@expo-google-fonts/inter` for type. - There is no DOM, so `document.createElement('canvas')` textures are not available. Build detail from geometry where possible. For the rest (sign lettering, shop interior, stone coursing), write a small dev-time script that generates PNG textures, commit them, and load them with `expo-asset`. Do not use external models or photos. - Keep the scene cheap: merge static geometry and use `InstancedMesh` for the QR blocks, so all blocks are drawn in a small number of draw calls. Bake soft shadows into textures or use flat shadow planes rather than real-time shadow maps unless they hold frame rate. - Autoplays when the screen mounts. Target 60fps on a physical iPhone. - **Everything is driven by one master clock `t` in seconds**, a Reanimated shared value running linearly from 0 to 8.17. The scene reads it in `useFrame` and the UI reads it in `useAnimatedStyle`. Every property is a pure function of `t`, with no separate springs or timers, so nothing can drift. - Add a dev-only way to freeze at any time (for example a deep link `?t=4.6`), used for verification below. Add a dev-only tap-to-replay as well. - Real behavior for the final screen: raise brightness with `expo-brightness` when the pickup screen appears and restore it on close, as the copy promises. The "x" closes the flow. Share and Add to Apple Wallet can be inert stubs. ## Layout - Designed at 393x852pt (iPhone 15/16). All positions below are in that space. Use safe-area insets and proportional scaling so other iPhone sizes still compose correctly, and the QR stays centered and square. - Use the real device status bar in dark content style, the real Dynamic Island and the real home indicator. Do not draw fake ones. The status bar stays visible over the scene. - For screenshots matching the references, run `xcrun simctl status_bar booted override --time 9:41 --batteryState charged --batteryLevel 100`. - Font: Inter with tight tracking. Sizes below are measured estimates in pt. ## Screen 1: Order status (t = 0 to 3.0) Full-bleed 3D scene behind a floating frosted sheet. **Circular glass buttons**, 43pt, at x inset 16pt, y 61pt. Translucent white with backdrop blur and a thin light rim. Left: chevron-back. Right: "...". **Sheet**: x inset 8pt, top 540pt, bottom inset 4pt, radius 34pt. Frosted, with the scene visibly blurred through it: `#DEDFDC` at the top, settling to about `#F1EDEA` by mid-height. Grabber 36x4pt centered near the top edge, gray. 16pt inner padding. Top to bottom: 1. "Order A42": 13pt semibold gray. 2. "Being made": 34pt bold, near-black. 3. Clock icon + "Ready in about **2** min": 15pt gray, digit bold black. 4. Three-segment progress bar: 5pt tall, full radius, 6pt gaps, track `#E3E1DC`, fill `#69A25F`, at about y 662pt. Labels below at 13pt: "Ordered", "Making", "Ready". The active label is bold black, the others gray. 5. White card `#FCFAF8`, radius 18pt, about 125pt tall, two rows with a hairline between: - 36pt circle `#E0FFD7` with a dark green `#4E7151` iced-cup icon | "Blondie Matcha" 16pt, "Regular, iced, oat milk" 14pt gray | "£4.45" gray, right aligned. - Same circle with a storefront icon | "42 Gordon Street", "Collect from the pickup counter" | gray chevron. ## The 3D scene Unit: **1 world unit = 1 QR module.** The ground plane is the QR's coordinate system, with module (22,22) at the world origin. **QR matrix** (45x45, version 7, `#` = dark, read from the final frame, use literally): ``` #######.#..##....###.#.#.....##.##..#.####### #.....#....#.###.##......#.#...#...#..#.....# #.###.#..#######.#.#..##.###.#...#.#..#.###.# #.###.#...#.##.#..#.###.#.#.######.##.#.###.# #.###.#.##...##.###.#########.#.#####.#.###.# #.....#.#...#...#.#.#...#...##.##.....#.....# #######.#.#.#.#.#.#.#.#.#.#.#.#.#.#.#.####### ............#.......#...###..#.#..#.#........ .#######.#.###.#.#..#####.##.....##.#..##...# .##..#.######...#..#####.##..#.#..##.#.#.#... #.###.###....##.##.#...#...#..#..#...##...... .##..#.#..##.###.#.#.###....#.#..#.#.#.#.#... ...#####..#.....#.#..#.###.#.####.......#.#.# ##.###.##.##....#..#.#..#.....#.##..##.##.#.# #####.###..#...#.##...##.#.#.####.....#.####. ..#....#.....#..###..#########.#.######...##. .##...####.##.######.##...#......###..##.###. ..#.#..#.#####.#...#.#.#.##..#.#.#..###..#..# ..###.#.###...###.##.#.#...#..#..###...#...#. .##.##.#.###.###..##...#......###.#.#..#.#... .##.#####.##..#.#...######.#.##...#.#####.### ##..#...#.#.#.#.#.#.#...#.....#.##..#...#..#. #.###.#.#..####..####.#.##.#.##...###.#.#.#.. #.###...#..##..####.#...#..#.##.##.##...####. #.#.#####....######.######..####....######... #..###.#...#..##...#.####.########.#.#..#.... .#..#####..#.####.#..#....#.##.##..#...###### ....#..####..#.#...##.#.#......#..#.##..#.#.# ###.###.#..#.#.########..#.#..#..##..##....## .#.#.#.#.#.....##...#######..###..#.#.##.#.#. #....###.....##.##..#.#...##..#..#..###...... #...##....#.#...#.#.###.#.##..#..#.....#.#.#. #.#####.#..#.###...#.#......#####..##..##.#.. #.#.##..#.....######.....####.#.##.#.#....##. ....#.###.#.####..##.##.#...#####..#...#####. .####..#.####..#...###.##....#.#..#.##..#.#.# #..##.#...#.###.##.######........##.#######.. ........#.###.##...##...#.#.##.#..###...##.## #######.#.....#.##..#.#.#..##.#..#..#.#.#..#. #.....#.#.#....######...#..##.#...#.#...##... #.###.#.#..#.##...#.#####.#..####.#.#####.### #.###.#.#.....##.###...#.#.##.#.##.#....#.##. #.###.#.#.#.#....#.###...#.#.########....##.. #.....#.#.#####.#.#...#.#..#.#.##.####.#..#.. #######..#...#...###........#..#..#####..###. ``` **The key idea:** the center alignment pattern (rows and columns 20-24) *is the hero building*. Its dark outer ring (5x5 modules, 1 module thick) is a hollow courtyard building with a flat dark roof. The courtyard is 3x3 modules of light ground, with a single dark block at its center. The storefront is the south face of this ring. The camera therefore flies up over the facade, passes the roof edge, and looks down into the courtyard, which is already the middle of the QR. **Hero building, south face.** Warm limestone (about `#D9C4A1`) with faint block coursing, a horizontal string course per floor, and two vertical pilasters that divide 3 bays. About 3 visible upper floors in the opening frame, more above. 3x2-pane sash windows in blue-slate `#647985`, cream frames, sills. A dentil cornice and parapet at the top, with the inner courtyard walls in the same stone and window style. **Shopfront at ground level:** - Green fascia `#69A25F`, angled slightly outward, with "BLANK ▪ STREET" in small spaced white caps. - Green mullions, cream interior panels. - Central dark green door `#31452C` with a brass pull. - Pendant lamps, shelves with small green packages, menu board, and diagonal white glass-reflection streaks. - Green stall risers `#4E7151`. - Boxwood topiary balls in stone planters at both ends. - Outdoor seating: 3 small round white-topped tables with black bases and dark green chairs, casting soft shadows. - A small green sign/box at the far right. **Street** (front of the building, moving toward camera): pale pavement strip with a thin yellow line at the kerb, gray road about `#A7A7A5` with a white dashed lane mark, then large cream paving slabs `#F1EDEA` near the camera. **Neighbors:** buildings either side use the same stone, with dark brown ground floors. Visible at the edges from about t = 4.2. **Every other dark module** is a small extruded building block, 1x1 in footprint, merged into visual clumps with neighbors. Flat roof with a subtly varied near-black tint per module: navy `#1B1E26`, warm `#231D1A`, olive `#201D17`, teal about `#1A2A2A`. Tiny dentil detail along roof edges where facades are visible. Light modules are bare ground. **Light:** warm directional sun casting soft shadows up and to the left on screen when viewed from above. Stylized, soft, illustrative, non-photoreal. Treat it as a flat illustration given depth, not PBR. ## Master timeline (measured from the video) Easing should feel continuous. The camera move is the single dominant gesture, slow to start and fast through the top-down reveal, between t = 4.4 and 5.2. | t (s) | What happens | |---|---| | 0.00 | Screen 1, camera at street level looking at the facade. Fascia at about 46% of screen height, road directly below. "Making" segment about 60% full and filling linearly. | | 0.70-0.90 | Digit "2" rolls vertically to "1", with motion blur and fade. | | 1.40 | Bold label switches from "Making" to "Ready". | | 1.50-1.60 | Title crossfades "Being made" to "Ready" with blur, in place. The subtitle crossfades to a check-circle + "Show your code to the barista" (no bold digit). | | ~1.60 | "Making" segment reaches 100%. | | 1.60-2.30 | "Ready" segment fills: about 23% at 1.7, 85% at 1.9, 98% at 2.1, full at 2.3. | | 2.30-3.00 | Hold. | | 3.00-3.30 | Sheet drops off the bottom with ease-in, revealing the paving. | | ~3.10 | Buttons morph: back to "x", "..." to share icon, quick crossfade. Glass stays. | | 3.20-4.00 | Camera begins to rise and pitch down. Verticals converge (building leans outward at top). Road color fades up to cream. Lane dash and kerb line dissolve, so by 4.0 the whole ground is uniform cream `#DED6CE`-`#E5DFD3`. Seating is now seen from a higher angle. | | 4.00-4.30 | Rise continues. Storefront shrinks toward the middle of the screen. More floors come in from the top, and the cornice arrives at about 4.4. | | 4.30-4.60 | **QR modules appear on the ground in front of the shop**: flat rectangles fade from transparent through gray to dark, staggered, nearest the shop first. Some are still pale gray at 4.6 while others are dark. | | 4.50 | Dark navy roof `#1B1E26` passes under the status bar at the top. | | 4.60-4.80 | Camera crests the parapet. The roof band moves down the screen and the courtyard appears above it, showing the inner far wall with windows and the dark center block. Facade is now foreshortened to a thin strip with table tops as white dots. | | 4.80-5.20 | Near-top-down and pulling out fast. The ring reads as the center alignment pattern, about 5 modules at 225px on the 720-wide reference at t=5.0. Tall walls collapse toward zero parallax, soft shadows still visible, then fading. Roof tints still differ. | | 5.20-5.30 | Perfectly flat and orthographic. All shadows gone. The QR is wider than the screen, and its bottom edge has come into view with `#F2F2F2` below. | | 5.30-5.60 | The QR scales down smoothly toward its final size and position, and the finder squares come into view. Tints converge to near-black. Ground goes to `#F2F2F2`. | | 5.50-5.70 | Glass buttons lose their glass over the now-light background. "Pickup" fades in. | | 5.60-6.10 | Screen 2's sheet rises from the bottom with a decelerating spring, no visible overshoot. | | ~6.20 | QR settled. Everything still. | | 6.20-8.17 | Hold on the final frame. | **Camera implementation:** Use one PerspectiveCamera. Animate position, lookAt and FOV from keyframes via a smooth spline. Keep x centered on the hero the whole time, with no roll. Narrow the FOV as the camera climbs (a dolly-zoom), so that perspective has fully flattened by t = 5.25. Simultaneously collapse the height of all blocks to 0 between about 5.0 and 5.25. This is what gives zero parallax. At the moment the view is flat and aligned, swap from the GL view to a crisp `react-native-svg` QR (a single Path) in the same position and size with no visible jump, then run the scale-down on that view with a Reanimated transform. (How the modules behave in height during 4.3-5.2 is inferred from the video. They read as flat fades at first and as low extruded blocks by 5.0. Tune to match the frames.) ## Screen 2: Pickup (final state) Background `#F2F2F2`. - Nav: "x" and share in 43pt very light circular buttons, same positions as Screen 1. "Pickup" 17pt semibold centered at y 81pt. - QR: 308x308pt at x 42.5pt, y 179.5pt, module 6.84pt. Near-black with a very faint residual color variation. Square modules with no rounding. - Sheet: `#FEFCFB`, x inset 8pt, top 586pt, bottom about 847pt, radius 34pt, grabber, 16pt padding. - "A42" 40pt bold, near-black. On the same row at right, a pill about 75x28pt, fill `#E0FFDD`, dark green "✓ Ready" 13pt semibold. - "Pickup code" 13pt semibold gray. - "Show this to your barista" 20pt bold. - "Blondie Matcha, Regular · 42 Gordon Street" 15pt gray. - Sun icon + "Brightness is turned up while this is open" 13pt gray. - Black pill CTA `#000000`, 346x49pt, top at 783pt: white wallet icon + "Add to Apple Wallet" 16pt semibold white. ## Definition of done 1. On an iPhone 15 or 16 simulator, freeze at t = 0.00, 4.40, 4.70, 5.00 and 8.00, capture each with `xcrun simctl io booted screenshot`, and view it next to the matching reference image, cropped to the screen area. Actually open and look at the images. List every visible difference, fix it, and repeat until only minor differences remain. Also watch the full motion, since five stills cannot catch a jump between them. 2. Priority order when you run out of time: (a) the continuity of the 4.3-5.3 reveal, with the ring landing exactly on modules 20-24 and no visible cut anywhere; (b) the final frame, which should be near-identical; (c) the opening frame; (d) small storefront props. 3. Compare the final QR against the matrix module by module in code. 4. Measure the frame rate during the 4.3-5.3 reveal on a physical iPhone and report the number. Simulator GL performance is not representative. If no device is available, say so plainly rather than claiming 60fps.