Word wipe

Text that reads in word by word as you scroll, each word lifting from faint to fully opaque.

Status: stable
Tags: motion
text
scroll

Install

pnpm add gsap

Setup

Load src/styles/word-wipe.css in the head. The CSS must not come from the script, or the text flashes at full strength before dimming.
Wrap the text in <div data-word-wipe>.
Call initWordWipes() from src/scripts/word-wipe.ts once the page has loaded. It sets up every [data-word-wipe], and returns a clean-up function.

Without the script, the text stays at full strength.

Wraps the HTML core, so the logic is shared.

Install

pnpm add gsap

Setup

The component imports the CSS and the script. The as prop sets the element, and it is a div by default.

Parity with the default: full

Install

pnpm add gsap

Expects in your project: react >=19.

Setup

A native React version: it shares word-wipe.css with the other versions, and not their script. The component imports the CSS (your bundler puts it in the head) and sets everything up in one effect, so it renders safely on the server.

Keep the children static, because SplitText replaces the text nodes. To change the text, give the component a new key.

1
---
2
import WordWipe from "/src/components/WordWipe.astro";
3
---
4

5
<div class="spacer">Scroll down</div>
6
<main>
7
  <WordWipe>
8
    <p class="statement">
9
      Each word lifts from faint to full strength as the sentence scrolls into view, then rewinds
10
      when you scroll back up.
11
    </p>
12
  </WordWipe>
13
</main>
14
<div class="spacer"></div>

1
---
2
// Plain markup, the way a page without a framework would use it: the CSS in
3
// the head, and the script to set it up.
4
import "/src/styles/word-wipe.css";
5
---
6

7
<div class="spacer">Scroll down</div>
8
<main>
9
  <div data-word-wipe>
10
    <p class="statement">
11
      Each word lifts from faint to full strength as the sentence scrolls into view, then rewinds
12
      when you scroll back up.
13
    </p>
14
  </div>
15
</main>
16
<div class="spacer"></div>
17

18
<script>
19
  import { initWordWipes } from "/src/scripts/word-wipe";
20
  initWordWipes();
21
</script>

1
---
2
import { WordWipe } from "/src/components/WordWipe";
3
---
4

5
<div class="spacer">Scroll down</div>
6
<main>
7
  <WordWipe client:load>
8
    <p class="statement">
9
      Each word lifts from faint to full strength as the sentence scrolls into view, then rewinds
10
      when you scroll back up.
11
    </p>
12
  </WordWipe>
13
</main>
14
<div class="spacer"></div>

Files

1
/**
2
 * Word wipe: the script for the HTML and Astro versions. Load `word-wipe.css`
3
 * in the head as well.
4
 *
5
 *   <div data-word-wipe data-word-wipe-dim="0.15">
6
 *     <h2>Every word lights up as you scroll.</h2>
7
 *   </div>
8
 *
9
 *   import { initWordWipes } from "./word-wipe";
10
 *   initWordWipes(); // every [data-word-wipe] on the page
11
 *
12
 * Text reads in word by word as you scroll, each word lifting from faint to
13
 * fully opaque. The wipe is scrubbed: it starts when the text enters from the
14
 * bottom and finishes as it settles into the upper half of the viewport, so
15
 * scrolling back up rewinds it. Words are staggered first to last, and each
16
 * fades over a slice of the scroll rather than snapping.
17
 *
18
 * Attributes, each also an option to `initWordWipe` (the option wins):
19
 *   data-word-wipe-dim            Resting opacity of an unlit word. Default 0.1.
20
 *   data-word-wipe-stagger        Seconds between words. Default 0.12.
21
 *   data-word-wipe-fade           Seconds each word takes to light up. Default 0.45.
22
 *   data-word-wipe-trigger-start  ScrollTrigger start. Default "top 90%".
23
 *   data-word-wipe-trigger-end    ScrollTrigger end. Default "bottom 45%".
24
 *
25
 * Set by the script: data-word-wipe-state is "pending" while the script waits
26
 * for fonts, then "split" once the words exist.
27
 *
28
 * Custom property: --word-wipe-dim on the element wins over every dim setting,
29
 * so a theme can set the resting opacity everywhere at once.
30
 *
31
 * Requires `word-wipe.css` in the head. It dims the text before the split, and
32
 * a stylesheet added by the script would land after first paint, which flashes
33
 * fully lit text that then drops to dim.
34
 *
35
 * Splitting waits for `document.fonts.ready`. Splitting against the fallback
36
 * font measures the wrong word widths, and words wrap onto the wrong lines once
37
 * the web font arrives. SplitText mirrors the original text into an
38
 * `aria-label`, so screen readers do not read the split spans word by word.
39
 *
40
 * Honours prefers-reduced-motion: the text is never split and stays fully lit.
41
 *
42
 * Calling init twice on the same element does nothing. Each call returns a
43
 * clean-up function that undoes it, for pages that swap content in and out.
44
 */
