InViewTitle

A section title that reveals itself once it scrolls into view, in one of five styles: blur, word, line, tracking or wipe.

When to use

• Section headings on landing pages, changelogs and long-form docs, where a small entrance marks the start of a new section.
• blur suits most headings; word and line rise out of a clip for editorial pages; tracking opens tight letter spacing; wipe uncovers the title left to right.
• For a headline that should animate immediately on mount (hero, empty state), use TextReveal. Do not animate every heading on a dense app screen.

Usage

import { InViewTitle } from "@/components/iris/in-view-title/in-view-title";

<InViewTitle text="Every contact. One record." />
<InViewTitle variant="line" lines={["One Postgres", "per cell"]} text="One Postgres per cell" as="h3" />
<InViewTitle variant="wipe" text="One letter on stage" once={false} />

Props

Prop	Type	Default	Description
text	string	—	The title (required). Also the accessible name.
variant	"blur" | "word" | "line" | "tracking" | "wipe"	"blur"	Reveal style.
as	"h1" | "h2" | "h3"	"h2"	Heading level.
lines	string[]	—	Line breaks for the line variant; otherwise the whole text is one line.
once	boolean	true	false replays on every entry.
className	string	—	Class on the wrapping div; style the heading inside it.
id	string	—	Id on the heading.

Notes

• Reveals when 45% of the title is in view. Titles already above the viewport show immediately, and server-rendered titles appear on their own after 2.4s if scripts are slow.
• The heading carries aria-label={text}; animated parts are aria-hidden.
• Reduced motion shows the title at once with no transform, blur or mask.
• Font size and weight come from your styles; colour defaults to --ink.