dme-agent 7.4.2 → 9.69.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,56 +1,129 @@
1
1
  ---
2
2
  name: dme-dashboard
3
3
  description: >
4
- Build elite operational dashboards for human users. Work objects, metric strips,
5
- tables/queues, sheets, filters not decorative chart posters.
6
- Triggers: /dme-dashboard, dashboard, admin panel, analytics UI, backoffice, painel.
4
+ DME 9.69 peaceful dense operational dashboards: gray palette, work object first,
5
+ metric strip, tables/queues, soft motion. Triggers: /dme-dashboard, dashboard,
6
+ admin panel, backoffice, ops UI, command center, metrics table, work queue.
7
7
  ---
8
8
 
9
- # DME Dashboard — Monster Mode
9
+ # DME Dashboard 9.69 Peaceful Dense Ops
10
10
 
11
- ## Ask (internally, then build)
11
+ **Work surface, not poster.** Someone decides something in 10 seconds.
12
12
 
13
- 1. Who uses this? (shop owner, teacher, support — not “engineer” by default)
14
- 2. Work object? (orders, students, tickets…)
15
- 3. 10-second decision?
16
- 4. Top 3 actions?
13
+ ## Intake (if not locked)
17
14
 
18
- ## Shell
15
+ 1. **Work object** — orders, tickets, students, invoices…
16
+ 2. **Who decides what** — role + primary action
17
+ 3. **Platform** — web calm vs app rich
18
+ 4. **Palette** — default **peace gray/white** unless brand given
19
+
20
+ ## Shell (always)
21
+
22
+ ```
23
+ sidebar
24
+ · search / filters / primary CTA
25
+ · status strip (optional: live, sync, env)
26
+ · metric strip (numbers only)
27
+ · table | queue | list
28
+ · detail Sheet | Dialog
29
+ ```
30
+
31
+ shadcn: `sidebar` `table` `badge` `tabs` `sheet` `dialog` `select` `command` `skeleton` `pagination` `progress` `dropdown-menu` · Card **thin** for KPIs only if needed.
32
+
33
+ ## Metric strip
19
34
 
20
35
  ```
21
- sidebar | top: search · filters · primary CTA
22
- status strip (one line)
23
- metric strip: 3–5 BIG numbers, labels 1–3 words, NO paragraphs
24
- main: table or queue of the work object
25
- detail: Sheet/Dialog on row click
36
+ [ 128 ] [ 14 ] [ 3.2% ]
37
+ Pedidos Fila Falha
26
38
  ```
27
39
 
28
- ## Patterns
40
+ - Big number + **1–3 word** label
41
+ - Optional delta: `+12%` muted
42
+ - **No paragraphs under KPIs**
43
+ - Prefer bare grid over Card walls
44
+ - Icons: almost never (see `/dme-icons`)
45
+
46
+ ## Table / queue (protagonist)
47
+
48
+ - Default sort = what ops need now (priority, SLA, newest)
49
+ - Row click → `Sheet` detail (don’t force full page unless deep edit)
50
+ - Filters: Select + search; advanced behind “Mais filtros”
51
+ - Bulk actions: visible only when rows selected
52
+ - Pagination or virtualize — don’t dump 500 DOM rows casually
53
+
54
+ ### Columns
55
+
56
+ Identity · Status (Badge) · Critical date/number · Owner · Actions (DropdownMenu)
57
+
58
+ ## Status strip
59
+
60
+ Soft, scannable: `● Sincronizado` · `12 online` · env badge. Not a second dashboard.
29
61
 
30
- | Pattern | Use |
31
- |---|---|
32
- | Operational Index | default product home |
33
- | Command Center | live ops / jobs / day-of |
34
- | Human Overview | business owner “today” |
35
- | Dense Analytics | many numbers, Tufte-clean |
36
- | Inbox / Queue | items needing human action |
62
+ ## Patterns (pick one)
37
63
 
38
- ## Rules
64
+ | Pattern | When |
65
+ |---------|------|
66
+ | **Operational Index** | browse + act on many records |
67
+ | **Command Center** | few KPIs + live queue + attention items |
68
+ | **Human Overview** | people/schedule first, light metrics |
69
+ | **Dense Analytics** | tables + tight numbers; charts rare |
70
+ | **Inbox/Queue** | process items top-down; keyboard friendly |
39
71
 