45

46
import { gsap } from "gsap";
47
import { ScrollTrigger } from "gsap/ScrollTrigger";
48
import { SplitText } from "gsap/SplitText";
49

50
gsap.registerPlugin(ScrollTrigger, SplitText);
51

52
export interface WordWipeOptions {
53
  /** Resting opacity of an unlit word. */
54
  dim?: number;
55
  /** Seconds between one word starting and the next. */
56
  stagger?: number;
57
  /** Seconds a single word takes to light up. */
58
  fade?: number;
59
  /** ScrollTrigger start position, such as "top 80%". */
60
  triggerStart?: string;
61
  /** ScrollTrigger end position, such as "bottom 55%". */
62
  triggerEnd?: string;
63
}
64

65
const STATE = "data-word-wipe-state";
66
const active = new WeakMap<HTMLElement, () => void>();
67

68
/** A finite number from an attribute, or undefined. */
69
function numberAttribute(root: HTMLElement, name: string): number | undefined {
70
  const value = parseFloat(root.getAttribute(name) ?? "");
71
  return Number.isFinite(value) ? value : undefined;
72
}
73

74
/** Sets up one word wipe. Returns a function that undoes it. */
75
export function initWordWipe(root: HTMLElement, options: WordWipeOptions = {}): () => void {
76
  const existing = active.get(root);
77
  if (existing) return existing;
78

79
  if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return () => {};
80

81
  let split: SplitText | undefined;
82
  let cancelled = false;
83

84
  // Dims the whole block right away; the words take the dim over once they
85
  // exist. Marked only now, so text is never left faint by a stylesheet that
86
  // loaded without the script that lights it.
87
  root.setAttribute(STATE, "pending");
88

89
  const build = () => {
90
    // Cleaned up while waiting on fonts.
91
    if (cancelled) return;
92

93
    // Custom property, then option, then attribute, then default.
94
    const fromVar = parseFloat(getComputedStyle(root).getPropertyValue("--word-wipe-dim"));
95
    const dim = Number.isFinite(fromVar)
96
      ? fromVar
97
      : (options.dim ?? numberAttribute(root, "data-word-wipe-dim") ?? 0.1);
98
    const stagger = options.stagger ?? numberAttribute(root, "data-word-wipe-stagger") ?? 0.12;
99
    const fade = options.fade ?? numberAttribute(root, "data-word-wipe-fade") ?? 0.45;
100
    const start =
101
      options.triggerStart ?? root.getAttribute("data-word-wipe-trigger-start") ?? "top 90%";
102
    const end =
103
      options.triggerEnd ?? root.getAttribute("data-word-wipe-trigger-end") ?? "bottom 45%";
104

105
    split = SplitText.create(root, {
106
      type: "words",
107
      wordsClass: "wipe-word",
108
      // Re-splits when line wrapping changes; the tween returned from onSplit
109
      // is killed and rebuilt against the new words.
110
      autoSplit: true,
111
      onSplit: (self) =>
112
        gsap.fromTo(
113
          self.words,
114
          { opacity: dim },
115
          {
116
            opacity: 1,
117
            ease: "none",
118
            duration: fade,
119
            stagger,
120
            scrollTrigger: { trigger: root, start, end, scrub: true },
121
          },
122
        ),
123
    });
124

125
    // The words are dimmed individually now (fromTo renders immediately), so
126
    // the container goes back to full strength without a flash.
127
    root.setAttribute(STATE, "split");
128
  };
129

130
  // Splitting before the web font lands would measure the fallback and wrap
131
  // words onto the wrong lines.
132
  document.fonts.ready.then(build);
133

134
  const cleanUp = () => {
135
    cancelled = true;
136
    // Reverting also kills the tween and its ScrollTrigger.
137
    split?.revert();
138
    split = undefined;
139
    root.removeAttribute(STATE);
140
    active.delete(root);
141
  };
142
  active.set(root, cleanUp);
143
  return cleanUp;
144
}
145

