背景
絲帶背景
以 Canvas 2D 繪製的絲綢緞帶背景：數條貝茲曲線帶在深色底緩慢擺動流動，沿法線的漸層模擬邊緣光澤，不使用 WebGL。
適合發表會頁首、活動主視覺、品牌形象區塊的背景：3–6 條絲綢緞帶在深色底上緩慢擺動，每條沿寬度方向以漸層模擬「邊緣暗、偏側一道高光、中央本色」的緞面光澤，扭轉變窄處高光更亮；緞帶之間以 screen 疊加，交疊處自然發亮。全程以 Canvas 2D 繪製，不使用 WebGL。
把這個效果裝進你的專案
在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。
npx webberui@latest add "https://webberui.com/r/silk-ribbons-background.json?t=<安裝 token>"Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
4
1
0.7
7
編輯中的呼叫預設屬性
<SilkRibbonsBackground/>
完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。
安裝
npx webberui@latest add "https://webberui.com/r/silk-ribbons-background.json?t=<安裝 token>"或在 components.json 設定 registries 後，改用 @webberui/silk-ribbons-background 安裝。
使用
import { SilkRibbonsBackground } from "@/components/ui/silk-ribbons-background";
<SilkRibbonsBackground
count={4}
color={["#1e3a8a", "#4f46e5", "#0ea5e9", "#8b5cf6"]}
className="flex h-[420px] items-center justify-center"
>
<h1 className="text-4xl font-bold text-white">讓每一次發表都有質感</h1>
</SilkRibbonsBackground>只給一個色碼時會自動衍生相近色階：
<SilkRibbonsBackground color="#e11d48" background="#1a0509" className="h-[360px]" />整站統一節奏與底色可用 CSS 變數覆寫：
:root {
--wb-silk-speed: 0.6; /* 與 speed prop 相乘 */
--wb-silk-bg: #05060a; /* 未傳 background 時的底色 */
}Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
count | number | 4 | 緞帶數量，限制在 3–6 |
speed | number | 1 | 流動速度倍率，再乘上 --wb-silk-speed |
color | string | string[] | ['#3b82f6','#6366f1','#0ea5e9','#8b5cf6'] | 單一色碼自動衍生相近色階；陣列時每條一色、依序循環 |
sheen | number | 0.7 | 光澤強度（0–1），控制白色高光的亮度 |
seed | number | 7 | 亂數種子，決定緞帶位置、寬度與擺動節奏 |
background | string | var(--wb-silk-bg, #05060a) | 容器背景色 |
children | ReactNode | — | 疊在緞帶之上的前景內容 |
canvasClassName | string | — | 套用在 canvas 上的 class |
className | string | — | 容器樣式（佈局、高度、圓角等） |
細節
- 每條緞帶的中心線是 6 個控制點的 Catmull-Rom 曲線，控制點 y 以兩組不同頻率的 sin 疊加擺動，完整週期約 12–20 秒；所有參數由
seed確定性產生，同一個 seed 每次畫面相同。 - 沿中心線取 120 個取樣點，依法線方向展開成分段四邊形，每段填一道沿寬度方向的線性漸層：邊緣為本色 20% 亮度、0.35 處白色高光（強度 0.5 ×
sheen）、中央本色。寬度沿長度以 cos 變化產生扭轉感，變窄處高光加強。 - 每條緞帶先畫在離屏圖層，再以
screen疊回主畫布，交疊處發亮但不會在分段接縫出現亮線；最後疊一層極淡的放射狀暗角。 - 畫布依
devicePixelRatio縮放（上限 2x），ResizeObserver監看尺寸重算；捲出視窗（IntersectionObserver）或分頁隱藏時停止requestAnimationFrame。 - 首次渲染只輸出帶背景色的容器，canvas 僅在 effect 中繪製，SSR 與 client 一致。
可及性
- canvas 帶
aria-hidden與role="presentation"，且pointer-events-none，純裝飾、不干擾前景內容的點擊與朗讀；children照常可讀。 - 預設底色為深色、前景文字預設
text-neutral-50；改用淺色background時請同步調整文字顏色以維持對比。 - 使用者系統開啟「減少動態效果」時，只繪製一幀靜態畫面（時間點由
seed決定），不啟動動畫迴圈。