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

Ba từ tiếp sức bằng hình học

Ba từ tiếp sức bằng hình học

Ba từ lợi ích mỗi từ mang riêng một bộ hình học tiếp sức — vòng tròn nét đứt tự xoay thu nhỏ → ba vòng tròn nét liền mọc lên lần lượt → ánh kim sheen quét qua rồi thu về trắng thuần; mỗi từ mới viền nét rồi tô đầy.

Chữ & title cardremotion16:96.5sApache-2.0
Tiếp sức từ với cuộn phim trang

Tiếp sức từ với cuộn phim trang

Cột trái các thẻ trang đen trắng cuộn theo bước, bên phải từ lớn chữ serif tiếp sức tại chỗ (danh từ cố định + động từ luân phiên) — chỉ khi đổi từ mới cuộn một bước, khớp chính xác điểm giữa thẻ trang hiện tại.

Chữ & title cardremotion16:95.06sApache-2.0
Cuộn từ dọc theo nhịp

Cuộn từ dọc theo nhịp

Từ cuối câu đổi trên cuộn dọc, 3 lần đổi từ mỗi lần 0.55s, nhanh trước chậm sau kèm hơi overshoot; các dòng lân cận nhòe dọc và xám dần theo khoảng cách, từ ở giữa vừa đậu liền nhuộm từ xám sang màu nhấn.

Chữ & title cardremotion16:95.5sApache-2.0
Hai cách tiết lộ code song song

Hai cách tiết lộ code song song

Cùng một khối code tô cú pháp được tiết lộ hai cách song song — trái: stagger cấp dòng mờ vào nổi lên 8px, phải: gõ từng ký tự nhưng giữ nguyên màu token gốc, con trỏ vuông #3a4468 đệm dưới ký tự hiện tại.

Chữ & title cardremotion16:95.1sApache-2.0
Chữ tập hợp: bốn kiểu

Chữ tập hợp: bốn kiểu

Bốn kiểu tập hợp chữ — split-text-stagger chữ dâng lên vào vị trí, drift-assembly chữ trôi tụ lại, tracking-expand giãn khoảng cách kiểu hơi thở, text-on-path chảy vào theo đường cong.

Chữ & title cardremotion16:94.39sApache-2.0
Máy đánh chữ: hai tâm trạng

Máy đánh chữ: hai tâm trạng

Hai kiểu máy đánh chữ — terminal-typewriter gõ lệnh xong kích nổ đổi cảnh, và error-retype xóa gõ lại thành vở kịch ba hồi "đổi ý".

Chữ & title cardremotion16:94.89sApache-2.0
Chữ đồng bộ theo âm thanh

Chữ đồng bộ theo âm thanh

Hai kiểu đồng bộ chữ theo âm thanh — font-weight-pump nét chữ đập đậm theo nhịp rồi bật lại, và karaoke-fill-sync từng chữ tô sáng theo lời bình.

Chữ & title cardremotion16:94.72sApache-2.0
Giải mã ký tự lỗi và rơi vật lý

Giải mã ký tự lỗi và rơi vật lý

Hai kiểu mở đầu tiêu đề — scramble-decode (đáp án mọc ra từ nhiễu) và letter-drop-physics (chữ rơi theo trọng lực, nảy, đứng vào vị trí), chọn theo tông giọng.

Chữ & title cardremotion16:94.39sApache-2.0
Tiêu đề giáng cấp thành nhãn mục

Tiêu đề giáng cấp thành nhãn mục

Tiêu đề giáng cấp thành nhãn mục, hai kiểu — A: tiêu đề lớn giữa màn hiện lên đứng một nhịp rồi thu nhỏ 0.3x trượt lên góc trên-trái thành nhãn tiểu mục, nội dung mọc lên bên dưới; B: cùng thủ pháp nhưng kèm khối tô sáng kiểu bôi đen văn bản quét vào rồi rút đi.

Chữ & title cardremotion16:96.59sApache-2.0
Hai từ đối đầu rồi khớp lại

Hai từ đối đầu rồi khớp lại