40
- - Metrics: number + short label + optional delta only
41
- - Table columns: identity · status · date · value · action
42
- - Badge for status (`Pago`, `Atrasado`, `Novo`)
43
- - Search if >8 rows
44
- - Empty = title + 1 line + CTA; Loading = Skeleton; Error = human + retry
45
- - No “Welcome to your dashboard” hero inside logged-in app
46
- - No 6 donut charts
47
- - Cards for entities on mobile OK; desktop prefers table/rows
48
- - shadcn: sidebar, table, badge, tabs, sheet, dialog, select, command, skeleton, pagination, progress, dropdown-menu, card (thin)
72
+ ## Peace aesthetic
73
+
74
+ - Gray/zinc surfaces, white raise, hairline borders
75
+ - One accent for primary CTA / critical badge
76
+ - Density via **8/12/16 spacing**, not smaller unreadable type
77
+ - Dark option: `#09090b` / `#18181b`
78
+
79
+ ## Motion (dashboard = calm)
80
+
81
+ - Page: optional 150–200ms fade
82
+ - Rows: no enter carnival
83
+ - Sheet: 250–280ms peace-out
84
+ - Skeleton pulse soft; respect reduced motion
85
+ - App shell may add light route transition — content stays quiet
86
+
87
+ See `/dme-motion`.
88
+
89
+ ## States
90
+
91
+ | State | UI |
92
+ |-------|-----|
93
+ | **Empty** | title + 1 line + one CTA (`Criar pedido`) |
94
+ | **Loading** | Skeleton matching table/metrics geometry |
95
+ | **Error** | what failed + retry — never stack trace |
96
+ | **Success** | Sonner 1 line |
97
+ | **Offline** | status strip + disable mutating actions |
49
98
 
50
99
  ## Copy
51
100
 
52
- Human language.Pedidos hoje” not “Order throughput ingest”.
101
+ - NoWelcome to your dashboard!” inside logged-in apps
102
+ - Buttons = verbs: `Aprovar`, `Atribuir`, `Exportar`
103
+ - Filters labeled in human language
104
+
105
+ ## Hard bans
106
+
107
+ - Six donut charts
108
+ - Feature-card grid as “home”
109
+ - AI purple glow, mesh background
110
+ - KPI essays
111
+ - Tour of 12 tooltips
112
+ - Reinvented table/sidebar
53
113
 
54
114
  ## Deliver
55
115
 
56
- Brief (object, persona, pattern, shadcn) code what you refused.
116
+ 1. Brief: work object · role · platform · anchor **vercel-dens** default
117
+ 2. Code: shell + metrics + table + sheet + states
118
+ 3. Subtract: kill ornament, keep decisions
119
+
120
+ ### Checklist
121
+
122
+ - [ ] Work object obvious in 10s
123
+ - [ ] Metrics are numbers not stories
124
+ - [ ] Table/queue is the hero
125
+ - [ ] Peace gray + soft motion
126
+ - [ ] Empty/error real
127
+ - [ ] shadcn composed
128
+
129
+ **Decide. Don’t decorate.**
@@ -1,18 +1,145 @@
1
1
  ---
2
2
  name: dme-design
3
3
  description: >
4
- DME 7.4.1 full design workflow. UI, product surfaces, visual identity.
5
- Triggers: /dme-design, DME, neominimal, design UI, make it premium.
4
+ DME 9.69 Absolute Front-End master design workflow. Session intake first
5
+ (palette, platform, mood), then structure, shadcn, motion, icons, peace aesthetic.
6
+ Triggers: /dme-design, DME design, neominimal, design UI, make it premium,
7
+ absolute front-end, peace UI, gray palette, product surface design.
6
8
  ---
7
9
 
8
- # DME Design 7.4.1
10
+ # DME Design 9.69 — Absolute Front-End
9
11
 
10
- 1. Audience: human non-dev unless told otherwise
11
- 2. Anchor: vercel-dens | apple-editorial | fumadocs
12
- 3. Protagonist of first viewport
13
- 4. shadcn map → install → tokens
14
- 5. Short copy; cards only if lean
15
- 6. Empty/loading/error states
16
- 7. Deliver: brief → code → subtraction
12
+ Master workflow. Run this before painting pixels. Design is intake → structure → compose → subtract.
17
13
 
