React 動態背景元件
極光、網格、噪點、粒子、光暈、漸層流動。背景是唯一會佔滿整個視口又永遠在動的元素,所以成本控制比視覺本身更重要:優先用 CSS 與合成層,避免每幀重排。
共 35 個,其中 32 個免費、不需登入即可安裝。
極光流動背景
動態網格漸層背景
互動粒子場(游標排斥/連線)
光束沿路徑流動背景
噪點顆粒質感疊層
游標互動點陣(波紋/磁吸)
WebGL 流體波動背景
聚光燈掃射背景
- Meteors免費
背景流星/流星雨劃過效果
- Globe免費
自轉可互動的 WebGL 地球(GitHub 風)
點線程序動畫的世界地圖/連線圖
旋轉漩渦狀波動背景,適合 CTA
合成波風格透視捲動的復古網格
Linear 風燈光錐聚焦的區塊標頭
可配置密度/顏色的閃爍星點背景
hover 逐格高亮的滿版方格背景
程序生成分支閃電並發光
視差星場銀河,游標可互動
超空間曲速旅行的隧道動畫
反光液態鉻/金屬流動表面
復古有序抖動(dithering)噪點美學
- Ballpit免費
可互動的物理彈跳球池
由上/側灑下的體積光束射線
虹彩偏移波動的著色器背景
卡片式時空扭曲網格背景
矩陣式下落字元故障流背景
平滑融合的液態黏球(metaballs/ferrofluid)
SVG 等高線地形圖緩慢漂移變形的裝飾背景
canvas 漂浮粒子與鄰近連線,游標靠近時吸附匯聚
大型模糊漸層光球緩慢漂浮交錯,柔和氛圍背景
電路板線路圖上流動的光脈衝,科技感裝飾背景
季節性飄落背景:櫻瓣/楓葉/雪花三種預設形狀、每瓣翻轉飄搖與風向擾動、密度與風速可調、可依滾動加速
連續半色調點陣背景:點的大小隨捲動進度改變密度,游標附近的點放大,純 CSS 漸層繪製不需圖片。
一群卡片在 3D 空間的不同深度緩慢漂浮:游標視差依深度不同,捲動時整體拉遠並散開,遠景帶景深模糊。
以 Canvas 2D 繪製的絲綢緞帶背景:數條貝茲曲線帶在深色底緩慢擺動流動,沿法線的漸層模擬邊緣光澤,不使用 WebGL。