From 2ff2d3b43a7e3b11d20b4201919be8ed34aca5b4 Mon Sep 17 00:00:00 2001 From: Garry Tan Date: Tue, 3 Nov 2026 17:27:36 -0800 Subject: [PATCH] fix(design): exits ease out, never ease in (GST-1240) (#3963) /design-consultation wrote exit(ease-in) into DESIGN.md and /design-review checked against the same rule, so a laggy exit was generated and never flagged. Rewrite of #3900. Co-authored-by: Nick Fitzsimmons <2198211+nfitzsimmons@users.noreply.github.com> Co-authored-by: capy-ai[bot] <230910855+capy-ai[bot]@users.noreply.github.com> --- DESIGN.md | 2 +- changelog.d/gst-1240-exit-ease-out.md | 6 ++++++ design-consultation/sections/proposal-and-preview.md | 2 +- design-consultation/sections/proposal-and-preview.md.tmpl | 2 +- design-review/SKILL.md | 2 +- scripts/resolvers/design.ts | 2 +- 6 files changed, 11 insertions(+), 5 deletions(-) create mode 100644 changelog.d/gst-1240-exit-ease-out.md diff --git a/DESIGN.md b/DESIGN.md index 1bc64d375..a4963e30f 100644 --- a/DESIGN.md +++ b/DESIGN.md @@ -119,7 +119,7 @@ rounded: ## Motion - **Approach:** Minimal-functional — only transitions that aid comprehension. The dashboard's live feed IS the motion. -- **Easing:** enter(ease-out / cubic-bezier(0.16,1,0.3,1)) exit(ease-in) move(ease-in-out) +- **Easing:** enter(ease-out / cubic-bezier(0.16,1,0.3,1)) exit(ease-out) move(ease-in-out) - **Duration:** micro(50-100ms) short(150ms) medium(250ms) long(400ms) - **Animated elements:** live feed dot pulse (2s infinite), skill bar fill (600ms ease-out), hover states (150ms) diff --git a/changelog.d/gst-1240-exit-ease-out.md b/changelog.d/gst-1240-exit-ease-out.md new file mode 100644 index 000000000..38168b2b0 --- /dev/null +++ b/changelog.d/gst-1240-exit-ease-out.md @@ -0,0 +1,6 @@ +**Design exits ease out, never ease in (GST-1240).** `/design-consultation` wrote `exit(ease-in)` into every DESIGN.md it made, and `/design-review` checked against the same rule, so an exit that lags was both generated and never flagged. Ease-in starts slow at the moment the user is watching, so a dismissal, menu close or toast exit reads as lag. Rewrite of #3900 by @nfitzsimmons. + +### Fixed +- **`/design-review` motion checklist:** ease-out to enter and exit, ease-in-out to move, and flag plain ease-in. The new line is one byte longer than the old one, so /design-review stays inside its size cap. +- **`/design-consultation` DESIGN.md template:** `exit(ease-in)` becomes `exit(ease-out)`. +- **gstack's own `DESIGN.md`:** the motion easing matches, `exit(ease-out)`. diff --git a/design-consultation/sections/proposal-and-preview.md b/design-consultation/sections/proposal-and-preview.md index 6f9ae8150..6c606f88e 100644 --- a/design-consultation/sections/proposal-and-preview.md +++ b/design-consultation/sections/proposal-and-preview.md @@ -567,7 +567,7 @@ components: ## Motion - **Approach:** [minimal-functional / intentional / expressive] -- **Easing:** enter(ease-out) exit(ease-in) move(ease-in-out) +- **Easing:** enter(ease-out) exit(ease-out) move(ease-in-out) - **Duration:** micro(50-100ms) short(150-250ms) medium(250-400ms) long(400-700ms) - **The one authored moment:** [what it is] diff --git a/design-consultation/sections/proposal-and-preview.md.tmpl b/design-consultation/sections/proposal-and-preview.md.tmpl index 7c975d158..37f5f98aa 100644 --- a/design-consultation/sections/proposal-and-preview.md.tmpl +++ b/design-consultation/sections/proposal-and-preview.md.tmpl @@ -322,7 +322,7 @@ components: ## Motion - **Approach:** [minimal-functional / intentional / expressive] -- **Easing:** enter(ease-out) exit(ease-in) move(ease-in-out) +- **Easing:** enter(ease-out) exit(ease-out) move(ease-in-out) - **Duration:** micro(50-100ms) short(150-250ms) medium(250-400ms) long(400-700ms) - **The one authored moment:** [what it is] diff --git a/design-review/SKILL.md b/design-review/SKILL.md index 42e47d251..784ec2f66 100644 --- a/design-review/SKILL.md +++ b/design-review/SKILL.md @@ -676,7 +676,7 @@ Apply these at each page. Each finding gets an impact rating (high/medium/polish - No `user-scalable=no` or `maximum-scale=1` in viewport meta **7. Motion & Animation** (7 items) -- Easing: ease-out for entering, ease-in for exiting, ease-in-out for moving +- Easing: ease-out to enter and exit, ease-in-out to move; flag plain ease-in - Duration: 50-700ms range (nothing slower unless page transition) - Purpose: every animation communicates something (state change, attention, spatial relationship) - `prefers-reduced-motion` respected (check: `await pg.evaluate(() => matchMedia("(prefers-reduced-motion: reduce)").matches)`) diff --git a/scripts/resolvers/design.ts b/scripts/resolvers/design.ts index 479cb057b..b560100b2 100644 --- a/scripts/resolvers/design.ts +++ b/scripts/resolvers/design.ts @@ -344,7 +344,7 @@ Apply these at each page. Each finding gets an impact rating (high/medium/polish - No \`user-scalable=no\` or \`maximum-scale=1\` in viewport meta **7. Motion & Animation** (7 items) -- Easing: ease-out for entering, ease-in for exiting, ease-in-out for moving +- Easing: ease-out to enter and exit, ease-in-out to move; flag plain ease-in - Duration: 50-700ms range (nothing slower unless page transition) - Purpose: every animation communicates something (state change, attention, spatial relationship) - \`prefers-reduced-motion\` respected (check: \`await pg.evaluate(() => matchMedia("(prefers-reduced-motion: reduce)").matches)\`)