FORMA Docs

In-view title

Bring a section title in as it scrolls into view.

import { InViewTitle } from "@/forma/arc/in-view-title/in-view-title";
Base

In FORMA

  • Liegt in kit/arc/in-view-title und ist über @/forma/arc/in-view-title/in-view-title erreichbar.
  • Farbe, Ecken, Höhen, Abstände, Tiefe, Schrift und Tempo kommen aus der Richtung (core/arc-bridge.ts); Arc behält Verhalten, Tastatur und Federn.

When to use

  • 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}.

When not to use

  • 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.

Usage

import { InViewTitle } from "@/forma/arc/in-view-title/in-view-title";

export function FeaturesHeader() {
  return (
    <InViewTitle
      variant="line"
      text="Everything your team needs to ship"
      lines={["Everything your team", "needs to ship"]}
    />
  );
}

API reference

InViewTitle

A section title that reveals itself once it scrolls into view, with five reveal styles.

PropTypeDefaultDescription
text (required)string–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.

Accessibility

  • 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.

Motion

  • 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.

Responsive behavior

  • 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.

Performance

  • 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

  • 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.

Also in text effects

  • Text morph: Morph a label into its next state, letter by letter.

Guidance for AI tools

In-view title: Bring a section title in as it scrolls into view. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://uiarc.dev/llms.txt

ZurückText revealWeiterText morph

Komponente und Text: Arc UI (MIT, uiarc.dev), angepasst für FORMA.