Gắn mascot tương tác kiểu thập niên 90 lên website của bạn

Bây giờ bạn đã có thể gắn một mascot phong cách thập niên 90 lên website: biết nhìn theo con trỏ chuột và chớp mắt khi bấm vào.

Lập trình viên Kamran Ahmed vừa ra mắt page-mascot, một web component mã nguồn mở đạt 728 GitHub star trong tuần này. Nhân vật này hoạt động nhờ hai ảnh sprite sheet 3×3: một tấm quay đầu theo 9 hướng dựa trên góc của con trỏ, tấm còn lại đổi biểu cảm trong nửa giây khi bạn click vào.

Vì sao lại hay: Nó mang hoài niệm trở lại mà không làm hỏng trải nghiệm người dùng. Việc theo dõi con trỏ sẽ tự tắt trên màn hình cảm ứng, còn hiệu ứng click thì tuân thủ đúng cài đặt prefers-reduced-motion. Bạn có thể dùng các nhân vật có sẵn hoặc dùng AI skill đi kèm để tạo mascot riêng theo 6 phong cách đồ họa, gồm pixel, riso và mực vẽ.

Tóm gọn cách dùng: chạy npm i page-mascot, tải sprite sheet của nhân vật từ trang demo, rồi truyền đường dẫn vào hai prop directions và reactions.

BonziBuddy hẳn sẽ tự hào lắm.