Checkbox Check Draw (核取方塊打勾)

圓圈和勾號自行畫出，確認操作已成功。

在[套用位置]加入「成功打勾」(Success Checkmark) 動畫，也叫 animated success tick。
先用一筆流暢的線條畫出圓圈，接著在圓圈內畫出勾號，整個圖示再輕輕彈一下：沉穩、篤定。
操作成功時只播放一次，搭配螢幕閱讀器能唸出的文字訊息；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接顯示畫好的圖示。

透過替虛線偏移加上動畫，讓 SVG 描邊看起來沿著路徑被畫出來。

在[套用位置]加入「線條繪製」(Line Drawing) 動畫，也叫路徑繪製 (path drawing) 或自繪 SVG (self-drawing SVG)。
每條描邊看起來沿著路徑從起點到終點流暢地自己畫出來，第二條描邊（例如勾號）緊接在第一條之後。
進入畫面時只播放一次，不要循環；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接顯示畫好的線條。

圓形滑塊沿軌道滑動，軌道顏色在關和開之間切換。

在[套用位置]加入「切換開關」(Toggle Switch) 動畫，也叫 switch。
開啟或關閉時，圓形滑塊平順地滑到軌道另一端，同時軌道顏色跟著改變：快速、俐落，不要彈跳。
做成真正符合無障礙的開關 (帶有 checked 狀態的 role="switch")，並且支援鍵盤操作。

長任務推進時，步驟清單逐項醒目標示或打勾。

在[套用位置]加入「多步驟載入」(Multi-Step Loader)，也叫 step loader 或 checklist loader。
步驟由上而下逐一亮起，每完成一步就彈出一個小勾勾，節奏平穩、方便閱讀。
依照任務的實際進度推進步驟，而不是用固定計時器，並向螢幕閱讀器播報每個已完成的步驟。

彩色紙片噴發而出再飄落下來，用來慶祝成功。

在[套用位置]加入「彩紙噴發」(Confetti) 慶祝效果，也叫彩紙爆發 (confetti burst)。
彩色小紙片從按鈕中快速噴發出來，接著翻滾著飄落並逐漸淡出，形成一陣短促而熱鬧的紙片雨。
每次成功只觸發一次，不要循環，不要擋住頁面上的點擊；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就不要播放。

複製圖示變成勾號，標籤短暫顯示「已複製」。

在[套用位置]加入「複製回饋」(Copy-to-Clipboard Feedback) 動畫，也叫已複製狀態 (copied state) 或複製圖示變勾號 (copy icon to checkmark)。
按下複製按鈕時，複製圖示快速縮小消失，同時畫出一個勾號，標籤變為「已複製」，片刻之後一切平順地恢復原狀。
切換過程中保持按鈕尺寸不變，不讓任何東西位移，並把已複製狀態告知螢幕閱讀器。

拖曳時元素跟著游標移動，並可以限制在某個區域或某條軸上。

在[套用位置]加入「拖曳」(Drag) 互動，也叫可拖曳 (draggable) 或拖曳限制 (drag constraints)。
拖曳時元素直接跟著游標，在允許區域的邊緣停住，放開後帶一點回彈地彈回靜止位置。
觸控和滑鼠都要能用，拖曳時下方的頁面不能跟著捲動，並提供用鍵盤移動它的方式。