v1.2.1

@hwagfu/cursor

Hiệu ứng con trỏ animate: vòng theo chuột, chấm giữa và vệt hạt pastel.

Component React tạo hiệu ứng con trỏ mượt mà với vòng tròn bám theo chuột kiểu spring, một chấm ở giữa và vệt hạt pastel phía sau. Tùy biến sâu qua props, tự ẩn trên mobile và không chặn thao tác click.

Playground

Chỉnh các thông số bên phải để xem component thay đổi trực tiếp.

Bật công tắc “enabled” để kích hoạt hiệu ứng con trỏ · Turn on “enabled” to activate.

enabled

ringSize42pxringHoverSize65pxdotSize10pxparticleLifetime900ms

ringColor

dotColor

particleColor

Cài đặt

bash

npm install @hwagfu/cursor motion

tsx

import { CursorEffect } from "@hwagfu/cursor";

Tính năng

Vòng tròn bám chuột kiểu spring kèm chấm ở giữa.
Vệt hạt pastel tùy biến màu, số lượng và vòng đời.
Tự động ẩn trên thiết bị cảm ứng / mobile.
Dùng position: fixed + pointer-events: none nên không chặn click.
Cài nhanh qua shadcn registry.

Cách dùng

Dùng cơ bản

tsx

import { CursorEffect } from "@hwagfu/cursor";

export default function App() {
  return (
    <>
      <CursorEffect />
      <main>Your app</main>
    </>
  );
}

Tùy biến

tsx

<CursorEffect
  colors={["#fda4af", "#fdba74", "#86efac", "#93c5fd"]}
  particleLifetime={900}
  maxParticles={24}
  ringSize={36}
  ringHoverSize={56}
  ringColor="#cbd5e1"
  ringHoverColor="#0f172a"
  dotColor="#0f172a"
  interactiveSelector="a, button, [data-cursor]"
/>

Cài qua shadcn

bash

# Từ GitHub repo công khai có registry.json ở gốc
npx shadcn@latest add <owner>/<repo>/cursor

import { CursorEffect } from "@/components/ui/cursor";

Thuộc tính (Props)

Tên	Kiểu	Mặc định	Mô tả
colors	string[]	pastel palette	Màu dùng cho vệt hạt theo sau con trỏ.
particleLifetime	number	1000	Thời gian tồn tại của mỗi hạt (ms).
particleSpawnChance	number	0.6	Xác suất sinh hạt mỗi lần di chuột (0–1).
maxParticles	number	40	Số hạt tối đa hiển thị cùng lúc.
particleSize	number	8	Kích thước mỗi hạt (px).
ringSize	number	42	Kích thước vòng ngoài mặc định (px).
ringHoverSize	number	65	Kích thước vòng khi hover phần tử tương tác.
dotSize	number	10	Kích thước chấm ở giữa (px).
ringColor	string	"#D3D3D3"	Màu viền vòng ngoài mặc định.
ringGlow	string	"none"	box-shadow CSS để tạo glow cho vòng.
ringHoverColor	string	"#000000"	Màu viền vòng khi hover.
dotColor	string	"rgba(75,85,99,0.6)"	Màu chấm ở giữa.
zIndex	number	99999	Thứ tự xếp lớp của hiệu ứng.
interactiveSelector	string	"a,button,[role=button],..."	Selector các phần tử kích hoạt trạng thái hover.

Lưu ý

Component tự động return null trên thiết bị cảm ứng / mobile.
Giao diện dùng position: fixed và pointer-events: none nên không chặn click.