Chuyện là mình đang tìm 1 thư viện hay mã nguồn mở để custom con trỏ chuột (cursor) cho website cá nhân của mình. Tình cờ tìm được 1 mã nguồn mở là Cursify để custom cursor, sau 1 thời gian ngắn trải nghiệm, mình thấy khá ưng nên viết bài này để chia sẻ cho mọi người nếu có nhu cầu sử dụng.
🚀 Cursify là gì?
Cursify là một repo mã nguồn mở được xây dựng bởi React, TypeScrips, Tailwind, Framer motion… giúp bạn tạo ra hiệu ứng con trỏ chuột hoạt ảnh tùy chỉnh một cách đơn giản, nhẹ nhàng nhưng cực kỳ bắt mắt. Với mã nguồn mở, thư viện này không chỉ miễn phí mà còn dễ dàng tích hợp và chỉnh sửa theo nhu cầu riêng của bạn.
👉 Bạn có thể trải nghiệm trực tiếp tại đây: Cursify
🛠️ Công nghệ được sử dụng
Cursify không chỉ đẹp mà còn được xây dựng trên nền tảng những công nghệ hiện đại trong lập trình frontend:
React – Framework phổ biến để xây dựng giao diện động.
TypeScript – Ngôn ngữ mạnh mẽ giúp tăng tính ổn định và dễ bảo trì.
Tailwind CSS – Framework CSS utility-first giúp style hóa nhanh chóng.
Framer Motion – Thư viện hoạt ảnh mượt mà, cực dễ tích hợp vào React.
Sự kết hợp này giúp Cursify không chỉ gọn nhẹ mà còn cực kỳ linh hoạt, dễ dùng và dễ custom.
✨ Những tính năng nổi bật của Cursify
🔁 Hoạt ảnh mượt mà: Hiệu ứng chuyển động mềm mại nhờ Framer Motion.
🎨 Tùy chỉnh linh hoạt: Dễ dàng thay đổi màu sắc, hình dạng và hiệu ứng.
🧠 Viết bằng TypeScript: Giúp giảm lỗi và cải thiện trải nghiệm lập trình.
💡 Thiết kế tối giản: Phù hợp với hầu hết phong cách UI hiện đại.
⚡ Hiệu suất cao: Không làm chậm website của bạn (cái này thì tuỳ nha, mấy trình duyệt khác mình thấy nhanh, tuy nhiên sử dụng Google Chrome lại khá giật từ 1 số custom cursor).
📦 Cách cài đặt và sử dụng
Bạn có thể thêm Cursify vào dự án React của mình chỉ với vài bước đơn giản:
Bước 1: Cài đặt thư viện framer-motion và tailwind
Một số custom cursor cần sử dụng thư viện framer-motion thế nên mình cần cài nó.
npm install framer-motion clsx tailwind-merge
Hoặc nếu bạn dùng Yarn:
yarn add framer-motion clsx tailwind-merge
Tương tự cho pnpm và bun.
Bước 2: Tạo file utils.ts
// lib/utils.ts
import { type ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
Bước 3: Custom cursor
Truy cập Cursify để copy custom cursor mình cần, tạo hook và import là có thể sử dụng.
📹 Demo
📸 Một số ví dụ sử dụng Cursify
Portfolio cá nhân
Website agency sáng tạo
Landing page sản phẩm
Blog cá nhân hiện đại
🔗 Tài nguyên hữu ích
🧠 Tìm hiểu thêm về Framer Motion
🎯 Kết lại
Nếu bạn đang muốn tạo một trải nghiệm người dùng hiện đại, bắt mắt mà không muốn mất quá nhiều công sức, thì Cursify chính là công cụ bạn nên thử ngay. Dễ cài, dễ dùng, lại còn đẹp – đúng kiểu “chân ái” cho lập trình viên front-end.
Hãy thử tích hợp Cursify vào dự án tiếp theo của bạn và cảm nhận sự khác biệt nha! 😎