深空任務控制台,以單一 HTML 檔展示 Motion(motion.dev) 的完整能力: spring 物理、scroll 連動、gesture 手勢、view transition、SVG 路徑動畫與獨立 transform。 全部零 build、直接從 CDN 載入。
Motion 的 spring 引擎以 stiffness / damping 描述動態。
點擊任一卡片重播:同樣的目標值,不同的參數,完全不同的手感。
inView 偵測元素進入視口,stagger 讓子元素依序起動。
離開再回來可以重播。
往下捲動:這段沒有 JS 逐幀計算。scroll() 把動畫綁到捲動進度,
支援的瀏覽器直接走 ScrollTimeline 硬體加速,捲多快就動多快。
左:指標追蹤 + spring 平滑,太空船「漂」向游標而非瞬移。
右:press() 偵測按下,自帶鍵盤支援(聚焦後按 Enter)與多點過濾。
點擊篩選:DOM 直接重排,animateView 基於瀏覽器 View Transition API,
讓每張卡片從舊位置滑到新位置。.add() 自動處理共享元素匹配。
animate 直接驅動 SVG 的 stroke-dashoffset,
也能動 JS 物件數值。進入視窗時:轉移軌跡自動繪製,遙測數字計數上升。