# Phone level results > **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them. ## What it is The "level cleared" screen of Moonmill, an invented cosy bakery puzzle game, set on a slow-turning sunburst in oven-brick red. It is a lesson in reward pacing: nothing arrives at the same time. Three stars stamp into dark recessed slots one by one, each with a squash-and-stretch and a 64ms hit-stop that freezes the whole screen at the moment of impact, then a 3px shake and a ring of butter sparks. Only after the third star does the score count up to 48,260; then a jam-red "New best +6,360" tag slams onto the card's edge; then three collected items tally in and each one pushes its own coloured segment into the oven-upgrade bar; and last of all the big butter Next button springs up from below with Retry and Map as quieter secondaries. The visual language is custom game UI (3–4px ink outlines, solid under-lip shadows, rounded Fredoka), laid out with Material 3 Expressive proportions: a 64px full-width primary in the thumb zone. ## Reference behaviour 1. On load the sequence plays once. The ribbon "Level 23 baked!" unfurls (scaleX 0 → 1, 500ms) and the results card rises 40px and fades in (500ms) together at 0ms. 2. Stars stamp at 520, 880 and 1,240ms (360ms apart). Each star drops from 2.6× and −18° into its slot over 420ms: squash to `scale(1.28,.74)` at 40%, stretch to `scale(.9,1.12)` at 62%, settle `scale(1.04,.97)` at 80%, then 1. 3. At 168ms into each stamp (the squash frame) the screen freezes for 64ms (every CSS animation paused, count-ups held), then shakes 3px for 160ms in 4 steps. Eight diamond sparks fly 64px outward over 550ms from the star centre. 4. At 1,640ms the score counts from 0 to 48,260 over 1,100ms, cubic ease-out, with tabular figures. "Previous best 41,900" sits under it from the start. 5. At 2,820ms the "New best +6,360" tag slams from 2× and −8° to 1× and +4° (500ms, overshoot), hanging 12px past the card's right edge. 6. At 3,160, 3,580 and 4,000ms the three collected items appear (fade + 8px rise with overshoot) and count up over 360ms: Croissants 24, Jam jars 9, Gold wheat 3. Each adds its own segment to the oven-upgrade bar (+240, +180, +150 crumbs; widths 24%, 18%, 15%), so the bar goes 380 → 950 / 1,000. 7. At 4,500ms Next level springs up from 40px below and .9× (500ms, overshoot). At 4,760ms Retry and Map fade up 10px (300ms). 8. Replay (round button, top right) and Retry both cancel every pending timer and frame and replay from step 1. Next and Map show a short confirmation in the ribbon ("Level 24 up next", "Back to the map") for 1,600ms. ## Structure ``` 390 × 844 · padding 54 20 34 · flex column ┌──────────────────────────────────┐ │ 54px clear │ │ [Moonmill · Crust Quarter] (↻) │ top row 48px; chip + 44px replay │ ★ ★★★ ★ │ stars row 124px: slots 86 / 110 / 86, sides ±10°, │ │ middle raised 22px │ ◣[ Level 23 baked! ]◢ │ ribbon h1, 22px, notched tails │ ┌──────────────────────────────┐ │ │ │ SCORE [New best│ │ card: 4px ink, 24px radius, 6px lip │ │ 48,260 +6,360]│ │ score 60px │ │ Previous best 41,900 │ │ │ │ - - - - - - - - - - - - - - │ │ 2px dashed rule │ │ COLLECTED │ │ │ │ [croissant][ jam ][ wheat ] │ │ 3 equal tiles, icon 34, count 22px │ │ OVEN UPGRADE 950/1,000 │ │ │ │ [███████|████|███|███| ] │ │ 18px bar, segments split by 2px ink │ └──────────────────────────────┘ │ │ (flex space) │ │ [ Retry ] [ Map ] │ 50px, gap 10 │ [ Next level → ] │ 64px, 3px ink, 6px lip │ 34px home indicator │ └──────────────────────────────────┘ Sunburst: a 1,400px circle centred at y 190, masked to fade by 62% radius. ``` - `main.stage` is the column; the sunburst is a fixed decorative `div` behind it. - Stars: a `div role="img" aria-label="3 of 3 stars"` holding three SVGs (an empty path plus a filled group with a highlight). - Title: `h1.ribbon`. Card: `section aria-label="Results"`. - Bar: `div role="progressbar"` with `aria-valuenow` updated per item. - Actions: three `