Blur-In Headline Hero

A hero with generous whitespace, everything centred: eyebrow (accent dot + text) → large headline → subtitle → one pill-shaped primary button plus an optional plain-text secondary link. Only two things move. The headline rises grapheme by grapheme out of a blur, and 150ms after it finishes the subtitle and button fade in; from then on the primary button breathes with a slow scale and outer halo. Hovering stops the breathing and instead lifts the button slightly and nudges the arrow 2px to the right. The background is a flat colour with no decoration, with an optional 48px hairline above the headline.

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

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>
  );
}

Installation

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

Usage

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

<BlurInHeadlineHero
  eyebrow="Stillwater Notes | New release"
  title="Turn off the noise. Keep the one line you came to write."
  subtitle="A writing space that stays out of your way: no notifications, no sidebars."
  primaryAction={{ label: "Start writing free", href: "/signup" }}
  secondaryAction={{ label: "See how it works", href: "#how" }}
/>

To change the pacing or accent, override the CSS variables:

<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="Slower is fine, too" primaryAction={{ label: "Begin" }} />
</div>

Props

BlurInHeadlineHeroAction

CSS variables

How it works

• Splitting: the headline is split into graphemes with Intl.Segmenter (falling back to Array.from), so combined characters and emoji stay whole. Word granularity is deliberately avoided — it depends on ICU dictionaries, and server and browser can split differently, breaking hydration.
• Line breaking: each English word is wrapped in an inline-block + nowrap group so per-letter animation never splits a word mid-way; each Chinese character stands alone and wraps normally. Closing marks such as 「，。」」 stick to the previous character and opening marks such as 「「（」 to the next, so they never start or end a line.
• Each glyph enters with y 0.4em → 0, opacity 0 → 1 and blur(6px) → 0, delayed by stagger × step. In word mode an English word or a Chinese phrase shares one step and rises together.
• The subtitle and button delays are computed with CSS calc() from the headline's step count, --wb-blur-in-headline-hero-stagger and --wb-blur-in-headline-hero-duration, so they still enter 150ms after the headline when you change the variables.
• Breathing starts only after the button has entered, and pauses on hover or keyboard focus so it never fights the focus ring's shadow.

Accessibility

• The root is a section with aria-labelledby pointing at the headline (generated with useId)
• The split headline carries an aria-label with the full text and every glyph span is aria-hidden, so screen readers announce the sentence once
• The primary button is an a when it has href and a type="button" button otherwise, both with a focus-visible ring; the arrow icon is hidden from assistive tech
• When the user's system asks to reduce motion, the breathing loop stops entirely and everything fades in over 150ms without movement or blur