18
- Hard bans: text walls, AI feature-card spam, reinvented primitives, vague marketing copy.
14
+ ## 0. Session intake (mandatory unless already answered)
15
+
16
+ Ask **early**, not mid-build. One short block; do not interview forever.
17
+
18
+ | # | Question | Default if silent |
19
+ |---|----------|-------------------|
20
+ | 1 | **Platform?** `web` · `app` (Electron/Tauri/desktop) · `both` | `web` |
21
+ | 2 | **Palette?** brand hexes / “peace gray” / dark or light | **Peace:** gray/white, zinc neutrals, one accent max |
22
+ | 3 | **Mood?** calm ops · editorial · playful soft · dense tool | calm ops |
23
+ | 4 | **Audience?** non-dev humans default | non-dev |
24
+ | 5 | **Work object?** (orders, files, chats…) or landing goal | required for dashboards |
25
+ | 6 | **Motion budget?** web-calm · app-rich · minimal | web-calm on web, app-rich on desktop |
26
+
27
+ If he already gave colors/platform, **skip re-asking**. Lock tokens and go.
28
+
29
+ ### Peace default (9.69)
30
+
31
+ ```
32
+ bg: #fafafa / #ffffff (light) · #09090b (dark)
33
+ raise: #ffffff / #f4f4f5 · #18181b
34
+ border: zinc-200 / zinc-800
35
+ text: zinc-900 / zinc-100
36
+ muted: zinc-500
37
+ accent: one only — brand OR #0065F2 (light CTA) OR #FFDE21 (dark)
38
+ radius: ≤ 8px
39
+ shadow: overlays only
40
+ type: Montserrat · Playfair Display (editorial) · JetBrains Mono (data)
41
+ ```
42
+
43
+ **90% neutrals / 10% accent.** Hierarchy: size → weight → space → color.
44
+
45
+ ## 1. Decision brief (≤10 lines before code)
46
+
47
+ ```
48
+ Task:
49
+ Audience:
50
+ Platform: web | app
51
+ Anchor: vercel-dens | apple-editorial | fumadocs ← pick ONE
52
+ Protagonist (first viewport):
53
+ Palette lock:
54
+ shadcn list:
55
+ Motion density: calm | rich
56
+ Icon policy: sparse | nav+status
57
+ Card policy: lean / none
58
+ ```
59
+
60
+ ## 2. Structure before components
61
+
62
+ 1. **One protagonist** per viewport — what the eye should hit first.
63
+ 2. **Information order:** primary action → status → data → chrome.
64
+ 3. **Shell pattern:**
65
+ - Web marketing → landing modules (`/dme-landing`)
66
+ - Web product → sidebar + work surface (`/dme-dashboard`)
67
+ - Desktop → titlebar-aware shell (`/dme-app-shell`)
68
+ 4. **States planned up front:** empty · loading · success · error · offline.
69
+
70
+ ## 3. Compose stack (never reinvent)
71
+
72
+ | Layer | Tool |
73
+ |-------|------|
74
+ | Primitives | **shadcn/ui** — Button, Input, Dialog, Table, Tabs, Sidebar, Sheet, Select, Form, Badge, Separator, Progress, Tooltip, Sonner, Accordion, Card, Command, DropdownMenu, Pagination, Skeleton |
75
+ | Motion | **framer-motion** + CSS keyframes — see `/dme-motion` |
76
+ | Icons | **lucide-react** — see `/dme-icons` |
77
+ | Layout | Tailwind; density via spacing scale, not decoration |
78
+
79
+ Install → map → compose. Hand-rolled Button/Dialog/Table = fail.
80
+
81
+ ## 4. Copy & cards
82
+
83
+ - Hero lead = **1 sentence**
84
+ - Card body ≤ **1–2 lines**
85
+ - Field label ≤ 3 words · toast 1 line · modal 2–3 lines
86
+ - Cards only when they earn space: entity · plan · KPI number · media+meta
87
+ - Text-only box → `divide-y` list or table instead
88
+
89
+ ### Banned AI copy
90
+
91
+ seamless · next-gen · powerful · revolutionary · unlock · supercharge · elevate · cutting-edge · robust · your journey · empower · all-in-one · delve · in today’s world
92
+
93
+ ## 5. Platform motion rule
94
+
95
+ | Platform | Motion |
96
+ |----------|--------|
97
+ | **Web** | Restrained: 120–250ms, opacity/y small, functional only |
98
+ | **App** | Richer: springs, welcome staggers, route transitions — still peaceful, not carnival |
99
+
100
+ Always honor `prefers-reduced-motion`. Details in `/dme-motion`.
101
+
102
+ ## 6. Aesthetic: peace, not carnival
103
+
104
+ **Do:** quiet gray surfaces, crisp type, soft separators, one accent hit, readable density.
105
+ **Don’t:** blobs, mesh gradients, neon glow, particle noise, 6 icon feature cards with essays, typing loops, autoplay chaos.
106
+
107
+ Anchors (one primary):
108
+
109
+ - **Vercel dens** — operational, tight, mono accents for data
110
+ - **Apple editorial** — type-led, space as luxury, few elements
111
+ - **Fumadocs** — doc-calm, clear nav, content first
112
+
113
+ ## 7. Delivery format
114
+
115
+ 1. **Brief** (intake answers locked)
116
+ 2. **Working code** (React/Next + Tailwind + shadcn + motion + lucide as needed)
117
+ 3. **Subtraction notes** — what you refused and why
118
+
119
+ ### Exit checklist
120
+
121
+ - [ ] Palette + platform asked or inherited
122
+ - [ ] One protagonist, one anchor
123
+ - [ ] shadcn only for atoms
124
+ - [ ] Short copy, lean cards
125
+ - [ ] All five states considered
126
+ - [ ] Motion density matches platform
127
+ - [ ] Icons sparse and meaningful
128
+ - [ ] Subtracted once more
129
+
130
+ If it smells like generic AI SaaS → **redo**.
131
+
132
+ ## Skill routing
133
+
134
+ | Need | Skill |
135
+ |------|-------|
136
+ | Primitives | `/dme-shadcn` |
137
+ | Motion bible | `/dme-motion` |
138
+ | Icons | `/dme-icons` |
139
+ | Ops UI | `/dme-dashboard` |
140
+ | Marketing | `/dme-landing` |
141
+ | Desktop shell | `/dme-app-shell` |
142
+ | Human UX / microcopy | `/dme-ux` |
143
+ | Onboarding craft | `/dme-welcome` |
144
+ | Research | `/dme-research` |
145
+ | Scorecard | `/dme-critique` |
@@ -0,0 +1,89 @@
1
+ ---
2
+ name: dme-icons
3
+ description: >
4
+ DME 9.69 intelligent icon doctrine. Lucide/Phosphor/Radix with discipline —
5
+ recognition, nav, status — never decorative spam. Triggers: /dme-icons,
6
+ lucide, icon system, sidebar icons, toolbar icons, icon density.
7
+ ---
8
+
9
+ # DME Icons 9.69 — Intelligent, not spam
10
+
11
+ Icons are **affordance and status**, not confetti.
12
+
13
+ ## Law
14
+
15
+ If removing the icon loses **no** recognition and **no** faster scan → **remove it**.
16
+
17
+ ## Stack
18
+
19
+ | Default | Also OK (pick one set per product) |
20
+ |---|---|
21
+ | **lucide-react** | Phosphor, Radix Icons |
22
+
23
+ Never mix 3 icon libraries on one surface. Never emoji as product chrome.
24
+
25
+ ## Size & stroke
26
+
27
+ | Context | Size | Stroke |
28
+ |---|---|---|
29
+ | Dense table / meta | 14–16 | 1.5–2 |
30
+ | Nav / toolbar | 18–20 | 1.5–2 |
31
+ | Empty / welcome glyph | 24–32 | 1.5 |
32
+ | Marketing feature spam | **don’t** | — |
33
+
34
+ Align to text cap-height. Optical center in hit targets ≥44px mobile.
35
+
36
+ ## Strategies (pick one per surface)
37
+
38
+ | Strategy | When | Rules |
39
+ |---|---|---|
40
+ | **none** | editorial landing, manifesto | type carries hierarchy |
41
+ | **sparse-functional** | most product UI | icons only on actions / destructive / search / close |
42
+ | **system-rail** | app sidebar / Electron shell | icon rail + labels on expand; active = bg/weight not rainbow |
43
+ | **status-system** | dashboards | Badge + optional icon; color never sole channel |
44
+ | **onboarding** | welcome steps | **1–3** glyphs total for whole flow |
45
+
46
+ ## Where icons earn space
47
+
48
+ - Navigation items (with labels, or tooltip if collapsed rail)
49
+ - Primary/secondary actions when verb is faster with symbol (Search, Settings, Close)
50
+ - Status: success / warning / error / offline (pair with text)
51
+ - Empty state: **one** quiet glyph max
52
+ - Input affordances: show/hide password, clear, calendar
53
+
54
+ ## Where icons are crime
55
+
56
+ - Every feature card with a different colorful glyph + essay
57
+ - Icon beside every H2 “for polish”
58
+ - Random multicolor packs
59
+ - Icon-only mystery meat for non-universal actions
60
+ - Animated spinning icons for no reason
61
+
62
+ ## Pairing rules
63
+
64
+ | Case | Rule |
65
+ |---|---|
66
+ | Nav | icon + label (collapsed: icon + tooltip) |
67
+ | Button | icon optional left of verb |
68
+ | Table row action | icon-only OK if universal + aria-label |
69
+ | Marketing | prefer zero or one mark, not six |
70
+
71
+ ## Compose with shadcn
72
+
73
+ ```tsx
74
+ import { Search, Plus, ChevronRight } from "lucide-react"
75
+ import { Button } from "@/components/ui/button"
76
+ // Button size icon + aria-label for icon-only
77
+ ```
78
+
79
+ Active nav: `bg-zinc-100 dark:bg-zinc-800` + weight — not recoloring the SVG to 5 brand hues.
80
+
81
+ ## Deliver
82
+
83
+ 1. Strategy name
84
+ 2. Icon map (nav / actions / status)
85
+ 3. Size tokens
86
+ 4. Implement with lucide + shadcn
87
+ 5. Run spam test: strip half — if clearer, keep stripped
88
+
89
+ Full doctrine: `assets/references/icon-doctrine.md`
@@ -1,48 +1,123 @@
1
1
  ---
