# M3 expanding FAB menu > **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 A **FAB menu** for "Tessel", a notes app, in Material 3 Expressive on a dark tonal scheme. The 56px mint FAB sits bottom-right above a list of note cards. Tapping it rotates the plus 45° into a close glyph, morphs the FAB from a 16px-radius square into a circle in the surface colour, drops a tonal scrim over the list, and unfurls three labelled pill actions upward with a 40ms stagger (bottom item first). Tap the scrim, press Esc, or choose an action to close; choosing an action also prepends a note card that drops in. The detail worth copying is the two-speed choreography: items enter on the 500ms emphasized curve but leave on a 220ms accelerate curve, so closing feels like the menu is pulled back into the FAB rather than fading. ## Reference behaviour 1. Initial state (hero): the menu is **already open** — `body.open` in the markup, scrim down, three items unfurled, FAB in its circle/× form, `aria-expanded="true"`. Behind it: top app bar with "All notes · 27" and "Notes" (30px), a round 44px search button; a row of filter chips; a scrolling list of five note cards (one pinned, in the tertiary container colour). FAB at `right:16px; bottom:50px`, 56px. A 32px hint pill "Tap + or press N" (`--surface-high`) sits bottom-left at `left:16px; bottom:62px`, hidden while open. 2. Close it (scrim / Esc / an item), then tap the FAB (or press N) to see the entry: `body.open` is set; `aria-expanded` becomes true. Scrim fades to `rgba(6,20,18,.66)` over 500ms. FAB radius eases 16px→50%, background becomes `--surface-highest`, icon rotates 45° — all 500ms `cubic-bezier(.2,0,0,1)`. 3. The three menu items ("New note" nearest the FAB, then "Voice memo", then "Scan page") rise 20px, scale from .9 to 1 (origin bottom-right) and fade in. Delays: 0ms, 40ms, 80ms from the bottom item up. Each is a 56px pill in `--primary-c` with `--on-primary-c` text and a 24px leading icon. 4. Focus moves to the first (bottom) item. Arrow Up/Down cycles focus through the items; Esc closes and returns focus to the FAB. 5. Tap the scrim or press Esc: items drop back 20px, scale .9 and fade over 220ms `cubic-bezier(.3,0,.8,.15)` with the stagger reversed (top item first); scrim fades over 220ms; FAB returns to a 16px-radius mint square with the plus upright. 6. Choose an action: a new note card titled with the action's kind ("Untitled note", "Voice memo", "Scanned page") is prepended to the list and drops in from −12px / .98 scale over 500ms; the menu closes as in step 5. 7. The hint label fades out while the menu is open. ## Structure ``` 390 × 844 ┌────────────────────────────────────┐ │ (54px clearance) │ │ All notes · 27 (○)44 │ top app bar, 120px incl. clearance │ Notes │ 30px/700 │ [Recent][Pinned][Shared][Archive] │ chips 32px │ ╭────────────────────────────────╮ │ │ │ Kitchen renovation budget │ │ pinned card (tertiary container) │ ╰────────────────────────────────╯ │ │ ╭────────────────────────────────╮ │ │ │ Standup, 29 Sep │ │ note card 20px radius │ ╰────────────────────────────────╯ │ │ ... │ │ ░░░░░░░░░ scrim when open ░░░░░░░░ │ │ ╭─────────────────╮ │ │ │ ▤ Scan page │ │ item 3 · delay 80ms │ ╰─────────────────╯ │ │ ╭─────────────────╮ │ │ │ ♪ Voice memo │ │ item 2 · delay 40ms │ ╰─────────────────╯ │ │ ╭─────────────────╮ │ │ │ ✎ New note │ │ item 1 · delay 0ms (8px gaps) │ ╰─────────────────╯ │ │ (Tap + or press N) ┌────┐ │ hint pill 32px · 12px gap │ │ + │56 │ FAB, right 16, bottom 50 │ (34px clearance) └────┘ │ └────────────────────────────────────┘ ``` - `
` — label + `

`, round search `