Cursor Animation

รวม cursor effect patterns — follower, spotlight, trail ใช้ Framer Motion + CSS รองรับ custom icon และ element

Cursor Follower

วงกลมที่ลอยตาม mouse ด้วย spring animation — รองรับ children สำหรับใส่ icon หรือ custom element

Move your mouse here

Cursor Follower — Usage

containerRef — track mouse ภายใน element ที่กำหนด
children — ใส่ icon/emoji แทน dot ได้
springConfig — ปรับความเร็ว/lag ของ follower

Cursor Spotlight

Overlay มืดที่เปิดเผยเนื้อหาด้วยวงแสง radial-gradient ตรงตำแหน่ง mouse

Card 1

Card 2

Card 3

Card 4

Card 5

Card 6

Hover to reveal

Cursor Spotlight — Usage

radius — ขนาดวงแสง (default 120px)
overlayOpacity — ความเข้มของพื้นหลังมืด (0-1)
ใช้ requestAnimationFrame throttle อัตโนมั��ิ

Cursor Trail

จุดหลายจุดตาม mouse path แล้ว fade out — รองรับ custom renderDot สำหรับเปลี่ยนเป็น icon/emoji

Move your mouse to see trail

Cursor Trail — Usage

renderDot — เปลี่ยน dot เป็น icon/emoji/custom element
throttleMs — ควบคุมความถี่ (default 30ms)
lifetime — อายุแต่ละ dot ก่อน fade out (default 500ms)
Cleanup ด้วย timeoutsRef ป้องกัน memory leak

Neon Cursor

Multi-layer circles + orbiting dots ตาม mouse — ใช้ useMotionValue + useSpring (0 React re-renders) + event delegation + CSS orbit animation — ใช้จริงในหน้านี้

Neon Cursor — Component (NeonCursor)

ลอง effect ได้เลย — neon cursor ทำงานทั้งหน้านี้

Neon Cursor — Setup & Tokens

สีเปลี่ยนได้ที่ globals.css — cursor tokens (auto dark/light)
data-cursor-zone — ซ่อน neon ใน preview boxes
PageNeonCursor — ครอบ page content ใน Server Component ได้