2
2
  name: dme-landing
3
3
  description: >
4
- Build dynamic high-conversion landing pages with functional motion and short copy.
5
- Triggers: /dme-landing, landing page, marketing page, homepage, launch page.
4
+ DME 9.69 web landings: one message, proof, steps, CTA, restrained motion,
5
+ short copy, conversion-focused peace aesthetic. Triggers: /dme-landing,
6
+ landing page, marketing page, homepage, hero, pricing page, waitlist, CTA.
6
7
  ---
7
8
 
8
- # DME Landing — Monster Mode
9
+ # DME Landing 9.69 Convert Quietly
9
10
 
10
- ## Job
11
+ **3s** what/who · **10s** trust · **30s** CTA.
11
12
 
12
- 3s what/who · 10s trust · 30s CTA.
13
+ Platform = **web** → motion **calm**. Peace gray/white default unless brand palette given.
13
14
 
14
- ## Modules (compose, don’t dump all)
15
+ ## Intake
15
16
 
16
- nav · **hero (one message)** · proof · ≤3 steps · product demo · thin benefits · social proof · pricing · FAQ · final CTA · footer
17
+ - One sentence offer
18
+ - Audience (non-dev default)
19
+ - Primary CTA verb
20
+ - Proof available? (logo, number, quote)
21
+ - Palette / dark-light
22
+
23
+ ## Module order (compose, don’t invent sections)
24
+
25
+ ```
26
+ nav
27
+ hero ← one message
28
+ proof ← logos | number | short quote
29
+ ≤3 steps ← how it works
30
+ product demo ← screenshot / UI frame (real, not abstract blobs)
31
+ thin benefits ← list or 3 lean items max — not essay cards
32
+ quote | number
33
+ pricing ← if needed
34
+ FAQ ← Accordion
35
+ final CTA
36
+ ```
37
+
38
+ Skip modules you can’t fill honestly. Empty proof > fake proof.
17
39
 
