Skip to content
Native Animation
Marker Highlight Quote animation preview
QuoteTextMarkerHighlightSkiaInteraction

Marker Highlight Quote

An interactive editorial quote whose irregular pastel marker strokes draw behind selected phrases.

$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 marker-highlight-quote

About this animation

An interactive editorial quote whose irregular pastel marker strokes draw behind selected phrases.

How it works

  1. Quote copy is supplied as explicit lines of inline segments, so the layout remains intentional on compact and tall phones.
  2. Highlighted segments measure themselves and build a filled Skia path with an uneven upper edge, lower edge, dry-brush rim, and subtle paper grain.
  3. A single continuous Reanimated progress value stages the line entrance, reveals each initial stroke from left to right, and drives later selection transitions.
  4. Tapping a marked phrase captures its current visual amount before springing to the next state, which keeps rapid reversals interruptible.
  5. The component measures its own width and scales the typography without reading the device window.

Why this one

Most marker effects use a uniform rounded rectangle or a constant-width line. This version creates a materially richer band with changing thickness and rough layered edges, then places it inside a complete, accessible selection state machine. The explicit editorial line model also keeps art direction stable across 320 × 694 and 390 × 844 layouts.

Install

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

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

Usage

import MarkerHighlightQuote from './MarkerHighlightQuote';

export function ReadingScreen() {
  return (
    <MarkerHighlightQuote
      author="Avery Rowan"
      lines={[
        [{ id: 'line-1', text: 'Make room for the ' }],
        [
          { id: 'quiet', text: 'quiet', highlightColor: '#BCE7D1' },
          { id: 'line-2', text: ' idea.' },
        ],
      ]}
    />
  );
}

Customize the palette, fonts, initial state, and completion callback:

<MarkerHighlightQuote
  author="Avery Rowan"
  source="Notes from Tomorrow"
  lines={quoteLines}
  initialHighlightedIds={['quiet']}
  backgroundColor="#FFFCF4"
  textColor="#242019"
  mutedColor="#777168"
  quoteFontFamily="YourSerifFont"
  metadataFontFamily="YourSansFont"
  fontScale={0.088}
  onHighlightChange={(ids) => saveHighlights(ids)}
/>

The forwarded ref exposes replay(), clearHighlights(), highlightAll(), and reset().

Props

PropTypeDefaultDescription
linesMarkerQuoteLine[]Built-in three-line quoteExplicit quote lines containing text and optional marker segments.
authorstring'Unknown author'Author credit.
sourcestring—Optional work or publication.
initialHighlightedIdsstring[]Every marker segmentSegment IDs initially shown with marker.
textColorstring'#29251F'Quote and author color.
mutedColorstring'#7B746B'Source, rule, and decorative quote color.
backgroundColorstring'#FFFDF7'Paper surface color.
quoteFontFamilystringSystem serifQuote font family.
metadataFontFamilystringSystem sans serifAuthor and source font family.
fontScalenumber0.091Quote size as a fraction of the measured component width.
onHighlightChange(highlightedIds: string[]) => void—Called after a selection transition settles.
onEnter() => void—Called after the entrance settles.
accessibilityLabelstring'Interactive highlighted quote'Label for the quote region.
styleStyleProp<ViewStyle>—Outer-container style.
testIDstring—Test identifier for the outer container.

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 Expo SDK 57

Accessibility

Every marked phrase is a labeled button with selected state and a minimum 44 pt touch target. Screen readers announce whether a tap adds or removes its highlight. With reduced motion enabled, lines and marker states update immediately without translation, drawing, or spring movement.

More animations