Thiết kế motion đúng brand với ak:motion-design

Thiết kế UI animation cảm xúc chuẩn kỹ thuật — archetype Motion Personality, nguyên tắc Disney áp dụng cho UI, bảng timing/easing và choreography nhiều element — không phụ thuộc implementation.

Dùng ak:motion-design khi bạn tạo animation, transition, micro-interaction, loading state, motion cho hero/CTA, page transition hoặc hiệu ứng scroll-trigger và muốn một khung quyết định trung thành với brand personality mà không bịa vật lý.

Chọn ak:motion-design cho ý định animation

Dùng ak:motion-design khi

Bạn tạo UI animation — button, card, modal, page transition.
Bạn cần thiết kế micro-interaction hoặc feedback animation.
Bạn dựng loading, success hoặc error state.
Bạn animate illustration hoặc phần trang trí.
Bạn hoạch định scroll-trigger hoặc progress-based animation.
Bạn cần thiết lập motion identity thương hiệu.
Bạn choreograph một chuỗi nhiều element.

Chọn Skill khác khi

Bạn muốn route yêu cầu motion/video sang skill phù hợp. Dùng ak:motion-graphics.
Bạn thiết kế banner hoặc visual tĩnh. Dùng ak:banner-design hoặc ak:design.
Bạn muốn video React lập trình hoặc GLSL — cài Engineer Kit và dùng ak:remotion hoặc ak:shader ở đó.

Ba trụ cột

Mỗi animation phải thoả ba trụ cột trước khi ra quyết định kỹ thuật:

Trụ cột	Câu hỏi	Chi phối
Emotional intent	Người xem NÊN cảm gì?	Easing, timing, amplitude
Visual narrative	Micro-story là gì?	Setup → Action → Resolution
Motion craft	Làm sao đáng tin?	Vật lý, secondary motion, path

Mỗi animation có ba lớp motion. Animation phẳng là animation thiếu lớp:

Primary — hành động chính mà người xem theo.
Secondary — chi tiết bổ trợ (bóng, icon xê dịch).
Ambient — sự sống nền (gradient, nhịp nhẹ).

Motion Personality

Chọn một archetype cho một dự án và áp dụng nhất quán.

Archetype	Duration	Easing	Overshoot	Từ khoá
Playful	150–300 ms	`ease-out-back`	10–20 %	vui, tinh nghịch, bouncy
Premium	350–600 ms	`cubic-bezier(0.4, 0, 0.2, 1)`	0 %	tinh tế, tối giản, sang
Corporate	200–400 ms	`cubic-bezier(0.2, 0, 0, 1)`	0–3 %	sạch, chuyên nghiệp
Energetic	100–250 ms	`ease-out-expo`	15–30 %	năng động, đậm nét, hấp dẫn

Mặc định: Corporate cho UI, Playful cho illustration.

Brand motion identity — đặt ba hằng số:

Đường easing signature cho 80 % animation.
Bảng duration ba nấc (quick, standard, slow).
Một entrance pattern nhất quán.

Checklist 8 bước animation

Trước khi tạo animation:

Mục tiêu cảm xúc — joy, calm, urgency, elegance.
Motion Personality — một archetype cho một dự án.
Property chính — position, scale, rotation, opacity.
Duration — xem bảng personality.
Họ easing — entrance decelerate, exit accelerate.
Hero element — áp dụng nguyên tắc staging.
Layer secondary/ambient — thêm chi tiết có chủ đích.
Luật 1/3 — khoảng chuyển động, số element đồng thời.

Chọn property

Dùng số property tối thiểu cần thiết. Một là trực tiếp; hai là gọn gàng; ba trở lên có thể quá tải.

Mục tiêu hiệu ứng	Chính	Phụ
Entrance/exit	position	opacity, scale
Emphasis/attention	scale	rotation (nhẹ), opacity pulse
Đổi trạng thái	opacity, color	scale (feedback nhấn)
Direction/flow	position	rotation (theo path)
Depth/3D	scale + shadow	position (parallax)
Loading/progress	rotation (spinner)	scale, opacity pulse
Success	scale (pop)	color, rotation (vẽ tick)
Error/alert	position (rung)	color, rotation (lắc)

Không phụ thuộc implementation

Skill hoạt động với CSS, Framer Motion, GSAP, Lottie, Spring hoặc Remotion. Skill cấp khung quyết định và bảng tham chiếu; stack đích cấp cú pháp.

Attribution

Vendor từ LottieFiles/motion-design-skill theo MIT. Tài liệu tham chiếu chuyên sâu (director, patterns, bảng tham chiếu) đi kèm khi cài Skill.

Skill liên quan

ak:motion-graphics — router + verify loop xuyên các Skill motion và external template pack.
ak:frontend-design — UI nơi motion sinh sống.
ak:design-system — brand token motion nên kế thừa.
ak:banner-design — bản tĩnh cho hero và CTA visual.

Thiết kế motion đúng brand với ak:motion-design

On this page