模糊浮現標題主視覺｜免費 React 元件

極簡置中的 React 主視覺區塊：標題逐字從模糊中淡入上浮，唯一的行動按鈕帶緩慢呼吸光環，其餘保持安靜；中文逐字、英文以詞為單位不斷字，節奏全部由 CSS 變數控制。

大量留白、全部置中的主視覺：眉標（強調色小圓點 + 文字）→ 大標題 → 副標 → 一顆 pill 形主按鈕與可選的純文字次連結。畫面上只有兩件事在動——標題以字素為單位逐字從模糊中浮上來，標題完成後 150ms 副標與按鈕淡入；之後主按鈕以緩慢的縮放與外圍光環持續呼吸，滑鼠移上去就停下、改為微微上抬並把箭頭往右推 2px。背景是純色、沒有裝飾，可選一條標題上方的 48px 細線。

把這個效果裝進你的專案

在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。

npx webberui@latest add blur-in-headline-hero

還沒有專案，或安裝遇到問題？看快速開始 →

Playground

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

切字單位splitBy

CTA 呼吸breathing

逐字間隔（ms）stagger

呼吸週期（s）breath

2.4

標題上方細線showRule

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

編輯中的呼叫預設屬性

<BlurInHeadlineHero/>

    </div>
  );
}

完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。

安裝

npx webberui@latest add https://webberui.com/r/blur-in-headline-hero.json

或在 components.json 設定 registries 後，改用 @webberui/blur-in-headline-hero 安裝。

使用

import { BlurInHeadlineHero } from "@/components/ui/blur-in-headline-hero";

<BlurInHeadlineHero
  eyebrow="靜流筆記｜新版上線"
  title="把雜訊關掉，只留下要寫的那一句"
  subtitle="一個不打擾你的寫作空間：沒有通知、沒有側欄，打開就能寫。"
  primaryAction={{ label: "免費開始寫", href: "/signup" }}
  secondaryAction={{ label: "看看怎麼運作", href: "#how" }}
/>

調整節奏與強調色只要覆寫 CSS 變數：

<div
  style={{
    "--wb-blur-in-headline-hero-accent": "#7c3aed",
    "--wb-blur-in-headline-hero-stagger": "45ms",
    "--wb-blur-in-headline-hero-breath": "3.2s",
  } as React.CSSProperties}
>
  <BlurInHeadlineHero title="慢一點，也沒關係" primaryAction={{ label: "開始" }} />
</div>

Props

Prop	型別	預設值	說明
`title`	`ReactNode`	—	主標題（必填）；傳字串才會逐字進場，傳 ReactNode 則整塊淡入上浮
`eyebrow`	`ReactNode`	—	標題上方的小眉標，前面帶一顆強調色小圓點
`subtitle`	`ReactNode`	—	副標題
`primaryAction`	`BlurInHeadlineHeroAction`	—	唯一的主要 CTA（pill 形、帶呼吸光環）
`secondaryAction`	`BlurInHeadlineHeroAction`	—	次要的純文字連結
`as`	`"h1" \| "h2"`	`"h1"`	標題使用的標籤層級
`minHeight`	`number`	`560`	區塊最小高度（px）
`splitBy`	`"char" \| "word"`	`"char"`	切字單位：`char` 每字（英文每字母）、`word` 每詞（中文以標點切成短語）
`breathing`	`boolean`	`true`	CTA 是否持續呼吸（縮放 + 外圍光環）
`showRule`	`boolean`	`false`	是否在標題上方顯示一條 48px 細線
`onEntered`	`() => void`	—	全部進場完成時回呼（減少動態效果時同樣會觸發）
`className`	`string`	—	透傳到根 `section`

BlurInHeadlineHeroAction

欄位	型別	預設值	說明
`label`	`string`	—	按鈕文字
`href`	`string`	—	連結位址；提供時渲染為 `a`
`onClick`	`() => void`	—	點擊回呼；未提供 `href` 時渲染為 `type="button"` 的按鈕

CSS 變數

變數	預設值	說明
`--wb-blur-in-headline-hero-accent`	`#0d9488`（深色 `#2dd4bf`）	眉標圓點、主按鈕底色與呼吸光環
`--wb-blur-in-headline-hero-stagger`	`30ms`	標題逐字的間隔
`--wb-blur-in-headline-hero-duration`	`600ms`	每個字與各區塊的進場時長
`--wb-blur-in-headline-hero-breath`	`2.4s`	CTA 呼吸一次的週期

細節

切字：以 Intl.Segmenter 的 grapheme 粒度切成字素（不支援時退回 Array.from），組合字與表情符號不會被拆開。刻意不用 word 粒度——它依賴 ICU 字典，伺服器與瀏覽器可能切出不同結果，造成 hydration 不一致。
斷行：英文單字整組包在 inline-block + nowrap 裡，逐字母的動畫不會讓單字在中間斷開；中文每個字獨立，字與字之間照常換行。「，。」」等收尾標點黏在前一個字、「「（」等開頭標點黏在後一個字，不會出現在行首或行尾。
每個字的進場是 y 0.4em → 0、透明度 0 → 1、blur(6px) → 0，延遲是 stagger × 序號。word 模式下同一個英文單字或同一中文短語共用序號，一起浮上來。
副標與按鈕的延遲以 CSS calc() 從標題的步數、--wb-blur-in-headline-hero-stagger 與 --wb-blur-in-headline-hero-duration 算出，改了變數仍會在標題完成後 150ms 才進場。
呼吸動畫在按鈕進場後才開始；hover 或鍵盤聚焦時暫停，避免和 focus ring 的陰影互相干擾。

可及性

根元素是 section，以 aria-labelledby 指向標題（useId 產生）
逐字切開的標題外層帶 aria-label（完整標題），每個字的 span 都設 aria-hidden，螢幕閱讀器只會念一次完整句子
主按鈕有 href 時是 a、沒有時是 type="button" 的按鈕，皆有 focus-visible ring；箭頭圖示對輔助科技隱藏
使用者系統開啟「減少動態效果」時，呼吸循環完全停止，所有內容改為 150ms 淡入，不位移、不模糊

模糊浮現標題主視覺

把這個效果裝進你的專案

本頁目錄