Hyperspeed
超空間曲速旅行的隧道動畫，星芒從消失點噴射並帶殘影拖尾。
以 canvas 2D 模擬星際躍遷：數百顆星芒從消失點朝外加速噴射，配合殘影拖尾與 lighter 疊加，重現超空間曲速旅行的隧道感。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
320
1
1
0.5
0.5
<Hyperspeed />
安裝
npx shadcn@latest add https://webberui.com/r/hyperspeed.json或在 components.json 設定 registries 後，改用 @webberui/hyperspeed 安裝。
安裝依賴後，從 registry JSON（/r/hyperspeed.json 的 files[0].content）複製 hyperspeed.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { Hyperspeed } from "@/components/ui/hyperspeed";
<Hyperspeed speed={1.2} starCount={340} className="h-[360px] w-full rounded-xl" />元件自身不撐高度，請用 className 或包裹容器給定明確尺寸（例如 h-[360px]）。前景內容可用絕對定位疊在上方。
Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
starCount | number | 320 | 星星數量，密度越高越壯觀也越吃效能 |
speed | number | 1 | 曲速強度，約 0.2 慢速巡航到 3 極速躍遷 |
trailLength | number | 1 | 拖尾長度倍率，越大線條越長 |
colors | string[] | 冷色系躍遷光 | 星芒配色，隨機分配到各星 |
background | string | "#05060f" | 隧道底色 |
originX | number | 0.5 | 消失點水平位置（0~1） |
originY | number | 0.5 | 消失點垂直位置（0~1） |
className | string | — | 透傳到最外層容器 |
可及性
- 使用者系統開啟「減少動態效果」時，畫一張定格的曲速圖後即停止動畫
- canvas 標記
aria-hidden，屬純裝飾層，不干擾輔助科技朗讀前景內容