互動編排元件
拖曳排序、可調整面板、多步驟流程、手勢、共享元素轉場。這一類處理的是「多個元素之間的協調」,比單一元件的動畫難得多。
共 21 個,其中 17 個免費、不需登入即可安裝。
增刪編排列表:完整 CRUD 列表編排系統:新增時先撐開間隙再讓項目落入、刪除時鄰項合攏補位、排序以 FLIP 連續移動、批次操作以級聯波次執行,並附 undo 幽靈項。
濾鏡組合列:Linear 式的過濾器組合列,新加入的條件以膠囊 chip 彈入排列,chip 內欄位可原地展開編輯,移除時周圍 chip 以 FLIP 補位收攏。
套索多選舞台:在任意網格上拖出選取框,框到的項目依序浮起亮邊,放開後選取計數徽章聚合變形為浮動批次操作列,取消時操作列散回各項目。
焦點退場舞台:頁面級焦點系統:任一區域進入編輯或聚焦模式時,其餘版面整體向後退場——縮小、調暗、模糊成景深背景——Esc 或點擊外部時彈簧回彈歸位。
漫遊選取高亮系統:單一共享的變形高亮面可跨容器在頁面任何註冊元素間旅行——從 tabs 滑到側欄再到網格卡片——並內建 roving tabindex 鍵盤導航與焦點環同步。
跨欄轉運看板:多欄狀態版面(任務看板式),卡片因程式狀態改變(而非拖曳)沿弧線飛越欄位:目標欄先撐開落點、原欄鄰卡合攏、飛行卡帶投影抬升。
導覽聚焦流程:產品導覽 overlay 以 SVG 遮罩在目標元素之間 morph 移動聚焦框,說明卡片沿最佳方位錨定並隨步進飛行跟隨,支援捲動追蹤目標位置。
標籤像實體一樣掉落堆疊、可抓起拋擲,2D 物理模擬
冰箱磁鐵字卡可自由拖曳排列組句,微旋轉與吸附感
長按拖曳重排的清單,其他項目讓位流動,附把手
軟木板上的彩色便利貼:拖曳、新增、揉掉刪除
監聽按鍵序列觸發彩蛋效果的隱藏互動,附進度提示
多層元素隨滑鼠位移形成景深,附陀螺儀後備
像手中持牌般扇形展開的卡片組:滑過抽起、鄰卡讓位,往上拖曳或快甩即出牌飛到牌堆,卡面可放任意內容。
背單字式的字卡組:點擊或空白鍵翻面、左右拖曳或方向鍵分成「會/不會」,底部進度,結束顯示統計並可重來。
AI 工作流式的節點接線畫布:節點可自由拖曳、埠與埠之間以貝茲曲線相連、從埠拖出新連線、執行時沿線流動光點,支援平移縮放。
可直接拖曳把手調整方塊的圓角、陰影與內距,並即時顯示數值讀數與對應 CSS,適合文件站示範設計 token。
翻動一個總開關,下方網格中的各個子開關依與總開關的距離依序跟著亮起或關閉,像漣漪擴散,也能單獨切換子開關。
管理者翻動一個開關,SVG 線路從開關沿路描繪到成員網格,成員頭像依波次逐列解鎖亮起,直觀呈現「一次授權給所有人」。
一疊待回應的卡片,按數字鍵 1、2、3 直接選擇答案,卡片帶著選項方向飛走、下一張補位,鍵盤優先、滑鼠也能點。
散落的文件卡片依分類飛進對應的資料夾,資料夾開口張合並累加數量,可自動整理也可手動拖曳歸檔。