146
/** Sets up every `[data-word-wipe]` inside `scope`. Returns one function that undoes them all. */
147
export function initWordWipes(scope: ParentNode = document): () => void {
148
  const cleanUps = Array.from(scope.querySelectorAll<HTMLElement>("[data-word-wipe]"), (root) =>
149
    initWordWipe(root),
150
  );
151
  return () => cleanUps.forEach((cleanUp) => cleanUp());
152
}

Goes in src/scripts/word-wipe.ts

1
/*
2
 * Structural CSS for word wipe. Load it in the head, not from the script:
3
 * it dims the text before the wipe takes over, and a stylesheet added when
4
 * the script runs lands after first paint, which flashes fully lit text that
5
 * then drops to dim.
6
 *
7
 * Neither state is set without the script, so no JavaScript means text at full
8
 * strength rather than text stuck faint.
9
 */
10
[data-word-wipe-state="pending"] {
11
  opacity: var(--word-wipe-dim, 0.1);
12
}
13

14
[data-word-wipe-state="split"] {
15
  opacity: 1;
16
}

Goes in src/styles/word-wipe.css

Files

1
/**
2
 * Word wipe: the script for the HTML and Astro versions. Load `word-wipe.css`
3
 * in the head as well.
4
 *
5
 *   <div data-word-wipe data-word-wipe-dim="0.15">
6
 *     <h2>Every word lights up as you scroll.</h2>
7
 *   </div>
8
 *
9
 *   import { initWordWipes } from "./word-wipe";
10
 *   initWordWipes(); // every [data-word-wipe] on the page
11
 *
12
 * Text reads in word by word as you scroll, each word lifting from faint to
13
 * fully opaque. The wipe is scrubbed: it starts when the text enters from the
14
 * bottom and finishes as it settles into the upper half of the viewport, so
15
 * scrolling back up rewinds it. Words are staggered first to last, and each
16
 * fades over a slice of the scroll rather than snapping.
17
 *
18
 * Attributes, each also an option to `initWordWipe` (the option wins):
19
 *   data-word-wipe-dim            Resting opacity of an unlit word. Default 0.1.
20
 *   data-word-wipe-stagger        Seconds between words. Default 0.12.
21
 *   data-word-wipe-fade           Seconds each word takes to light up. Default 0.45.
22
 *   data-word-wipe-trigger-start  ScrollTrigger start. Default "top 90%".
23
 *   data-word-wipe-trigger-end    ScrollTrigger end. Default "bottom 45%".
24
 *
25
 * Set by the script: data-word-wipe-state is "pending" while the script waits
26
 * for fonts, then "split" once the words exist.
27
 *
28
 * Custom property: --word-wipe-dim on the element wins over every dim setting,
29
 * so a theme can set the resting opacity everywhere at once.
30
 *
31
 * Requires `word-wipe.css` in the head. It dims the text before the split, and
32
 * a stylesheet added by the script would land after first paint, which flashes
33
 * fully lit text that then drops to dim.
34
 *
35
 * Splitting waits for `document.fonts.ready`. Splitting against the fallback
36
 * font measures the wrong word widths, and words wrap onto the wrong lines once
37
 * the web font arrives. SplitText mirrors the original text into an
38
 * `aria-label`, so screen readers do not read the split spans word by word.
39
 *
40
 * Honours prefers-reduced-motion: the text is never split and stays fully lit.
41
 *
42
 * Calling init twice on the same element does nothing. Each call returns a
43
 * clean-up function that undoes it, for pages that swap content in and out.
44
 */
45

46
import { gsap } from "gsap";
47
import { ScrollTrigger } from "gsap/ScrollTrigger";
48
import { SplitText } from "gsap/SplitText";
49

50
gsap.registerPlugin(ScrollTrigger, SplitText);
51

52
export interface WordWipeOptions {
53
  /** Resting opacity of an unlit word. */
54
  dim?: number;
55
  /** Seconds between one word starting and the next. */
56
  stagger?: number;
57
  /** Seconds a single word takes to light up. */
58
  fade?: number;
59
  /** ScrollTrigger start position, such as "top 80%". */
60
  triggerStart?: string;
61
  /** ScrollTrigger end position, such as "bottom 55%". */
62
  triggerEnd?: string;
63
}
64

65
const STATE = "data-word-wipe-state";
66
const active = new WeakMap<HTMLElement, () => void>();
67

68
/** A finite number from an attribute, or undefined. */
69
function numberAttribute(root: HTMLElement, name: string): number | undefined {
70
  const value = parseFloat(root.getAttribute(name) ?? "");
71
  return Number.isFinite(value) ? value : undefined;
72
}
73

