頁面區塊 Sections

可直接放進頁面的完整區塊。與模板裡的 754 個可組裝區段搭配使用;同一套模板內的區段共用設計 token,抽換之後配色與節奏仍然一致。

共 48 個,其中 40 個免費、不需登入即可安裝。

  • 3 款動畫 Hero(漸層/粒子/分割文字)

  • 3 款進階 Hero(WebGL/3D/影片遮罩)

  • 3 款特色區塊(bento/滾動對照/卡片)

  • 行動呼籲區 + 2 款動畫 Footer

  • 登入/註冊頁組(含表單動效)

  • 完整定價區塊(含 FAQ 手風琴)

  • 團隊展示 + 客戶 logo 跑馬牆

  • 完整社會證明區塊

  • 含表單與微互動的聯絡我們區塊

  • 團隊成員卡網格:漸層頭像、hover 翻出社群連結

  • 訂閱表單區塊:輸入動畫、送出成功變身與社會證明

  • 標題在左、右側一面 3D 傾斜排列的圖片畫廊緩慢橫移,兩列反向,hover 時暫停。

  • 標題下方一條浮起的聯絡列:電子郵件一鍵複製、電話撥號與預約按鈕,捲出首屏後可吸附在視窗底部。

  • 暗色主視覺,標題下方三個關鍵數字進入視口時依序計數,分隔線同步描出。

  • 置中標題背後散落一群合作夥伴符號緩慢漂移,各自不同速度與方向,游標移動時產生輕微視差。

  • 標題下方一條帶齒孔的膠片帶無限橫捲,捲動頁面越快膠片跑得越快,hover 單格放大。

  • 標題在左、右側圖磚網格自中心向外依序進場,hover 單塊放大、其他圖磚微暗。

  • 層疊的墨色山脊曲線由程式產生並逐層描繪,標題文字先描邊再填色,捲動時山脊分層視差。

  • 整合服務圖示網格環繞中央產品圖示,光束沿連線依序流向中心,hover 某個服務時點亮它的那條連線。

  • 極簡置中主視覺:標題逐字模糊淡入上浮,唯一的行動按鈕帶緩慢呼吸光環,其餘保持安靜。

  • 互動粒子場背景上的主視覺:粒子緩慢漂移並在鄰近時連線,游標靠近會推開粒子,標題清楚浮在上方。

  • 右側一個大型瀏覽器裝置框佔滿版面,隨頁面捲動從微傾角度轉正並放大,框內可放任意產品畫面。

  • 由捲動驅動的分段城市天際線:往下捲時天色由黃昏轉入夜,建築一段段點亮窗燈,標題隨段落切換。

  • 暗色科技格線主視覺:格點與連線受游標磁力牽引彎曲,點擊時從落點擴散出一圈漣漪波。

  • 筆記本紙張風格的三欄方案卡:手繪邊框與勾選記號逐筆描出,推薦方案有手繪圈選標註,月繳/年繳切換時價格補間。

  • 不等高評價卡組成的瀑布流牆,各欄以不同速度隨捲動視差位移,背景有緩慢變形的生成式色塊,可展開更多。

  • 把每則評價做成一份案例筆記:欄位化的導入資訊、迴紋針固定的照片與螢光筆劃重點,點選時從紙堆中抽到最前。

  • 全幅人像畫面上疊放引言文字,切換時影像交叉淡接並緩慢推近,文字逐行由遮罩中升起,可自動播放。

  • 名片式的評價卡排成橫向捲帶,可拖曳或捲動吸附,越靠近中央的卡片越大越清楚,兩側逐漸縮小變淡。

  • 一疊歪斜擺放的拍立得相片,最上面一張附上引言,點擊或甩動把它丟到最底,下一張翻上來、整疊重新錯開。

  • 大面積色塊承載引言,右側姓名列表切換時,色塊以 layout 動畫滑到對應位置並換色,引言交叉淡接。

  • 高密度的小型評價卡網格,依產業分類篩選時卡片以 layout 動畫重排,hover 浮起並沿游標亮起邊框。

  • 評價卡像撲克牌一樣扇形展開,hover 時該張抬起、鄰卡讓位,點擊把卡片抽到中央放大閱讀,可依序翻下一張。

  • 方形人像磚組成的牆面,hover 或點按時人像以 3D 翻面轉到背面露出引言,觸控與鍵盤同樣可翻。

  • 一列附星等的評價卡,頂部總評分數字計數進場,各卡星星依序填滿並支援小數星等,搭配商品縮圖。

  • 一張置中的大型評價卡自動輪播,底部進度條顯示下一則倒數,切換時內容滑動淡接,可暫停與手動切換。

  • 一張微微歪斜的評價卡,隨游標做 3D 透視傾斜與光澤反射,引言浮在卡面之上,切換時卡片翻轉換面。

  • 三欄並排的靜態評價,每欄一則重點引言與成效數字,進場時欄間分隔線由上而下描出、數字計數、欄位依序浮現。

  • 左側巨大的 01/02/03 編號以逐位滾輪切換,右側引言依方向滑入,支援拖曳、方向鍵與進度分數顯示。

  • 客戶頭像沿一到兩圈軌道緩慢環繞,點選或聚焦某個頭像時軌道暫停,該位客戶的引言在圓心交叉淡入。

  • 左側直列頭像與姓名作為分頁,選中標記沿列滑動,右側引言以模糊交叉淡接切換,頭像同步放大。

  • 單行無限捲動的短評跑馬燈,評語以星號分隔、兩端淡出,可加第二行反向捲動,hover 或聚焦時暫停。

  • 一列並排的評價卡輪流以打字機效果逐字打出引言並帶游標閃爍,打完停留後換下一位,其他卡顯示淡化全文。

  • 只放一句大字評價的極簡輪播,句子上下交叉淡接帶輕微模糊,下方僅留作者與細點指示,背景有緩慢流動的細線。

  • 不等尺寸的便當盒拼貼:一格大型主打案例、數據磚、短評磚與合作字標磚混排,進場依序浮現,hover 露出閱讀案例連結。

  • 以通用社群貼文樣式呈現的評價動態牆,新貼文會定時從頂端滑入、按讚數輕跳,兩欄瀑布排列。

  • 暗色版面中的大幅人像與引言並列,下方縮圖列切換客戶,人像由灰階轉彩色交叉淡入,姓名與職稱滑入。

  • 雜誌跨頁式的評價:巨型引號、襯線大字拉引、首字放大與雙欄內文,進場時引號放大落定、文字逐行浮現。