# `matter-drop` — spec · ⚠️ OPTIONAL / SPEC-ONLY (build on demand) > **This move ships as a SPEC, not a demo.** Physics is Phase-3-last on purpose: it **transfers poorly** (needs bespoke layout, rarely survives a mobile recompose) and rarely earns its weight — the reverse of why motion is worth library-ifying (`taxonomy.md`, `measured-not-vibes.md`). **Build the `demo.html` only when a genuinely playful merchant calls for it** (a candy/sticker/toppings brand); until then this spec is the contract. Follow the SOP: measure values from a real award physics site, bake the two degradations, run `verify-pattern.mjs`, then remove this banner. **Stable ID:** `matter-drop` · **Address:** (Tier 3, **Physics** · inlined Matter.js) · **Grafts onto:** a `[data-mod="specials"]` / brand-playful section or a hero prop shelf. · **Falls back to:** a **static, pre-arranged pile** (the same stickers/ingredients laid out in CSS, no simulation). Branded objects — **stickers, ingredients, toppings, coupons** — **drop and stack** under gravity, collide, settle into a pile, and can be **flung** with the pointer. The playful, tactile "toy box" moment for a brand whose personality is fun (bubble tea toppings raining into a cup, taco-truck stickers piling up). ## When to use - **Only a playful brand** whose voice is genuinely fun — candy, boba toppings, kids' menu, a sticker-culture taco truck. On a refined/minimal brand it reads as a gimmick (off-pole — `measured-not-vibes.md`). - **One moment per site.** A physics pile is a spectacle; a second one is noise. - **Never** for core content (menu, NAP, ordering) — decoration only, because it's the least reliable move to lay out responsively. ## Measured values (source: **award Matter.js sites** — capture a real one before building: e.g. a playful product site's drop-in hero + `brm.io/matter-js` demos — for restitution / density / drop cadence) | Token / param | Value (starting point — **re-measure before building**) | Why | |---|---|---| | gravity `y` | **1.0** (Matter default) | natural fall; lower = floaty/dreamy | | restitution | **0.35–0.5** | a little bounce, not rubber | | friction | **0.3**, frictionAir **0.02** | objects settle instead of sliding forever | | drop cadence | **1 object / 180–260ms**, ~**14–22 total** | a satisfying rain that ends (not endless) | | body size | **40–72px** | thumb-scale props; texture-mapped sprites | | settle → sleep | enable `Sleeping`; **stop the loop once all bodies sleep** | the heat guard (see below) | ## Rendering (inlined, no external files — HARD OUTPUT RULE) - **Matter.js source is INLINED** in a `