74
/** Sets up one word wipe. Returns a function that undoes it. */
75
export function initWordWipe(root: HTMLElement, options: WordWipeOptions = {}): () => void {
76
  const existing = active.get(root);
77
  if (existing) return existing;
78

79
  if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return () => {};
80

81
  let split: SplitText | undefined;
82
  let cancelled = false;
83

84
  // Dims the whole block right away; the words take the dim over once they
85
  // exist. Marked only now, so text is never left faint by a stylesheet that
86
  // loaded without the script that lights it.
87
  root.setAttribute(STATE, "pending");
88

89
  const build = () => {
90
    // Cleaned up while waiting on fonts.
91
    if (cancelled) return;
92

93
    // Custom property, then option, then attribute, then default.
94
    const fromVar = parseFloat(getComputedStyle(root).getPropertyValue("--word-wipe-dim"));
95
    const dim = Number.isFinite(fromVar)
96
      ? fromVar
97
      : (options.dim ?? numberAttribute(root, "data-word-wipe-dim") ?? 0.1);
98
    const stagger = options.stagger ?? numberAttribute(root, "data-word-wipe-stagger") ?? 0.12;
99
    const fade = options.fade ?? numberAttribute(root, "data-word-wipe-fade") ?? 0.45;
100
    const start =
101
      options.triggerStart ?? root.getAttribute("data-word-wipe-trigger-start") ?? "top 90%";
102
    const end =
103
      options.triggerEnd ?? root.getAttribute("data-word-wipe-trigger-end") ?? "bottom 45%";
104

105
    split = SplitText.create(root, {
106
      type: "words",
107
      wordsClass: "wipe-word",
108
      // Re-splits when line wrapping changes; the tween returned from onSplit
109
      // is killed and rebuilt against the new words.
110
      autoSplit: true,
111
      onSplit: (self) =>
112
        gsap.fromTo(
113
          self.words,
114
          { opacity: dim },
115
          {
116
            opacity: 1,
117
            ease: "none",
118
            duration: fade,
119
            stagger,
120
            scrollTrigger: { trigger: root, start, end, scrub: true },
121
          },
122
        ),
123
    });
124

125
    // The words are dimmed individually now (fromTo renders immediately), so
126
    // the container goes back to full strength without a flash.
127
    root.setAttribute(STATE, "split");
128
  };
129

130
  // Splitting before the web font lands would measure the fallback and wrap
131
  // words onto the wrong lines.
132
  document.fonts.ready.then(build);
133

134
  const cleanUp = () => {
135
    cancelled = true;
136
    // Reverting also kills the tween and its ScrollTrigger.
137
    split?.revert();
138
    split = undefined;
139
    root.removeAttribute(STATE);
140
    active.delete(root);
141
  };
142
  active.set(root, cleanUp);
143
  return cleanUp;
144
}
145

146
/** Sets up every `[data-word-wipe]` inside `scope`. Returns one function that undoes them all. */
147
export function initWordWipes(scope: ParentNode = document): () => void {
148
  const cleanUps = Array.from(scope.querySelectorAll<HTMLElement>("[data-word-wipe]"), (root) =>
149
    initWordWipe(root),
150
  );
151
  return () => cleanUps.forEach((cleanUp) => cleanUp());
152
}

Goes in src/scripts/word-wipe.tsFrom the HTML core

1
/*
2
 * Structural CSS for word wipe. Load it in the head, not from the script:
3
 * it dims the text before the wipe takes over, and a stylesheet added when
4
 * the script runs lands after first paint, which flashes fully lit text that
5
 * then drops to dim.
6
 *
7
 * Neither state is set without the script, so no JavaScript means text at full
8
 * strength rather than text stuck faint.
9
 */
10
[data-word-wipe-state="pending"] {
11
  opacity: var(--word-wipe-dim, 0.1);
12
}
13

14
[data-word-wipe-state="split"] {
15
  opacity: 1;
16
}

Goes in src/styles/word-wipe.cssFrom the HTML core

1
---
2
/**
3
 * Word wipe for Astro: the HTML version as a component. Props map one to one
4
 * onto the data attributes; see src/scripts/word-wipe.ts for the full API.
5
 *
6
 *   <WordWipe dim={0.15}><h2>Every word lights up as you scroll.</h2></WordWipe>
7
 */
8
import type { HTMLAttributes, HTMLTag } from "astro/types";
9
// Imported in frontmatter so Astro bundles it into the head, before first paint.
10
import "../styles/word-wipe.css";
11

