Skip to content
Native Animation
Scroll Word Reveal animation preview

This preview uses fictional demo content. See the props below for the customization options available in this component.

npx nativeanimation add scroll-word-reveal

Scroll Word Reveal

A story that illuminates words along a scroll-linked reading line, with configurable paragraphs, image, gradient colors, and fonts.

$9 for this animation

Add to your project

Copy the component and its assets into your app with the Native Animation CLI, or paste the agent prompt into Claude Code, Codex or Cursor once the MCP server is connected.

About this animation

Related guides

A story that illuminates words along a scroll-linked reading line, with configurable paragraphs, image, gradient colors, and fonts.

Why this one

Most scroll reveals switch whole lines between two colors. This version opens with a full editorial title, measures every word, eases across roughly three word widths, lifts highlighted words with a spring, materializes a dark glass header before the opening text passes underneath, and reveals the final image through a centered expanding crop. The highlight is rendered inside the letters rather than as a colored block above the copy.

How it works

  1. Animated.ScrollView writes the real scroll offset to one shared value.
  2. Each wrapped word records its local x and y through onLayout.
  3. A 60%-height reading line compares the scroll offset with each measured word position.
  4. Regular words interpolate from 18% white to full white; highlighted words interpolate each character across the accent gradient.
  5. The same scroll value raises the header blur from 0 to 50 before the first glyph reaches the 24-point scroll-edge fade beneath the fixed 78-point header. The blur is clipped to the header surface, and a fully opaque dark tint prevents readable text from bleeding through the wordmark. Explicit sibling stacking keeps the brand above the material and the scrolling content, within the root stacking layer below the host viewer controls. The final image crop expands from its center.
  6. Reduced Motion displays the final state without scroll-linked transitions.

Install

npx expo install expo-blur expo-image expo-linear-gradient @shopify/react-native-skia react-native-reanimated react-native-worklets

Usage

import { ScrollWordReveal } from './ScrollWordReveal';

<ScrollWordReveal
  imageSource={require('./coast.jpg')}
  paragraphs={[
    {
      text: 'We make room for the journey, not only the destination.',
      highlightedWords: ['journey', 'destination'],
    },
  ]}
/>
<ScrollWordReveal
  accentStart="#0EA5E9"
  accentEnd="#7DD3FC"
  actionLabel="Plan a route"
  brandName="Northwind"
  imageSource={require('./coast.jpg')}
  onActionPress={() => openPlanner()}
  paragraphs={story}
/>

Props

PropTypeDefaultDescription
paragraphsScrollWordRevealParagraph[]Two sample paragraphsStory copy and highlighted words.
brandNamestringNorthwindFixed-header wordmark.
imageSourceImageSourcePropTypeRequiredFinal editorial image.
imageAccessibilityLabelstringA quiet coastal destinationAccessible image description.
actionLabelstringExplore the storyFinal button label.
introEyebrowstringOUR STORYOpening mono-style eyebrow.
introTitlestringTen years of slower travel.Opening editorial headline.
onActionPress() => void—Final button callback.
backgroundColorstring#0B0D12Story background.
accentStartstring#0EA5E9Highlight and brand gradient start.
accentEndstring#7DD3FCHighlight gradient end.
fontFamilystringSystemUI typeface.
mediumFontFamilystringSystemMedium UI typeface.
monoFontFamilystringSystemMonospaced typeface for editorial eyebrows.
serifFontFamilystringSystemEditorial typeface.
serifItalicFontFamilystringSerif fallbackHighlighted-word typeface.
accessibilityLabelstringOur storyScreen-reader story label.
styleStyleProp<ViewStyle>—Root container style.
testIDstring—Root test identifier.

The forwarded ref exposes play(durationMs?), scrollToParagraph(index, durationMs?), reset(animated?, durationMs?), and revealEnding(durationMs?).

Compatibility

  • Expo SDK 58, React Native 0.88, Reanimated 4.7, and Skia 2.14.
  • iOS: supported.
  • Android: supported.
  • Web: supported.
  • Runs in Expo Go with the listed Expo SDK modules.

Accessibility

The call to action has a button role and customizable label, and the editorial image has a customizable description. With Reduce Motion enabled, all words and the image render in their fully revealed states, keyword springs are disabled, and imperative scrolling becomes immediate.

Icons: Lucide (ISC).

Customization notes

Word visibility follows scroll position; a duration would disconnect it from the reader.

More animations