UI พรีเมียมและคลาส Motion กลาง

ทุกหน้าจอใช้ภาษาการออกแบบเดียวกันจาก frontend/src/app/globals.css (§9–§14): ใช้คลาส Motion กลางและคอมโพเนนต์ <Button> / <Modal> กลาง ห้ามเขียน @keyframes หรือ style={{ animation }} เองใน .tsx (กฎข้อ 19) กฎความปลอดภัยของ animation ดู กฎความปลอดภัยของ Animation: fill-mode, reduced motion และ Prepaint 3 จุด (Motion Safety Rules)

Design Tokens (:root, globals.css §9)

Token	ค่า	ใช้กับ
--sml-ease-out	cubic-bezier(0.16, 1, 0.3, 1)	element เข้าทั่วไป
--sml-ease-spring	cubic-bezier(0.34, 1.56, 0.64, 1)	ปุ่ม/ไอคอนเด้ง
--sml-ease-in-out	cubic-bezier(0.65, 0, 0.35, 1)	ภาพตกแต่งวนลูป (aurora)
--sml-dur-fast/base/slow	140ms / 220ms / 420ms	ระยะเวลามาตรฐาน
--sml-shadow-soft/raised/float	เงา 3 ระดับ	การ์ด / hover / Modal-Popover

คลาส Motion กลาง (ตรวจแล้วมีใน globals.css ทั้งหมด)

คลาส	พฤติกรรม	ตัวอย่างใช้จริง
sml-anim-fade	จางเข้า 220ms	backdrop เมนู, <main> ของ AdminShell
sml-anim-rise	ลอยขึ้น 10px + จาง หน่วงตาม --sml-i × 45ms	การ์ดหน้า login / select-database
sml-anim-pop	ยุบ-ขยายจากด้านบน	แบนเนอร์ session หมดอายุ, กล่อง error
sml-stagger (ที่ container)	ลูกไล่จังหวะเข้า (nth-child หรือ --sml-i)	การ์ดระบบใน SystemPortalScreen, แถว KPI
sml-kpi-row (คู่ sml-stagger)	การ์ด KPI ลอย 2px + เงาเมื่อชี้	Dashboard ของ TMS/Procure/e-Tax/WMS
sml-lift	ลอย 3px + เงา float (กดยุบ)	การ์ดฐานข้อมูล/ระบบ/เมนูผู้ดูแล
sml-skeleton	แถบ shimmer ระหว่างโหลด	รายการฐานข้อมูล
sml-aurora + -blob + -grid	ฉากหลังออโรร่า (ตกแต่ง ใส่ aria-hidden)	Login, Portal Hero, WorkspaceWelcome
sml-float, sml-spin-slow, sml-glow-pulse	ลอย/หมุนช้า/เรืองแสง (วนลูป)	ไอคอนตกแต่ง Hero
sml-gold-text	ข้อความไล่เฉดทอง (บน Header เติม [animation:none])	โลโก้
sml-glass	พื้นกระจกฝ้า รองรับโหมดมืด	การ์ดลอยบนฉากหลังเข้ม
animate-in fade-in-0 zoom-in-95 duration-150	ไวยากรณ์ tailwindcss-animate ประกาศด้วย @utility (§11)	Modal ย่อยใน account/transaction/*Modal.tsx, SmlDialog, ItemGridContextMenu

คอมโพเนนต์ที่เป็นพรีเมียมแล้ว (ใช้ต่อได้เลย)

• <Button> (shared/ui/Button.tsx): primary/accent ไล่เฉด+เงา, ghost/secondary/danger เงาบาง, กดยุบ scale(0.97), มี focus ring — API เดิม (variant, size, loading) และเป็นมาตรฐาน Toolbar (Header และ Toolbar 2 แถว ธีมการ์ด และสีพื้นหลัง Widget (EmployeeScreen Standard))
• <Modal> (shared/ui/Modal.tsx): backdrop bg-slate-950/45 + blur, กล่องเด้งเข้า (sml-modal-dialog), แถบสีแบรนด์ด้านบน, Esc ปิดเฉพาะชั้นบนสุด
• Header / MenuBar / แถบแท็บ MDI: dropdown เด้งเข้า ([data-sml-dropdown] > div), แท็บใหม่เด้งเข้า + แถบสีแบรนด์ 2px บนแท็บที่เปิดอยู่ (CSS ล้วน)
• WorkspaceWelcome แสดงเมื่อยังไม่เปิดหน้าจอใดใน MDI

Polish ทั้งระบบ (CSS ล้วน ไม่เปลี่ยน Layout, §13–§14)

• ตาราง: หัวมีเงาสะท้อนแสงบาง, แถวที่เลือกมีแถบสีแบรนด์ 3px ที่เซลล์แรก, hover นุ่ม
• ช่องกรอก: โฟกัสมีวงแสงสีแบรนด์ (box-shadow 3px) ทั้งสว่าง/มืด; ช่องโปร่งใสใน Grid ใช้เส้นล่าง
• Toolbar แถว 2 และหัว DataList มีเงาสะท้อนแสงด้านบน — หน้าจอใหม่ที่ทำตามมาตรฐานได้อัตโนมัติ
• ใช้ background-image / box-shadow ซ้อนบนสีพื้นเดิมเท่านั้น ห้าม override background-color (สว่าง/มืด/สีพื้น Widget คุมอยู่แล้ว — ดู --custom-widget-bg ใน Header และ Toolbar 2 แถว ธีมการ์ด และสีพื้นหลัง Widget (EmployeeScreen Standard))

ตัวอย่าง

<ul className="sml-stagger grid gap-3 sm:grid-cols-2">
  {rows.map((row, idx) => (
    <li key={row.code} style={{ "--sml-i": idx } as React.CSSProperties}
        className="sml-lift rounded-xl border border-line bg-white p-4">{row.name_1}</li>
  ))}
</ul>
{loading ? <div className="sml-skeleton h-8 w-full rounded-lg" /> : <Table />}

ข้อจำกัด

• ห้ามเปลี่ยน Layout/ตำแหน่งช่องกรอกของหน้าจอที่ถอดแบบจาก SML เพื่อความสวย (Motion ทำได้ระดับสี เงา เส้นขอบ และ animation)
• ห้ามภาพเคลื่อนไหวที่มีตัวเลขธุรกิจสมมติ — ภาพประกอบใน Login/หน้าต้อนรับเป็นกราฟตกแต่งที่ไม่มีตัวเลข

ที่มา

• docs/kms/KMS_PREMIUM_UI_MOTION_STANDARD.md Objective, Workflow §1–3.1, Usage, Limitation
• .agents/skills/premium-ui-motion-system/SKILL.md Workflow ข้อ 1, 5, Usage example

ดูเพิ่ม

สารบัญมาตรฐานและกฎเหล็กของ SML Ai Account (Standards Overview) · กฎความปลอดภัยของ Animation: fill-mode, reduced motion และ Prepaint 3 จุด (Motion Safety Rules) · Header และ Toolbar 2 แถว ธีมการ์ด และสีพื้นหลัง Widget (EmployeeScreen Standard) · บทเรียนบั๊ก UX/หน้าจอธุรกรรม/Master/แท็บ MDI (Frontend UX Bug Lessons) · ภาพรวม Frontend ของ SML Ai Account (Frontend overview)