12
interface Props extends HTMLAttributes<"div"> {
13
  /** Element to render. */
14
  as?: HTMLTag;
15
  /** Resting opacity of a word that has not been reached yet. */
16
  dim?: number;
17
  /** Seconds between successive words lighting up. */
18
  stagger?: number;
19
  /** Seconds a single word takes to light up. */
20
  fade?: number;
21
  /** ScrollTrigger start position, such as "top 80%". */
22
  triggerStart?: string;
23
  /** ScrollTrigger end position, such as "bottom 55%". */
24
  triggerEnd?: string;
25
}
26

27
const { as: Tag = "div", dim, stagger, fade, triggerStart, triggerEnd, ...rest } = Astro.props;
28
const text = (value: number | undefined) => (value === undefined ? undefined : String(value));
29
---
30

31
<Tag
32
  data-word-wipe
33
  data-word-wipe-dim={text(dim)}
34
  data-word-wipe-stagger={text(stagger)}
35
  data-word-wipe-fade={text(fade)}
36
  data-word-wipe-trigger-start={triggerStart}
37
  data-word-wipe-trigger-end={triggerEnd}
38
  {...rest}
39
>
40
  <slot />
41
</Tag>
42

43
<script>
44
  import { initWordWipes } from "../scripts/word-wipe";
45

46
  // Safe to call again: each element is only set up once.
47
  initWordWipes();
48
  document.addEventListener("astro:page-load", () => initWordWipes());
49
</script>

Goes in src/components/WordWipe.astro

Files

1
/**
2
 * Word wipe for React: a native version, not a wrapper around the HTML script.
3
 * It shares `word-wipe.css` with the other versions, and not their script, so
4
 * it looks and moves the same way.
5
 *
6
 *   <WordWipe dim={0.15}><h2>Every word lights up as you scroll.</h2></WordWipe>
7
 *
8
 * Keep the children static. SplitText replaces the text nodes with its own
9
 * spans, so React must not change them afterwards. To change the text, give the
10
 * component a new `key`.
11
 *
12
 * It renders the same on the server and in the browser. Everything that needs
13
 * the browser happens in one effect, and the state attribute is set through a
14
 * ref, so nothing re-renders.
15
 */
16
import { useEffect, useRef, type ElementType, type HTMLAttributes } from "react";
17
import { gsap } from "gsap";
18
import { ScrollTrigger } from "gsap/ScrollTrigger";
19
import { SplitText } from "gsap/SplitText";
20
import "../styles/word-wipe.css";
21

22
interface WordWipeProps extends HTMLAttributes<HTMLElement> {
23
  /** Element to render. */
24
  as?: ElementType;
25
  /** Resting opacity of a word that has not been reached yet. */
26
  dim?: number;
27
  /** Seconds between successive words lighting up. */
28
  stagger?: number;
29
  /** Seconds a single word takes to light up. */
30
  fade?: number;
31
  /** ScrollTrigger start position, such as "top 80%". */
32
  triggerStart?: string;
33
  /** ScrollTrigger end position, such as "bottom 55%". */
34
  triggerEnd?: string;
35
}
36

37
const STATE = "data-word-wipe-state";
38

39
export function WordWipe({
40
  as: Tag = "div",
41
  dim = 0.1,
42
  stagger = 0.12,
43
  fade = 0.45,
44
  triggerStart = "top 90%",
45
  triggerEnd = "bottom 45%",
46
  children,
47
  ...rest
48
}: WordWipeProps) {
49
  const ref = useRef<HTMLElement>(null);
50

51
  useEffect(() => {
52
    const root = ref.current;
53
    if (!root) return;
54
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
55

56
    gsap.registerPlugin(ScrollTrigger, SplitText);
57

58
    let split: SplitText | undefined;
59
    let cancelled = false;
60

61
    // Dims the block right away; the words take the dim over once they exist.
62
    root.setAttribute(STATE, "pending");
63

64
    // Splitting before the web font lands would measure the fallback and wrap
65
    // words onto the wrong lines.
66
    document.fonts.ready.then(() => {
67
      // Cleaned up while waiting on fonts, such as by Strict Mode.
68
      if (cancelled) return;
69

70
      // The custom property beats the prop, as it does in the other versions.
71
      const fromVar = parseFloat(getComputedStyle(root).getPropertyValue("--word-wipe-dim"));
72
      const from = Number.isFinite(fromVar) ? fromVar : dim;
73

74
      split = SplitText.create(root, {
75
        type: "words",
76
        wordsClass: "wipe-word",
77
        // Re-splits when line wrapping changes; the tween returned from onSplit
78
        // is killed and rebuilt against the new words.
79
        autoSplit: true,
80
        onSplit: (self) =>
81
          gsap.fromTo(
82
            self.words,
83
            { opacity: from },
84
            {
85
              opacity: 1,
86
              ease: "none",
87
              duration: fade,
88
              stagger,
89
              scrollTrigger: {
90
                trigger: root,
91
                start: triggerStart,
92
                end: triggerEnd,
93
                scrub: true,
94
              },
95
            },
96
          ),
97
      });
98

99
      root.setAttribute(STATE, "split");
100
    });
101

102
    return () => {
103
      cancelled = true;
104
      // Reverting also kills the tween and its ScrollTrigger.
105
      split?.revert();
106
      root.removeAttribute(STATE);
107
    };
108
  }, [dim, stagger, fade, triggerStart, triggerEnd]);
109

110
  return (
111
    <Tag ref={ref} data-word-wipe="" {...rest}>
112
      {children}
113
    </Tag>
114
  );
115
}

