Skip to content
Native Animation
Gradient Sweep Headline animation preview
HeadlineTextSkiaShaderGestureHero

Gradient Sweep Headline

A responsive Skia headline whose words resolve from a soft blur before a narrow accent-to-white light travels inside the letterforms.

$9 for this animation

Checkout opens soon. Leave your email and we will tell you the moment you can buy it.

One email when checkout opens. No spam.

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.

npx nativeanimation add gradient-sweep-headline

About this animation

A responsive Skia headline whose words resolve from a soft blur before a narrow accent-to-white light travels inside the letterforms.

Why this one

Most headline shimmers slide an opaque rectangle over ordinary text. This version keeps every highlight inside the glyphs with a real Skia shader, lets a tap choose the sweep's origin, and resolves into a quiet keyword glow instead of looping visual noise.

How it works

  1. The component measures its own container and sizes an editorial headline from that local width and height.
  2. Skia measures every word with getTextWidth, then centers each supplied line without screen-level dimensions.
  3. One continuous Reanimated progress value drives the 70 ms word stagger, the 6 px blur release, the moving gradient, and the final keyword glow.
  4. Each word uses a Skia LinearGradient as its text shader, so the accent-to-white sweep is clipped by the glyphs.
  5. Tapping the headline resets that same progress and places the sweep at the touched horizontal position.

Install

npx expo install @shopify/react-native-skia react-native-reanimated react-native-worklets

On web, follow Expo's Skia setup so CanvasKit is loaded before this component renders.

Usage

import { useRef } from 'react';
import { GradientSweepHeadline, type GradientSweepHeadlineRef } from './gradient-sweep-headline';

export function NotesHero() {
  const headlineRef = useRef<GradientSweepHeadlineRef>(null);

  return (
    <GradientSweepHeadline
      ref={headlineRef}
      lines={['Turn scattered thoughts', 'into luminous', 'possibility.']}
      highlightWord="possibility."
      titleFont={require('./InstrumentSerif-Regular.ttf')}
    />
  );
}

Customize its personality or replay from a chosen horizontal origin:

<GradientSweepHeadline
  ref={headlineRef}
  accentColor="#9A87FF"
  duration={2000}
  glowIntensity={0.34}
  textColor="#DDD9E8"
  wordStagger={70}
/>

headlineRef.current?.replayFrom(0.5);

Props

PropTypeDefaultDescription
linesstring[]Three-line sample headlineOne centered string per headline line.
highlightWordstring'possibility.'Word that retains the final accent glow.
titleFontDataSourceParamSystem serif where availableSkia font source for the headline; pass a source on web.
textColorstring'#D8D5E3'Resting headline color.
accentColorstring'#8C7CFF'Sweep and keyword-glow color.
durationnumber1800Full entrance and sweep duration in milliseconds.
wordStaggernumber70Delay between word entrances in milliseconds.
glowIntensitynumber0.28Final keyword glow opacity from 0 to 1.
onSweepComplete() => void—Called after the sweep settles.
accessibilityLabelstringDescriptive replay instructionScreen-reader label for the headline button.
styleStyleProp<ViewStyle>—Outer-container style.
testIDstring—Test identifier for the outer container.

The forwarded ref exposes replayFrom(position?), where position is a normalized horizontal coordinate from 0 to 1.

Compatibility

  • Expo SDK 57
  • React Native 0.86
  • Reanimated 4.5 and Worklets 0.10
  • React Native Skia 2.6
  • iOS: supported, not yet verified on a device
  • Android: supported, not yet verified on a device
  • Web: supported, not yet visually verified
  • Works in Expo Go because its native dependencies are included in the SDK

Accessibility

The entire headline is a labeled button with a touch target larger than 44 pt. Tapping is the direct alternative to any gesture. With reduced motion enabled, every word is immediately readable, the sweep stops, and only the soft static keyword glow remains.

More animations