18
40
  ## Hero
19
41
 
20
- - H1 concrete (6–10 words)
21
- - Lead: **one** human sentence
22
- - Primary CTA verb+object · secondary outline
23
- - One protagonist: type OR image OR product UI not all fighting
42
+ ```
43
+ eyebrow (optional, 2–4 words)
44
+ H1 specific outcome, not slogan soup
45
+ leadONE sentence
46
+ [ Primary CTA ] [ Secondary ghost ]
47
+ ```
48
+
49
+ - Lead max **one sentence**
50
+ - No hero icon grid
51
+ - No autoplay noise
52
+ - Product visual > abstract gradient mesh
53
+
54
+ ## Copy caps
55
+
56
+ | Element | Max |
57
+ |---------|-----|
58
+ | Hero lead | 1 sentence |
59
+ | Step body | 1–2 lines |
60
+ | Benefit | 1–2 lines |
61
+ | FAQ answer | 2–4 lines |
62
+ | Button | real verb (`Começar`, `Ver preços`) |
63
+
64
+ ### Banned
65
+
66
+ seamless · next-gen · powerful · revolutionary · unlock · supercharge · elevate · cutting-edge · robust · your journey · empower · all-in-one · delve · in today’s world
24
67
 
25
- ## Dynamic (allowed)
68
+ ## Cards policy
26
69
 
