feat(effects): split text without motion-plus

package.json

@@ -46,7 +46,6 @@
     "jose": "^6.1.2",
     "monaco-editor": "^0.55.1",
     "motion": "^12.6.3",
-    "motion-plus": "^1.5.1",
     "next": "15.5.10",
     "next-intl": "^4.6.1",
     "react": "^19.2.0",

src/app/components/HeadingReveal/HeadingReveal.tsx

@@ -1,10 +1,8 @@
 "use client";
 
-import { animate, stagger, anticipate } from "motion";
-import { splitText } from "motion-plus";
-import { useEffect, useRef } from "react";
 import classNames from "classnames";
-import { useSplitLocaleBy } from "@/i18n/hooks";
+import { useTokenRevealAnimation } from "@/hooks/useTokenRevealAnimation";
+import { type TextSplitBy } from "@/lib/text/segmentText";
 
 export default function HeadingReveal({
   text,
@@ -14,6 +12,7 @@ export default function HeadingReveal({
   cursorColor = "#00FFFF",
   baseDelay = 0,
   splitBy,
+  locale,
   speed = 0.25,
 }: {
   text: string;
@@ -22,65 +21,39 @@ export default function HeadingReveal({
   color?: string;
   cursorColor?: string;
   baseDelay?: number;
-  splitBy?: "words" | "chars";
+  splitBy?: TextSplitBy;
+  locale?: string | string[];
   speed?: number;
 }) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const localeSegmentation = useSplitLocaleBy();
-  splitBy ??= localeSegmentation;
+  const resolvedSplitBy = splitBy ?? "words";
 
-  useEffect(() => {
-    document.fonts.ready.then(() => {
-      if (!containerRef.current) return;
+  const { containerRef, tokens, getTokenRef } = useTokenRevealAnimation({
+    text,
+    splitBy: resolvedSplitBy,
+    locale,
+    color,
+    cursorColor,
+    baseDelay,
+    speed,
+  });
 
-      // Hide the container until the fonts are loaded
-      containerRef.current.style.visibility = "visible";
+  const HeadingTag = headingLevel;
 
-      const { words, chars } = splitText(
-        containerRef.current.querySelector(headingLevel)!
-      );
-
-      // Animate the words in the h1
-      animate(
-        splitBy === "words" ? words : chars,
-        {
-          backgroundColor: [
-            "rgba(255,255,255,0)",
-            "rgba(255,255,255,0)",
-            cursorColor,
-            cursorColor,
-            cursorColor,
-            "rgba(255,255,255,0)",
-          ],
-          color: [
-            "rgba(255,255,255,0)",
-            "rgba(255,255,255,0)",
-            cursorColor,
-            cursorColor,
-            cursorColor,
-            color,
-          ],
-        },
-        {
-          ease: anticipate,
-          duration: speed,
-          delay: stagger(speed / 2, { startDelay: baseDelay }),
-        }
-      );
-    });
-  }, []);
+  const headingContent = tokens.map((token, index) => (
+    <span
+      key={`${index}-${token.text}`}
+      aria-hidden="true"
+      ref={getTokenRef(index)}
+    >
+      {token.text}
+    </span>
+  ));
 
   return (
     <div ref={containerRef}>
-      {headingLevel === "h1" && (
-        <h1 className={classNames("h1", className)}>{text}</h1>
-      )}
-      {headingLevel === "h2" && (
-        <h2 className={classNames("h2", className)}>{text}</h2>
-      )}
-      {headingLevel === "h3" && (
-        <h3 className={classNames("h3", className)}>{text}</h3>
-      )}
+      <HeadingTag className={classNames(headingLevel, className)} aria-label={text}>
+        {headingContent}
+      </HeadingTag>
     </div>
   );
 }

src/hooks/useTokenRevealAnimation.ts

@@ -0,0 +1,106 @@
+import { animate, anticipate, stagger } from "motion";
+import { useEffect, useMemo, useRef, type RefObject } from "react";
+import {
+  segmentText,
+  type SegmentedTextToken,
+  type TextSplitBy,
+} from "@/lib/text/segmentText";
+
+type UseTokenRevealAnimationProps = {
+  text: string;
+  splitBy: TextSplitBy;
+  locale?: string | string[];
+  color: string;
+  cursorColor: string;
+  baseDelay: number;
+  speed: number;
+};
+
+type UseTokenRevealAnimationResult = {
+  containerRef: RefObject<HTMLDivElement | null>;
+  tokens: SegmentedTextToken[];
+  getTokenRef: (index: number) => (element: HTMLSpanElement | null) => void;
+};
+
+export function useTokenRevealAnimation({
+  text,
+  splitBy,
+  locale,
+  color,
+  cursorColor,
+  baseDelay,
+  speed,
+}: UseTokenRevealAnimationProps): UseTokenRevealAnimationResult {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const tokenRefs = useRef<(HTMLSpanElement | null)[]>([]);
+  const tokens = useMemo(
+    () => segmentText(text, splitBy, locale),
+    [text, splitBy, locale]
+  );
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    let cancelled = false;
+    let controls: ReturnType<typeof animate> | undefined;
+    const fontsReady =
+      "fonts" in document ? document.fonts.ready : Promise.resolve();
+
+    fontsReady.then(() => {
+      if (cancelled || !containerRef.current) return;
+
+      containerRef.current.style.visibility = "visible";
+
+      const targets = tokens
+        .map((token, index) =>
+          token.shouldAnimate ? tokenRefs.current[index] : null
+        )
+        .filter((element): element is HTMLSpanElement => Boolean(element));
+
+      if (targets.length === 0) return;
+
+      controls = animate(
+        targets,
+        {
+          backgroundColor: [
+            "rgba(255,255,255,0)",
+            "rgba(255,255,255,0)",
+            cursorColor,
+            cursorColor,
+            cursorColor,
+            "rgba(255,255,255,0)",
+          ],
+          color: [
+            "rgba(255,255,255,0)",
+            "rgba(255,255,255,0)",
+            cursorColor,
+            cursorColor,
+            cursorColor,
+            color,
+          ],
+        },
+        {
+          ease: anticipate,
+          duration: speed,
+          delay: stagger(speed / 2, { startDelay: baseDelay }),
+        }
+      );
+    });
+
+    return () => {
+      cancelled = true;
+      controls?.stop();
+    };
+  }, [tokens, baseDelay, speed, cursorColor, color]);
+
+  const getTokenRef = (index: number) => (element: HTMLSpanElement | null) => {
+    tokenRefs.current[index] = element;
+  };
+
+  return {
+    containerRef,
+    tokens,
+    getTokenRef,
+  };
+}

src/lib/text/segmentText.ts

@@ -0,0 +1,55 @@
+export type TextSplitBy = "words" | "chars";
+
+export type SegmentedTextToken = {
+  text: string;
+  shouldAnimate: boolean;
+};
+
+function segmentWithIntl(
+  text: string,
+  splitBy: TextSplitBy,
+  locale?: string | string[]
+): SegmentedTextToken[] {
+  const segmenter = new Intl.Segmenter(locale, {
+    granularity: splitBy === "words" ? "word" : "grapheme",
+  });
+
+  return Array.from(segmenter.segment(text)).map((segment) => ({
+    text: segment.segment,
+    shouldAnimate:
+      splitBy === "words"
+        ? (segment.isWordLike ?? /\S/.test(segment.segment))
+        : /\S/.test(segment.segment),
+  }));
+}
+
+function segmentWithFallback(
+  text: string,
+  splitBy: TextSplitBy
+): SegmentedTextToken[] {
+  if (splitBy === "words") {
+    return text.split(/(\s+)/).map((part) => ({
+      text: part,
+      shouldAnimate: /\S/.test(part),
+    }));
+  }
+
+  return Array.from(text).map((part) => ({
+    text: part,
+    shouldAnimate: /\S/.test(part),
+  }));
+}
+
+export function segmentText(
+  text: string,
+  splitBy: TextSplitBy,
+  locale?: string | string[]
+): SegmentedTextToken[] {
+  const hasSegmenter = typeof Intl !== "undefined" && "Segmenter" in Intl;
+
+  if (hasSegmenter) {
+    return segmentWithIntl(text, splitBy, locale);
+  }
+
+  return segmentWithFallback(text, splitBy);
+}