Cube: Thư viện animation JavaScript 'không núm vặn' với bốn chuyển động cố định

Trong thế giới thư viện animation JavaScript, các công cụ như GSAP hay Motion luôn cố gắng mang đến cho lập trình viên càng nhiều tùy chọn càng tốt. Cube đi theo hướng ngược lại: chỉ có bốn chuyển động, và mỗi chuyển động đã được đặt sẵn thông số tối ưu cho công việc của nó.

Bốn chuyển động, không có tùy chọn tinh chỉnh

Cube cung cấp đúng bốn hàm: rise (xuất hiện), leave (biến mất), morph (biến đổi trạng thái) và reveal (hiện ra khi cuộn tới). Mỗi hàm đi kèm sẵn thời lượng, đường cong và độ trễ so le được chọn riêng cho từng nhiệm vụ cụ thể.

• rise: thay đổi độ mờ kèm dịch chuyển lên 12px, các phần tử anh em xuất hiện so le nhau
• leave: thay đổi độ mờ kèm dịch chuyển xuống 12px, giữ nguyên trạng thái cuối cho đến khi bạn xóa phần tử khỏi DOM — về cơ bản là một nửa của rise
• morph: chuyển từ trạng thái này sang trạng thái khác, giữ lại các ký tự đầu chung và làm mờ phần còn lại, còn biểu tượng thì chuyển mờ chéo như cả một khuôn mặt
• reveal: ẩn phần tử cho đến khi nó lọt vào khung nhìn rồi mới nâng lên một lần

Triết lý "số cụ thể, không phải tùy chọn"

Điểm khác biệt cốt lõi của Cube nằm ở bảng thông số cố định:

• rise: 640ms
• leave: 320ms
• morph: 220ms
• lead: 130ms

Thời lượng, đường cong và khoảng cách đều cố định theo từng nhiệm vụ. Chỉ có stagger (độ so le) và delay (độ trễ) là cho phép điều chỉnh — và chúng chỉ quyết định thời điểm chuyển động bắt đầu.

Cube bao phủ bốn tình huống: xuất hiện, biến mất, thay đổi trạng thái và hiện ra khi cuộn. Hãy dùng công cụ khác khi bạn cần timeline, cử chỉ hoặc layout animation.

Cách dùng

Cài đặt qua npm:

npm i cube-motion

Cách dùng API JavaScript thuần:

import { rise, leave, morph, reveal } from "cube-motion";

rise(".hero", { targets: "children" }); // xuất hiện so le
leave(toast);                           // biến mất, giữ trạng thái cuối
morph(oldIcon, newIcon);                // chuyển từ trạng thái này sang trạng thái khác
reveal(".card");                        // nâng lên khi cuộn tới

Với React, Vue, Solid và Svelte, Cube cung cấp adapter riêng với các component như Rise, Morph, Reveal:

import { Rise, Morph, Reveal } from "cube-motion/react";

Nền tảng bên dưới

Cube chạy trên Web Animations API và IntersectionObserver. Điều này có nghĩa là không cần polyfill, không có vòng lặp frame thủ công, và không có gì phải "chiến đấu" với trình duyệt. Phần lõi có không phụ thuộc runtime; React, Vue, Solid và Svelte chỉ là các peer dependency tùy chọn cho adapter tương ứng.

Vì sao không có núm vặn?

Đây là điểm gây tranh luận nhất của Cube. Tác giả lập luận rằng các thư viện như Motion hay GSAP cho bạn mọi tùy chọn — còn Cube đưa ra bốn quyết định đã được chốt sẵn. Khi cần timeline, cử chỉ hoặc layout animation, bạn nên tìm công cụ khác.

Một chi tiết đáng chú ý: Cube đã loại bỏ hàm xử lý phản hồi khi nhấn (press feedback) trong các phiên bản trước. Lý do là hiệu ứng này chỉ cần ba dòng CSS — một transition trên scale và :active { scale: 0.97 }. CSS còn xử lý được cả kích hoạt bằng bàn phím, điều mà một listener chuột không bao giờ làm được. Vị trí đó được nhường lại cho leave.

Lưu ý thêm: Cube dùng đường cong cubic-bezier cố định, không có bộ giải lò xo (spring solver), nên không có tùy chọn spring.

Khả năng tiếp cận với người dùng giảm chuyển động

Khi người dùng bật tùy chọn reduced motion trong hệ điều hành hoặc trình duyệt, Cube xử lý khá hợp lý:

• Thay đổi độ mờ vẫn được giữ nguyên
• Dịch chuyển, scale và blur bị loại bỏ
• rise và leave chuyển thành hiệu ứng mờ dần
• morph chuyển thành chuyển mờ chéo
• reveal áp dụng tùy chọn giảm chuyển động khi phần tử lọt vào khung nhìn

Đây là điểm cộng đáng kể, bởi khả năng tiếp cận thường bị bỏ qua trong các thư viện animation.

Góc nhìn cho lập trình viên Việt Nam

Với các dự án web có thời gian phát triển ngắn — landing page, dashboard nội bộ hay ứng dụng SaaS nhỏ — Cube là lựa chọn đáng cân nhắc vì bạn không cần dành thời gian tinh chỉnh từng thông số animation. Việc không có phụ thuộc runtime cũng giúp bundle size gọn nhẹ, phù hợp với điều kiện mạng di động còn hạn chế ở nhiều khu vực.

Tuy nhiên, nếu sản phẩm của bạn cần animation phức tạp, có tính tương tác cao hoặc đồng bộ với cử chỉ người dùng, Cube sẽ nhanh chóng trở thành giới hạn. Hãy xem nó như một công cụ chuyên biệt cho những chuyển động cơ bản, chứ không phải giải pháp thay thế toàn diện cho GSAP hay Motion.