Day 13 - Animate UI Cursor

前言

#

此 Cursor 非比 Cursor Editor ，而是游標滑鼠的 Cursor。 今天來介紹 Animate UI 中的滑鼠游標，它可以自訂游標與跟隨元素，並具備流暢動畫的游標元件，如果對客製化使用者在滑鼠進入網頁後的效果有興趣的，讓我們接下來跟著一步一步製作。

Cursor

#

1. 使用 Shadcn CLI 加入 Cursor

   npx shadcn@latest add @animate-ui/components-animate-cursor
   

2. Import 元件並將元件放在想要的位置上

   import {
       Cursor,
       CursorFollow,
       CursorProvider,
       type CursorFollowProps,
   } from '@/components/animate-ui/components/animate/cursor';
   

   <CursorProvider>
       <Cursor />
       <CursorFollow>有勞贖 🐭</CursorFollow>
   </CursorProvider>
   

   呈現的結果會如 Demo 示意圖一樣，只在特定的 <div> 區塊顯示客製化滑鼠游標。若想要呈現全域佈局都可以使用，可以在 <CursorProvider> 加上 global。

   <CursorProvider global>
       <Cursor />
       <CursorFollow>
           有勞贖 🐭
       </CursorFollow>
   </CursorProvider>
   

   或是想要寫的更清楚，兩種寫法都支援。

   <CursorProvider global={true}>
       <Cursor />
       <CursorFollow>
           有勞贖 🐭
       </CursorFollow>
   </CursorProvider>
   

   最終呈現的結果會像是

   

小結

#

今天的文章中，我們深入探索 Animate UI Cursor 的使用方式，並學習如何讓元件與使用者游標產生互動，帶來更具動態感的體驗。接下來在明天的內容中，我們將介紹 Shadcn UI Context Menu 元件，並示範如何與 Animate UI Cursor 搭配。透過游標觸發互動式選單，讓你的網頁不僅更直覺，也能展現獨特的操作體驗。

Reference

#

• Animate UI Docs