“Why pay for a prompt when I can ask the AI myself?”

1Build a mobile-first React web app called Wren, the companion2app for a fictional home robot. Design at 393px wide, fully3fluid, installable-PWA feel, dark dusk palette: background4#12100e, text #f3ede4, muted #a89e91, Halden amber #f2b7665(Wren's signal colour, shared with its maker Halden Robotics),6dusk blue #9db8ff (the evening outside, used for Maya's side:7avatar, plans, the towel). Fonts: Literata (weight 350 to 400,8tracking -0.02em, italic for the accent word) for headings and9big numbers, Onest for UI. Pad the top by10env(safe-area-inset-top) plus 14px and the bottom by11env(safe-area-inset-bottom).1213Components:1415AppShell: holds a screen state (home, talk, map, teach). All16four screens stay mounted and stacked absolutely; the active one17animates in with opacity 0 to 1 and translateX 24px to 0 over180.5s cubic-bezier(.2,.7,.2,1). A floating smoked tab bar19(near-opaque rgba(30,25,21,.92), hairline border, inset top20highlight, no backdrop blur, radius 28px, tab labels 11px) with21Home, Map, a raised 56px orb button in the middle (conic22gradient amber, dusk blue, apricot #f3d2ae, spinning 6s, with a23neutral dark drop shadow) that opens Talk, Teach and Wren. The24tab bar slides away while Talk is open.2526HomeScreen: small 'Good evening, Maya', heading 'Wren is27tidying' with 'tidying' italic amber. A live camera card (radius2828px, about 46% of the height) showing a photo of a living room29with the robot, a slow Ken Burns zoom, an amber scanning light30band sweeping down every 4.5s, and three object tags drawn as31corner brackets with a label chip on a solid dark plate, 11px32('floor lamp 0.97', 'mug 0.93', 'cushion 0.88') that fade and33scale in from 0.92 one after another on an ease-out. Top-left34'Live · Living room' pill on a smoked chip (80% near-black,35hairline border) with a steady red dot. A smoked strip flush36across the foot of the card (rgba(16,13,10,.84), hairline top37border, no blur) with an SVG progress ring animating to 62% and38'Tidying the living room / 9 of 14 things put away · 6 min39left'. Below: two stat cards (Battery 78% with an animated fill40bar; Next up 'Water plants 20:30 · 3 rooms'), four quick action41squircles (Fetch, Tidy, Plants, Guard) that scale to .92 when42pressed and show a toast 'Tidy added to the queue', and a43'Tonight' list of three timed tasks that rise in with stagger.4445TalkScreen: a 210px orb made of two blurred conic gradients46rotating in opposite directions, a thin ring and a glossy radial47core with a neutral dark drop shadow (no coloured halo). Drive a48CSS variable --amp from requestAnimationFrame: while listening49or speaking it follows a noisy sine, while thinking it idles50low; scale each layer from --amp. On open, play a script: the51question types at 38ms per character, state label goes52Listening, Thinking, Wren, the reply types at 30ms per53character, then a task card springs up from 40px with 'Fetch54reading glasses · 0:40'. Pressing the orb replays it.5556MapScreen: an isometric floor plan in CSS 3D: a 300px square57with transform rotateX(58deg) rotateZ(var(--mz)), five room58tiles, walls as thin divs rotated upright with a lit top border,59room labels counter-rotated to face the viewer. Dragging60horizontally changes --mz with inertia. An SVG on the floor61draws a red dashed rejected route through a small red toy, then62fades it while an amber route draws in; a small glossy puck with63a soft dark contact shadow walks the path using getPointAtLength64over 7s; an ETA counts down in the bottom sheet.6566TeachScreen: an SVG canvas that projects a 3D stick figure (1567joints) every frame: rotate around Y by a drag-controlled angle68with slow auto-spin, tilt the camera 0.3 rad, apply simple69perspective, draw bones thicker and brighter when closer.70Animate the wrists through a towel fold and draw the towel as a71dusk-blue quad between them. Add a tilted floor ring with ticks,72a REC pill timer, and four steps that tick off every 2.4s.7374Respect prefers-reduced-motion by stopping loops and showing end75states. Use real buttons and aria-labels on icon controls.76Inactive screens are display:none, not just opacity 0, so only77the active screen is rendered at rest; the incoming screen78slides in from its offset with @starting-style and stays fully79opaque, so it is readable on every frame.