CTA + Footer Set

進入視口時依序揭示的行動呼籲區，搭配多欄與極簡兩款動畫頁尾。

載入預覽⋯

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

CTA 內容對齊align

背景光暈glow

頁尾版式variant

子項間隔（秒）stagger

0.12

進場延遲（秒）delay

<CtaFooterSet />

安裝

npx shadcn@latest add https://webberui.com/r/cta-footer-set.json

或在 components.json 設定 registries 後，改用 @webberui/cta-footer-set 安裝。

安裝依賴後，從 registry JSON（/r/cta-footer-set.json 的 files[0].content）複製 cta-footer-set.tsx 原始碼到你的 components/ui/ 目錄：

npm install motion clsx tailwind-merge

使用

CtaSection 與 SiteFooter 是兩個獨立、可搭配使用的頁面區塊。兩者都會在進入視口時依序揭示子項。

import { CtaSection, SiteFooter } from "@/components/ui/cta-footer-set";

<CtaSection
  eyebrow="立即開始"
  title="用動畫，讓每個區塊都活起來"
  description="複製、貼上即可安裝的 React 元件。"
  actions={
    <>
      <a href="/docs">開始使用</a>
      <a href="/components">瀏覽元件</a>
    </>
  }
/>

<SiteFooter
  variant="columns"
  brand="WebberUI"
  tagline="動畫優先的 React 元件庫。"
  columns={[
    { heading: "產品", links: [{ label: "元件", href: "#" }] },
    { heading: "資源", links: [{ label: "文件", href: "#" }] },
  ]}
  copyright="© 2026 WebberUI"
/>

SiteFooter 提供兩款版式：columns（品牌 + 多欄連結 + 底部社群列）與 minimal（置中的品牌、行內導覽與社群）。切換 variant 即可。

<SiteFooter
  variant="minimal"
  brand="WebberUI"
  navLinks={[
    { label: "文件", href: "#" },
    { label: "元件", href: "#" },
  ]}
  social={[{ label: "GitHub", href: "#", icon: <Github className="size-4" /> }]}
  copyright="© 2026 WebberUI"
/>

CtaSection Props

Prop	型別	預設值	說明
`title`	`React.ReactNode`	—	主標題（必填）
`eyebrow`	`React.ReactNode`	—	標題上方的小標籤
`description`	`React.ReactNode`	—	標題下方的說明文字
`actions`	`React.ReactNode`	—	行動按鈕區，通常放 1–2 個按鈕
`align`	`"center" \| "left"`	`"center"`	內容對齊方式
`glow`	`boolean`	`true`	是否顯示背景流動光暈
`delay`	`number`	`0`	進場前延遲（秒）
`stagger`	`number`	`0.12`	子項 stagger 間隔（秒）
`once`	`boolean`	`true`	只在第一次進入視口時播放

SiteFooter Props

Prop	型別	預設值	說明
`variant`	`"columns" \| "minimal"`	`"columns"`	頁尾版式
`brand`	`React.ReactNode`	—	品牌名稱或 logo 節點
`tagline`	`React.ReactNode`	—	品牌下方標語（columns 版式）
`columns`	`FooterColumn[]`	`[]`	連結欄位（columns 版式）
`navLinks`	`FooterLink[]`	`[]`	行內導覽連結（minimal 版式）
`social`	`FooterLink[]`	`[]`	社群連結，建議搭配 `icon`
`copyright`	`React.ReactNode`	—	版權文字
`delay`	`number`	`0`	進場前延遲（秒）
`stagger`	`number`	`0.1`	子項 stagger 間隔（秒）
`once`	`boolean`	`true`	只在第一次進入視口時播放

FooterLink / FooterColumn

interface FooterLink {
  label: string;      // 連結文字，icon-only 時作為無障礙名稱
  href: string;       // 連結目標
  icon?: React.ReactNode; // 選用圖示
}

interface FooterColumn {
  heading: string;    // 欄位標題
  links: FooterLink[];
}

細節

兩個區塊皆以 whileInView 觸發，配合 staggerChildren 讓子項依序揭示；columns 版式使用巢狀 stagger，讓品牌區、各連結欄與底部列形成連續的漣漪節奏。
CtaSection 的背景光暈由兩顆中性色模糊圓斑構成，緩慢漂移循環，屬純裝飾。
全部採用中性色（neutral-*）與 dark: 變體，方便沿用你自己的主題；hover 過渡時長可由 --wb-duration-fast 覆寫。

可及性

使用者系統開啟「減少動態效果」時，兩個區塊直接渲染靜態版本、光暈停止漂移。
CtaSection 以 <section aria-labelledby> 指向標題，形成具名地標。
SiteFooter 使用原生 <footer> 標籤（隱含 contentinfo 地標），連結皆為真實 <a> 元素，社群 icon 連結以 label 提供 aria-label。
所有連結具備 focus-visible 外框，可鍵盤操作。

On this page