Goes in src/components/WordWipe.tsx

1
/*
2
 * Structural CSS for word wipe. Load it in the head, not from the script:
3
 * it dims the text before the wipe takes over, and a stylesheet added when
4
 * the script runs lands after first paint, which flashes fully lit text that
5
 * then drops to dim.
6
 *
7
 * Neither state is set without the script, so no JavaScript means text at full
8
 * strength rather than text stuck faint.
9
 */
10
[data-word-wipe-state="pending"] {
11
  opacity: var(--word-wipe-dim, 0.1);
12
}
13

14
[data-word-wipe-state="split"] {
15
  opacity: 1;
16
}

Goes in src/styles/word-wipe.css

API

Shared by every variant. Wrapper props use the same names in camelCase.

Attributes

Name	Type	Default	Description
`data-word-wipe`			Marks the element to wipe. It can be any element, and the text inside is split into words.
`data-word-wipe-dim`	number	`0.1`	Opacity of a word before it lights up. Raise it for body copy that still has to read as text. The Astro and React versions take a `dim` prop.
`data-word-wipe-stagger`	seconds	`0.12`	Delay between one word starting and the next. Larger values spread the wipe over more of the scroll. The Astro and React versions take a `stagger` prop.
`data-word-wipe-fade`	seconds	`0.45`	How long a single word takes to reach full strength. The Astro and React versions take a `fade` prop.
`data-word-wipe-trigger-start`	ScrollTrigger start	`"top 90%"`	Where the wipe begins, as the element enters from the bottom. The Astro and React versions take a `triggerStart` prop.
`data-word-wipe-trigger-end`	ScrollTrigger end	`"bottom 45%"`	Where the wipe finishes. The whole animation is scrubbed between start and end, so scrolling back up rewinds it. The Astro and React versions take a `triggerEnd` prop.
`data-word-wipe-state`	"pending" \| "split"		Set by the script, not by you. It is "pending" while the script waits for fonts, then "split" once the words exist. The CSS uses it to dim the text, and you can style it too.

Custom properties

Name	Type	Default	Description
`--word-wipe-dim`	number	`0.1`	Wins over the dim setting, so a theme can set the resting opacity everywhere at once.

Accessibility and SEO

Accessibility: SplitText copies the original text into an aria-label, so screen readers hear the whole sentence. Reduced motion skips the effect and the text stays fully lit. The wipe is scroll driven, so it never moves on its own. The page still chooses the heading or paragraph inside. It also has to check that the dim state (opacity: 0.1 by default) is only ever a transition, never where text people need to read comes to rest.
SEO: Text is in the HTML and fully readable without JavaScript. The dim state starts only when the script runs. Chrome does not count content at low opacity as painted. The page still has to keep this off the largest above-the-fold text, or LCP moves later.

Notes

GSAP 3.13 and later ship SplitText and ScrollTrigger free, so gsap is the only dependency.

The split waits for document.fonts.ready. Splitting against the fallback font measures the wrong word widths and leaves words wrapped onto the wrong lines once the web font arrives.

The HTML and Astro versions share one small script, initWordWipes(), found by the data-word-wipe attribute. The React version is its own implementation, so it follows React’s rules rather than wrapping the script. All three share word-wipe.css.

Install

Setup

Install

Setup

Install

Setup

Demo

Files

Files

Files

API

Attributes

Custom properties

Accessibility and SEO

Notes