27
- scroll reveal 180–250ms · list stagger 30–50ms · sticky mobile CTA · persona tabs · number count-up if meaningful
70
+ - Pricing tiers: cards OK
71
+ - Steps: numbered list or lean cards ≤3
72
+ - **Banned:** 6 icon feature cards with paragraphs
28
73
 
29
- ## Dynamic (banned)
74
+ If only text → `divide-y` or simple ol/ul.
30
75
 
31
- blobs · mesh carnival · neon particles · endless feature carousel · typing loop · noisy autoplay
76
+ ## Motion (restrained)
32
77
 
33
- ## Features
78
+ - Hero: single fade-up 200–250ms ease peace-out
79
+ - Steps: short stagger 0.05–0.07, once in view
80
+ - No scroll-jacking, no parallax circus, no typing loops
81
+ - `prefers-reduced-motion` → opacity only
34
82
 
35
- Prefer numbered steps or `border-b` list.
36
- If cards: title ≤5 words + **one line body**. No 6 icon-card spam.
83
+ See `/dme-motion`.
37
84
 
38
- ## Anchors
85
+ ## Visual
39
86
 
40
- Apple editorial (consumer) · Fumadocs (docs/OSS) · Split tech (devtool)
87
+ - Anchor pick one: **apple-editorial** (marketing) or **vercel-dens** (tool) or **fumadocs** (docs product)
88
+ - 90% neutrals / 10% accent
89
+ - Light CTA accent `#0065F2` or brand; dark accent `#FFDE21` if dark hero
90
+ - Radius ≤ 8px; shadows only on elevated UI chrome / mock
41
91
 
42
- ## shadcn
92
+ ## shadcn map
43
93
 
44
- navigation-menu, button, badge, accordion, tabs, separator, sheet, dialog, avatar, card (lean)
94
+ `Button` `Accordion` (FAQ) `Badge` `Separator` · optional `NavigationMenu` · pricing with simple cards · `Sonner` if form
95
+
96
+ Forms: Label + Input + clear error. Waitlist = email + one button.
97
+
98
+ ## Trust
99
+
100
+ - Real numbers over adjectives
101
+ - Logos muted single-color row
102
+ - Quote: name + role, short
103
+
104
+ ## Final CTA
105
+
106
+ Repeat offer in one line + same primary verb. No new metaphor.
45
107
 
46
108
  ## Deliver
47
109
 
