In-view title ported

Bring a section title in as it scrolls into view.

A section title that reveals itself once it scrolls into view.

Live specimen

Loading demo…

Guidance

When to use

Section titles further down the page that should reveal on entry.
Editorial pages where headlines rise out of a clip or sharpen from blur.

When not to use

Use text-reveal for above-the-fold hero headlines that animate on page load.
Use text-shimmer for short status lines showing ongoing work.

Installation

pnpm add sveltearc

Usage

<script lang="ts">
  import { InViewTitle } from '$lib/components/in-view-title';
</script>

<InViewTitle text="Built for the long read" variant="blur" as="h2" />

Variants & Examples

Blur

Sharpens word by word; suits most headings.

<InViewTitle text="Built for the long read" variant="blur" as="h2" />

Word

Words rise out of a clip; editorial feel.

<InViewTitle text="Built for the long read" variant="word" as="h2" />

Line

Whole lines rise out of a clip; pass lines to set the breaks.

<InViewTitle text="Built for the long read" variant="line" as="h2" lines={['Built for', 'the long read']} />

Tracking

Opens tight letter spacing, letter by letter.

<InViewTitle text="Built for the long read" variant="tracking" as="h2" />

Wipe

Uncovers the title left to right through a soft edge.

<InViewTitle text="Built for the long read" variant="wipe" as="h2" />

API Reference

Prop	Type	Default	Description
`text`	`string`	–	(Required) The title copy to reveal.
`variant`	`"word" \| "line" \| "blur" \| "tracking" \| "wipe"`	"blur"	Reveal style for the title.
`as`	`"h1" \| "h2" \| "h3"`	"h2"	Heading level of the rendered title.
`lines`	`string[]`	–	Explicit line breaks for the line variant. Defaults to [text].
`class`	`string`	–	Merged onto the outer wrapper element.
`id`	`string`	–	Forwarded to the title element, e.g. for aria-labelledby.
`once`	`boolean`	true	Replay on every entry when false. Phase-1 still-port: parity only, no behaviour yet.

Accessibility

The title carries aria-label with the full text while the animated words are aria-hidden, so screen readers read one clean heading.
Pick the heading level with as so the page outline stays correct.

Motion

Phase-1 still-port: every variant renders its final visible end state statically — no scroll observation or transitions are wired yet. Phase 2 adds the in-view reveal with reduced-motion instant end state.

Notes for AI

Use for section titles further down the page. For above-the-fold headlines use text-reveal.
Pass lines to control breaks for the line variant.

Source of truth: registry/components/in-view-title/in-view-title.tsx