Motion

Motion template cho AI agent

Motion graphics dạng HTML tự chứa kèm prompt, flow và player tất định — agent đọc một JSON, điền params rồi render video từng frame. Không build, không phụ thuộc ngoài. llms.txt · API · MCP

Sóng âm giọng nói trực tiếp

Sóng âm giọng nói trực tiếp

Sóng âm trực tiếp trên viên nang ghi âm — 64 cột dọc mảnh nhấp nhô theo "lời nói", giữa lúc nói vươn cao, ngừng thì co lại thành dòng chấm, sóng cuộn từ phải sang trái; trọn màn nói→ngừng→nói→gửi.

Tương tácremotion16:95.06sApache-2.0
Gõ, lọc, đi vào chi tiết

Gõ, lọc, đi vào chi tiết

Gõ tìm kiếm trên UI thật, lưới tự thu về một thẻ duy nhất, rồi cú click xuyên vào trang chi tiết.

Tương tácremotion16:92.4sApache-2.0
Đổi theme: quét dọc và gợn sóng

Đổi theme: quét dọc và gợn sóng

Hai kiểu đổi theme — theme-sweep quét chéo (biên quét qua đâu đổi da đến đó) và palette-ripple kiểu kết hợp (panel ⌘K co lại thành điểm, gợn sóng lan ra từ điểm đó đổi da).

Tương tácremotion16:94.72sApache-2.0
Thumb điều khiển phân đoạn làm nhân vật chính

Thumb điều khiển phân đoạn làm nhân vật chính

Cú dịch chuyển thumb trong control phân đoạn thành nhân vật chính cận cảnh — con trỏ bấm vào, thumb trắng trượt qua, icon mới bật lên.

Tương tácremotion16:93.71sApache-2.0
Picker cuộn chọn tính năng

Picker cuộn chọn tính năng

Bộ chọn dọc kiểu di động — viên thuốc tiêu điểm đứng yên, nội dung trôi qua nó, mỗi mục hãm phanh rồi dừng hẳn.

Tương tácremotion16:94.1sApache-2.0
Chuyển động kích hoạt nhập liệu

Chuyển động kích hoạt nhập liệu

Hai kiểu kích hoạt nhập liệu: cursor-performance — con trỏ biểu diễn đẩy vào click, và keycap-smash-cut — kíp nổ phím bấm cắt gọn.

Tương tácremotion16:95.06sApache-2.0
Hashtag hóa thành viên nhãn

Hashtag hóa thành viên nhãn

Chữ "#word" gõ ra, cắt cứng 1 khung hình thành viên nhãn lớn, giữ hình rồi thu nhỏ trượt trái về vị trí, một lần cắt cứng nữa lộ ra trang hoàn thiện — hai lần cắt cứng kẹp một lần trượt.

Tương tácremotion16:94.46sApache-2.0
Viên kính đọc chính tả gõ chữ

Viên kính đọc chính tả gõ chữ

Trên nền đen, một viên kính bật ra to hơn 1.25 lần rồi hạ dần đúng cỡ, ánh sáng nhấn quét bên trong; con trỏ đi trước, chữ giữ chỗ hiện ra khi gõ, ánh sáng tắt dần theo tiến độ, kết thúc thành thanh kính tối trung tính.

Tương tácremotion16:92.17sApache-2.0
Command palette hạ xuống

Command palette hạ xuống

Command palette giáng thế — toàn màn hình tối và mờ lại, panel ⌘K bật lò xo rơi xuống có vọt quá, các dòng ứng viên hiện ra so le, danh sách thu hẹp theo thời gian thực khi gõ chữ.

Tương tácremotion16:95.06sApache-2.0
Con trỏ cộng tác diễn xuất

Con trỏ cộng tác diễn xuất

Hai kiểu con trỏ cộng tác đóng vai diễn viên — dialogue-duet song vũ hai con trỏ trên nền tối (tiến lại gần/vòng vị trí/trao đèn/phóng to thành chuyển cảnh) và cast-ensemble lớp nền năm con trỏ (bay vào so le + trôi dạt sine + cameo gõ chữ + tụ lại xem).

Tương tácremotion16:94.72sApache-2.0
Chip nâng lên thành viên thuốc người dùng

Chip nâng lên thành viên thuốc người dùng

Chip mục tiêu trong lưới cắt cứng đảo màu đen-trắng trong 3 khung, các chip khác mờ dần thu nhỏ so le theo khoảng cách Manhattan tới nó; mép trái chip đen neo lại và mọc dài thành viên thuốc, gõ từng chữ tên người rồi thắp chấm xanh lá, sau đó kéo một đường nối 1px đến huy hiệu tròn.

Tương tácremotion16:95.5sApache-2.0
Chọn một chip nền đen

Chọn một chip nền đen

Năm chip lựa chọn xếp 3+2 giữa khung lần lượt mờ dần hiện ra; khung được chọn chèn một khung ép màu xám, ngay sau đó vài khung nền chuyển đen tuyền chữ trắng kèm nảy nhẹ 1→1.04→1, các chip khác mờ còn 18% nhưng vị trí khóa chặt; rồi các chip còn lại về 0, chip đen dịch lên thu hẹp, phía dưới hiện dòng công thức tính.

Tương tácremotion16:95.5sApache-2.0
Nội dung hiện hình trên canvas

Nội dung hiện hình trên canvas

Hai kiểu nội dung "vật chất hóa lên canvas" — panel-to-canvas biến hàng thành thẻ (hàng trong bảng bay ra theo cung, biến hình xuyên container thành thẻ canvas) và diagram-cascade cây sinh tầng lớp (node bật ra từng tầng sau khi gõ prompt, đường nối mọc trước node).

Tương tácremotion16:94.39sApache-2.0
Luồng phản hồi AI

Luồng phản hồi AI

Bảng phản hồi AI đưa ra một câu tóm tắt dễ đọc trước, rồi các dòng bằng chứng kèm icon trạng thái lần lượt đổ vào, gom lại thành trạng thái hoàn tất.

Tương tácremotion16:95.06sApache-2.0
Núm xoay khoảng cách bố cục

Núm xoay khoảng cách bố cục

Núm xoay khoảng cách điều khiển bố cục — một hàng khối liên kết có viền chọn + chú thích khoảng cách, số trên badge nhảy từng nấc, khối bị đẩy giãn ra theo thời gian thực rồi bật lò xo về vị trí.

Tương tácremotion16:94.05sApache-2.0