In-view title
Bring a section title in as it scrolls into view.
npm install https://animui.stracture.net/__local/package.tgzLive · keyboard ready
- Section headings that should animate once they scroll into view.
- Feature pages where each section title needs a consistent entrance style.
- Headings that should replay on each entry, via once={false}.
- Use text-reveal for hero copy that animates on load.
- Use scroll-highlight for a paragraph that follows scroll progress.
- Use text-shimmer for status lines, not headings.
Installation
Install animui once, then import any component or block from its typed package entry.
animui · 250 components and blocks
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { InViewTitle } from 'animui/in-view-title';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideexample.tsx
import { InViewTitle } from "animui/in-view-title"; export function FeaturesHeader() { return ( <InViewTitle variant="line" text="Everything your team needs to ship" lines={["Everything your team", "needs to ship"]} /> );}InViewTitle
A section title that reveals itself once it scrolls into view, with five reveal styles.
PropTypeDefaultDescription
textRequiredstring–The title copy.variant"word" | "line" | "blur" | "tracking" | "wipe""blur"Reveal style. blur suits most headings; word and line rise from a clip; tracking opens letter spacing; wipe uncovers left to right.as"h1" | "h2" | "h3""h2"Heading level.linesstring[]–Explicit line breaks for the line variant. Falls back to one line of text.oncebooleantrueSet false to replay the reveal on every entry.classNamestring–Merged onto the wrapper.idstring–Forwarded to the heading.- The heading carries aria-label with the full text; the animated parts are aria-hidden.
- Titles already scrolled past show immediately, and server-rendered titles appear on their own if scripts are slow.
- Choose as to match the page's heading outline.
- Triggers when 45% of the title is visible. Opacity leads, blur clears next, and the transform settles last, so text is readable before it fully arrives.
- Hiding (with once={false}) is a quick fade with no stagger.
- Reduced motion shows the title instantly with no transform, blur, or mask.
- Word, blur, and tracking variants wrap naturally at any width.
- The line variant uses your explicit lines, which do not rewrap, so keep each line short enough for mobile.
- One IntersectionObserver per title via useInView, triggering at 45% visibility.
- Each word or line is a motion span with blur and transform; fine for headings, not for long body text.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Default choice for section headings that should animate on scroll. Use text-reveal for on-load hero copy and scroll-highlight for a key paragraph.
- Pass lines only with variant="line"; the other variants split on words.
The full library index for assistants is at /llms.txt.