48
- Brief (offer, audience, anchor, CTA) code subtraction (copy killed).
110
+ 1. Brief: message · audience · CTA · anchor · card policy
111
+ 2. Code: full page sections with states for form success/error
112
+ 3. Subtract: kill feature spam, mesh, long paragraphs
113
+
114
+ ### Checklist
115
+
116
+ - [ ] One hero message
117
+ - [ ] Proof present or section removed
118
+ - [ ] ≤3 steps
119
+ - [ ] Motion calm
120
+ - [ ] Copy under caps
121
+ - [ ] CTA obvious at 30s
122
+
123
+ **Clarity converts. Carnival confuses.**
@@ -0,0 +1,111 @@
1
+ ---
2
+ name: dme-motion
3
+ description: >
4
+ DME 9.69 Absolute motion craft. Framer Motion, cubic-bezier graphs, springs,
5
+ platform density (web calm / Electron-Tauri rich), reduced-motion law.
6
+ Triggers: /dme-motion, framer-motion, keyframes, cubic-out, easing, spring,
7
+ animate UI, page transition, stagger, prefers-reduced-motion.
8
+ ---
9
+
10
+ # DME Motion 9.69 — Absolute
11
+
12
+ Motion is **craft**, not confetti. Peace aesthetic: soft landings, clear intent, no carnival.
13
+
14
+ ## 0. Resolve density first
15
+
16
+ | Platform | Density | Allowed |
17
+ |---|---|---|
18
+ | **Web** | calmer | functional UI + **one** hero beat; light stagger 40–60ms |
19
+ | **Mobile web** | minimal | opacity / short crossfade; no heavy shared-element |
20
+ | **Electron / Tauri** | richer | welcome choreography, layoutId, spring chrome, route transitions |
21
+ | **prefers-reduced-motion** | hard cut | ≤80ms opacity or instant; kill travel/parallax/spring travel |
22
+
23
+ ## 1. Easing graphs (abuse these — vary by intent)
24
+
25
+ | Token | cubic-bezier | Use |
26
+ |---|---|---|
27
+ | **easeOut** | `0.16, 1, 0.3, 1` | entrances (default) |
28
+ | **easeIn** | `0.55, 0, 1, 0.45` | exits |
29
+ | **easeInOut** | `0.65, 0, 0.35, 1` | reposition on-screen |
30
+ | **cubicOut** | `0.33, 1, 0.68, 1` | sheets, drawers, soft panels |
31
+ | **expoOut** | `0.16, 1, 0.3, 1` | premium hero / desktop reveal |
32
+ | **emphasized** | `0.2, 0, 0, 1` | settle after drag / material |
33
+
34
+ ```css
35
+ --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
36
+ --ease-cubic-out: cubic-bezier(0.33, 1, 0.68, 1);
37
+ --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
38
+ ```
39
+
40
+ ## 2. Springs (Framer / motion)
41
+
42
+ | Token | stiffness | damping | mass | Use |
43
+ |---|---|---|---|---|
44
+ | soft | 280 | 24 | 0.8 | press, icon toggle |
45
+ | snappy | 400 | 30 | 0.6 | command palette, tab indicator |
46
+ | gentle | 120 | 20 | 1.0 | welcome, large panels (desktop) |
47
+ | stiff | 500 | 40 | 0.5 | dense tools |
48
+
49
+ ```tsx
50
+ const easeOut = [0.16, 1, 0.3, 1] as const
51
+ const springSnappy = { type: "spring", stiffness: 400, damping: 30, mass: 0.6 }
52
+ ```
53
+
54
+ ## 3. Duration bands
55
+
56
+ | Band | ms |
57
+ |---|---|
58
+ | feedback | 80–120 |
59
+ | functional | 150–250 |
60
+ | panel | 220–380 |
61
+ | page / welcome | 300–600 |
62
+ | hard cap | ≤800 continuous |
63
+
64
+ ## 4. First-class tools
65
+
66
+ 1. **framer-motion** / **motion/react** — layout, AnimatePresence, layoutId, springs
67
+ 2. **CSS transition / @keyframes** — micro states when lighter
68
+ 3. **WAAPI** — one-offs without React weight
69
+
70
+ ## 5. Pattern recipes
71
+
72
+ **List enter (web/app)**
73
+ `staggerChildren: 0.05` · child `y: 8 → 0` + opacity · easeOut 200–280ms
74
+
75
+ **Sheet**
76
+ `y` or `x` + opacity · cubicOut 280–360ms · backdrop fade easeOut
77
+
78
+ **Dialog**
79
+ scale `0.98 → 1` + opacity · **no bounce**
80
+
81
+ **Tab indicator**
82
+ `layoutId` + spring snappy
83
+
84
+ **Button press**
85
+ scale `0.98` spring soft
86
+
87
+ **Welcome (desktop)**
88
+ 2–4 beats max: mark → title → body → CTA · then **stillness**
89
+
90
+ **Route (desktop)**
91
+ opacity + slight y; optional shared layout title
92
+
93
+ ## 6. Gray / white motion taste
94
+
95
+ - Prefer opacity + small translation (4–12px) over loud scale
96
+ - Shadows only on overlays; animate opacity of overlay not neon glow
97
+ - Gradients: soft zinc washes, slow optional desktop ambient — never mesh carnival
98
+
99
+ ## 7. Banned
100
+
101
+ particles · blob morph loops · mesh storms · infinite typing hero · bounce on ops dashboards · same fade on every node · parallax fighting scroll
102
+
103
+ ## 8. Deliver
104
+
105
+ 1. Density label (web-calm | app-rich | reduced)
106
+ 2. Easing map used
107
+ 3. Framer/CSS snippets
108
+ 4. Implement
109
+ 5. Subtract excess motion
110
+
111
+ Full bible: package `assets/references/motion-bible.md` when present.