用 Rive 做互動吉祥物 Hero
本機落地頁 Hero，由游標與點擊輸入驅動 Rive 吉祥物。
第一個成果
吉祥物在瀏覽器中跟著游標移動，並對點擊作出反應。
適合對象
學習 Rive 的設計師
需要
Claude Code, Rive Community 吉祥物, 瀏覽器
範例成果
吉祥物在瀏覽器中跟著游標移動，並對點擊作出反應。
本機落地頁 Hero，由游標與點擊輸入驅動 Rive 吉祥物。
Rive
Hero
吉祥物
點擊
游標驅動的 Hero
吉祥物讓 Hero 區塊活起來。
數字輸入把游標位置對應到 look-at 數值讓吉祥物追蹤使用者，trigger 則負責點擊時的友善回應。
Look at X
Look at Y
點擊 trigger
01
游標追蹤
mousemove 與 touchmove 用輕微的緩動更新兩個數字輸入。
02
Hero 文案
小標題、標題、副標與 CTA 與吉祥物 canvas 共用版面。