Morph BlogPlayground
Live test surface for the Morph SDK. Each section below isolates one feature so you can poke at it. Most demos require either DevTools open or mobile-emulation mode — the instructions are inline.
ImproperTap (mobile near-miss recovery)
Mobile-only feature. Chrome DevTools → ⌘⇧M (Toggle device toolbar). Try to tap near the red Delete button without hitting it — Morph asks if you meant Delete and, on Yes, fires the Delete action you intended.
To trigger the near-miss banner: enable mobile emulation (⌘⇧M) and tap on Save's right edge (the side touching Delete). Tapping Delete directly fires it normally.
LostTap detection
Open DevTools Console. The red button is intentionally covered by an invisible overlay 50ms after you press it, so your click lands on the overlay and the button never fires. Morph detects the lost tap and logs a warning.
Open DevTools Console. Tap the red Trapped button — Morph will console.warn a lost-tap message ~300ms after the tap. The green button is a control: tapping it fires normally.
MorphForm
Fill these fields, then navigate to an article and click back (or refresh the page). Your values are still there. Hit Submit — Morph wipes the snapshot.
MorphLoader
Adaptive loader. Below 200ms it shows nothing (no spinner flash). At 200ms it fades in a light skeleton. At 1s it shows a progress bar. At 3s it escalates to "taking longer" with a Cancel button.
Click a button below.
MorphDialog
Accessible modal — auto-focus on open, focus trap on Tab, ESC and backdrop click both close, focus returns to the trigger button on close, and the background is inert.
MorphPhoneInput
Smart phone field that accepts whatever format the user pastes (international, national, with spaces / dashes / parens / dots) and outputs canonical E.164.
Try pasting:
+33 6 12 34 56 78(415) 555-014306.12.34.56.7800 44 20 7946 0958Pin status (V2 behavioral exclusions)
Live view of every V2-tracked zone with its pinned state. Header/footer/nav should be auto-pinned. Toggle the button to dynamically pin a section via data-morph-pin.
Live view of V2-tracked zones in this page. Pinned zones are excluded from reorder / collapse / fade. Add data-morph-pin to the demo button below — it should flip to PINNED within a second.
V2 not initialized yet…
Behavior debug (ScorerEngine inputs)
Live ScorerEngine inputs. Click around the demos above to accumulate interactions, then refresh — Morph applies the reorder/collapse decisions at the next mount.
Behavior debug
0 / 20 clicksScorerEngine runs once at mount and only acts when total clicks ≥ 20. Click around (article cards, demo buttons, dialog opens), then refresh to see the reorder/collapse decision applied.
No stats yet — click on a few interactive elements to start the count.
WhiteIsland fix (iframe + white-bg logo)
Toggle macOS Settings → Appearance to dark. The YouTube iframe and the white-bg logo below should both dim automatically — no flashbang on either side.
Utility hooks (storage / tab-sync / autofill)
Three V2 hooks: useStorage (persistent local state), useTabSync (cross-tab state via BroadcastChannel), and useAutoFillGuard (browser autofill detection).
useStorage
layer: …Type something, then refresh — your text is still here. Persisted to IndexedDB on every keystroke (with localStorage and memory fallbacks).
useTabSync
Open this page in a second tab. Click +1 in either tab — the count updates everywhere within ~50ms via BroadcastChannel.
useAutoFillGuard
isAutofilled: falseSave a credential for this site in Chrome (Settings → Autofill → Passwords), reload, and let it autofill the email below. The flag flips to true immediately — no fake change event needed.