Hai từ đối đầu rồi khớp — trái "NEW" phải từ đặc tính đóng cứng ở lề màn hình đều nhau, cắt cứng luân phiên không co lại, tới từ cuối mới một lần duy nhất ease-in-out trượt vào giữa khớp thành cụm từ, chữ nhỏ bên dưới hiện gần như cắt cứng.

Chữ & title cardremotion16:96.72sApache-2.0
Tiêu đề bảng lật kiểu sân bay

Tiêu đề bảng lật kiểu sân bay

Tiêu đề bảng lật sân bay — mỗi ký tự có hai nửa ô cơ khí lật qua, đảo qua 2 khung mã lỗi rồi lách cách dừng đúng chữ đích, lan từ trái sang phải thành sóng.

Chữ & title cardremotion16:94.72sApache-2.0
Giải mã ký tự xáo trộn

Giải mã ký tự xáo trộn

Một dòng ký tự chữ đều nhảy loạn mã tốc độ cao, rồi khóa thành chữ thật lần lượt từ trái sang phải kèm lóe sáng xanh-trắng.

Chữ & title cardremotion16:93.7sApache-2.0
Xoay vòng nhãn trong câu

Xoay vòng nhãn trong câu

Thân câu cố định đứng yên, nhãn pill cuối câu cuộn slot đổi từ khoảng ~0.7s một lần cho đến khi câu hoàn chỉnh.

Chữ & title cardremotion16:95.89sApache-2.0
Viên chip cuộn slot

Viên chip cuộn slot

Trong câu "Your `chip` Handled" nền trắng, từ trong viên nang đậm cuộn như slot máy xèng, viên nang co giãn khớp bề rộng chữ.

Chữ & title cardremotion16:95.5sApache-2.0
Thẻ tiêu đề giấy

Thẻ tiêu đề giấy

Một câu in ép từng chữ lên giấy, một từ được đánh dấu nghiêng màu nhấn, khép lại bằng một gạch ngắn.

Chữ & title cardremotion16:91.83sApache-2.0
Chữ rỗng lấp đầy

Chữ rỗng lấp đầy

Chữ viền rỗng thu nhanh từ 3.2 lần về vị trí, vòng tròn nét đứt và đường dẫn khép lại, rồi viền lấp đặc trắng tức thì.

Chữ & title cardremotion16:93sApache-2.0
Gạch chân bút marker cho tiêu đề

Gạch chân bút marker cho tiêu đề

Sau khi tiêu đề đã định hình, một nét gạch chân bút marker vẽ nhanh từ trái sang phải bên dưới một từ khóa — nét bút rộng dần, mép nham nhở, hơi nghiêng lên bám sát chân chữ.

Chữ & title cardremotion16:93.39sApache-2.0
Từ dẫn phóng to rồi ráp câu

Từ dẫn phóng to rồi ráp câu

Từ dẫn chiếm giữa khung hình ở cỡ chữ 2.3 lần, tiếp tục đẩy gần trong lúc giữ hình, rồi thu về cỡ chữ cuối trong khi cả dòng trượt trái vào đúng vị trí, các từ còn lại được đẩy vào từ đúng chỗ của chúng.

Chữ & title cardremotion16:92.8sApache-2.0
Từ khóa quét gradient nạp năng lượng

Từ khóa quét gradient nạp năng lượng

Trong khẩu hiệu nền đen, ánh sáng gradient quét nhanh trái sang phải "nạp năng lượng" cho một từ khóa — sáng nhất ở làn sóng đầu, tắt dần phía sau, rồi giữ trạng thái phát sáng thở đều kèm tia sét.

Chữ & title cardremotion16:93.71sApache-2.0
Vòng lặp trạng thái nhiễu glitch

Vòng lặp trạng thái nhiễu glitch

Cùng một khe chữ lần lượt phát 4 cụm trạng thái, mỗi cụm nhiễu loạn ở đầu-đuôi, giữa đoạn thỉnh thoảng rung một chữ, lúc chuyển chồng tách kênh RGB và dịch cả dòng; cụm cuối kết thúc sạch.

Chữ & title cardremotion16:96.1sApache-2.0