How to animate Skia text font weight ?

[1pharaxh]

Hi I have been trying to replicate this text animation
https://www.fancycomponents.dev/docs/components/text/breathing-text

with react native skia

but I found it is kinda hard to set the font weight based on reanimated 3 useSharedValue hook and with what I was able to do, the results are very choppy to say the least

screenrecord.mov

here is my code

import React, { memo, useEffect, useState } from "react";
import {
  Easing,
  useSharedValue,
  withTiming,
  withRepeat,
  runOnJS,
  useDerivedValue,
} from "react-native-reanimated";
import { matchFont, Text, useFonts } from "@shopify/react-native-skia";

type FontWeightTextProps = {
  xCord: number;
  yCord: number;
  text: string;
  fontSize?: number;
};

const FontWeightText = memo((props: FontWeightTextProps) => {
  const { xCord, yCord, text, fontSize = 32 } = props;

  const fontMgr = useFonts({
    OverusedGrotesk: [
      require("../../../assets/fonts/Overused-Grotesk/OverusedGrotesk-Black.ttf"),
      require("../../../assets/fonts/Overused-Grotesk/OverusedGrotesk-BlackItalic.ttf"),
      require("../../../assets/fonts/Overused-Grotesk/OverusedGrotesk-Bold.ttf"),
      require("../../../assets/fonts/Overused-Grotesk/OverusedGrotesk-BoldItalic.ttf"),
      require("../../../assets/fonts/Overused-Grotesk/OverusedGrotesk-Book.ttf"),
      require("../../../assets/fonts/Overused-Grotesk/OverusedGrotesk-BookItalic.ttf"),

      require("../../../assets/fonts/Overused-Grotesk/OverusedGrotesk-ExtraBold.ttf"),
      require("../../../assets/fonts/Overused-Grotesk/OverusedGrotesk-ExtraBoldItalic.ttf"),
      require("../../../assets/fonts/Overused-Grotesk/OverusedGrotesk-Italic.ttf"),
      require("../../../assets/fonts/Overused-Grotesk/OverusedGrotesk-Light.ttf"),
      require("../../../assets/fonts/Overused-Grotesk/OverusedGrotesk-LightItalic.ttf"),
      require("../../../assets/fonts/Overused-Grotesk/OverusedGrotesk-Medium.ttf"),
      require("../../../assets/fonts/Overused-Grotesk/OverusedGrotesk-MediumItalic.ttf"),

      require("../../../assets/fonts/Overused-Grotesk/OverusedGrotesk-Roman.ttf"),
      require("../../../assets/fonts/Overused-Grotesk/OverusedGrotesk-SemiBold.ttf"),
      require("../../../assets/fonts/Overused-Grotesk/OverusedGrotesk-SemiBoldItalic.ttf"),
    ],
  });

  const boldIndex = useSharedValue(0);
  // Local state to trigger re-renders.
  const [currentBold, setCurrentBold] = useState(0);

  useEffect(() => {
    boldIndex.value = withRepeat(
      withTiming(text.length - 1, {
        duration: 2000,
        easing: Easing.linear,
      }),
      -1,
      false
    );
  }, [text]);

  // Update local state from the shared value.
  useDerivedValue(() => {
    runOnJS(setCurrentBold)(Math.round(boldIndex.get()));
  }, [boldIndex]);

  let currentX = xCord;

  return (
    <>
      {text.split("").map((char, index) => {
        const isBold = index === currentBold;

        const fontStyle = {
          fontFamily: "OverusedGrotesk",
          fontWeight: isBold ? "600" : "300",
          fontStyle: isBold ? "italic" : "normal",
          fontSize: fontSize,
        } as const;

        // Get the matching font.
        const font = fontMgr ? matchFont(fontStyle, fontMgr) : null;
        const charWidth = font ? font.getTextWidth(char) : fontSize * 0.5;
        const charXPosition = currentX;
        currentX += charWidth;

        return (
          <Text
            key={index}
            font={font}
            text={char}
            x={charXPosition}
            y={yCord}
            opacity={0.9}
          />
        );
      })}
    </>
  );
});

export default FontWeightText;

Any help is appreciated. Thanks a bunch

[wcandillon]

This is a very cool example. Here you want to switch the font but without triggering a new react render. The font property should be a reanimated value. Did you try that? Maybe there is another way to do this with variable font widths? I don't really know about them.

…

On Sun, Mar 23, 2025 at 1:37 AM Akarshan Mishra ***@***.***> wrote: Hi I have been trying to replicate this text animation https://www.fancycomponents.dev/docs/components/text/breathing-text with react native skia but I found it is kinda hard to set the font weight based on reanimated 3 useSharedValue hook and with what I was able to do, the results are very choppy to say the least https://github.com/user-attachments/assets/b5e59c5c-039d-4881-997a-faa0849ec6b8 here is my code import React, { memo, useEffect, useState } from "react"; import { Easing, useSharedValue, withTiming, withRepeat, runOnJS, useDerivedValue, } from "react-native-reanimated"; import { matchFont, Text, useFonts } from ***@***.***/react-native-skia"; type FontWeightTextProps = { xCord: number; yCord: number; text: string; fontSize?: number; }; const FontWeightText = memo((props: FontWeightTextProps) => { const { xCord, yCord, text, fontSize = 32 } = props; const fontMgr = useFonts({ OverusedGrotesk: [ require("../../../assets/fonts/Overused-Grotesk/OverusedGrotesk-Black.ttf"), require("../../../assets/fonts/Overused-Grotesk/OverusedGrotesk-BlackItalic.ttf"), require("../../../assets/fonts/Overused-Grotesk/OverusedGrotesk-Bold.ttf"), require("../../../assets/fonts/Overused-Grotesk/OverusedGrotesk-BoldItalic.ttf"), require("../../../assets/fonts/Overused-Grotesk/OverusedGrotesk-Book.ttf"), require("../../../assets/fonts/Overused-Grotesk/OverusedGrotesk-BookItalic.ttf"), require("../../../assets/fonts/Overused-Grotesk/OverusedGrotesk-ExtraBold.ttf"), require("../../../assets/fonts/Overused-Grotesk/OverusedGrotesk-ExtraBoldItalic.ttf"), require("../../../assets/fonts/Overused-Grotesk/OverusedGrotesk-Italic.ttf"), require("../../../assets/fonts/Overused-Grotesk/OverusedGrotesk-Light.ttf"), require("../../../assets/fonts/Overused-Grotesk/OverusedGrotesk-LightItalic.ttf"), require("../../../assets/fonts/Overused-Grotesk/OverusedGrotesk-Medium.ttf"), require("../../../assets/fonts/Overused-Grotesk/OverusedGrotesk-MediumItalic.ttf"), require("../../../assets/fonts/Overused-Grotesk/OverusedGrotesk-Roman.ttf"), require("../../../assets/fonts/Overused-Grotesk/OverusedGrotesk-SemiBold.ttf"), require("../../../assets/fonts/Overused-Grotesk/OverusedGrotesk-SemiBoldItalic.ttf"), ], }); const boldIndex = useSharedValue(0); // Local state to trigger re-renders. const [currentBold, setCurrentBold] = useState(0); useEffect(() => { boldIndex.value = withRepeat( withTiming(text.length - 1, { duration: 2000, easing: Easing.linear, }), -1, false ); }, [text]); // Update local state from the shared value. useDerivedValue(() => { runOnJS(setCurrentBold)(Math.round(boldIndex.get())); }, [boldIndex]); let currentX = xCord; return ( <> {text.split("").map((char, index) => { const isBold = index === currentBold; const fontStyle = { fontFamily: "OverusedGrotesk", fontWeight: isBold ? "600" : "300", fontStyle: isBold ? "italic" : "normal", fontSize: fontSize, } as const; // Get the matching font. const font = fontMgr ? matchFont(fontStyle, fontMgr) : null; const charWidth = font ? font.getTextWidth(char) : fontSize * 0.5; const charXPosition = currentX; currentX += charWidth; return ( <Text key={index} font={font} text={char} x={charXPosition} y={yCord} opacity={0.9} /> ); })} </> ); }); export default FontWeightText; Any help is appreciated. Thanks a bunch — Reply to this email directly, view it on GitHub <#3046>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACKXVUSTUL7LKZMJVEXSLL2VX65HAVCNFSM6AAAAABZSNO2XGVHI2DSMVQWIX3LMV43ERDJONRXK43TNFXW4OZYGEYTQMRTG4> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[1pharaxh]

Hi I tried changing font properties by passing a reanimated useAnimatedStyle hook style but that never renders changing font weights.

I made the animation more fluid by doing interpolation and use thinner weights for surrounding text

ScreenRecording_03-24-2025_18-48-37_1.mov

import React, { memo, useEffect, useState } from "react";
import {
  Easing,
  useSharedValue,
  withTiming,
  withRepeat,
  runOnJS,
  useDerivedValue,
  interpolate,
  Extrapolate,
  Extrapolation,
  withSpring,
  ReduceMotion,
} from "react-native-reanimated";
import { matchFont, Text, useFonts } from "@shopify/react-native-skia";
import { useColorScheme } from "~/lib/useColorScheme";

type VariableFontAnimateTextProps = {
  xCord: number;
  yCord: number;
  text: string;
  fontSize?: number;
  reverse?: boolean;
  playOnce?: boolean;
  comeback?: boolean;
  textColor?: string | undefined;
};

const VariableFontAnimateText = memo((props: VariableFontAnimateTextProps) => {
  const {
    xCord,
    yCord,
    text,
    fontSize = 32,
    reverse = false,
    playOnce = false,
    comeback = false,
    textColor = undefined,
  } = props;

  const fontMgr = useFonts({
    OverusedGrotesk: [
      require("../../../assets/fonts/Overused-Grotesk/OverusedGrotesk-Black.ttf"),
      require("../../../assets/fonts/Overused-Grotesk/OverusedGrotesk-BlackItalic.ttf"),
      require("../../../assets/fonts/Overused-Grotesk/OverusedGrotesk-Bold.ttf"),
      require("../../../assets/fonts/Overused-Grotesk/OverusedGrotesk-BoldItalic.ttf"),
      require("../../../assets/fonts/Overused-Grotesk/OverusedGrotesk-Book.ttf"),
      require("../../../assets/fonts/Overused-Grotesk/OverusedGrotesk-BookItalic.ttf"),

      require("../../../assets/fonts/Overused-Grotesk/OverusedGrotesk-ExtraBold.ttf"),
      require("../../../assets/fonts/Overused-Grotesk/OverusedGrotesk-ExtraBoldItalic.ttf"),
      require("../../../assets/fonts/Overused-Grotesk/OverusedGrotesk-Italic.ttf"),
      require("../../../assets/fonts/Overused-Grotesk/OverusedGrotesk-Light.ttf"),
      require("../../../assets/fonts/Overused-Grotesk/OverusedGrotesk-LightItalic.ttf"),
      require("../../../assets/fonts/Overused-Grotesk/OverusedGrotesk-Medium.ttf"),
      require("../../../assets/fonts/Overused-Grotesk/OverusedGrotesk-MediumItalic.ttf"),

      require("../../../assets/fonts/Overused-Grotesk/OverusedGrotesk-Roman.ttf"),
      require("../../../assets/fonts/Overused-Grotesk/OverusedGrotesk-SemiBold.ttf"),
      require("../../../assets/fonts/Overused-Grotesk/OverusedGrotesk-SemiBoldItalic.ttf"),
    ],
  });

  const boldIndex = useSharedValue(reverse ? text.length : 0);
  // Local state to trigger re-renders.
  const [currentBold, setCurrentBold] = useState(0);

  const dependencies = [text, reverse, comeback, playOnce];

  useEffect(() => {
    // Reset animation
    boldIndex.value = reverse ? text.length : 0;
    setCurrentBold(reverse ? text.length : 0);

    // Create animation
    const animateSpring = withSpring(reverse ? 0 : text.length, {
      mass: 50,
      damping: 34,
      stiffness: 50,
      overshootClamping: true,
      restDisplacementThreshold: 0.5,
      restSpeedThreshold: 0.01,
      reduceMotion: ReduceMotion.Never,
    });

    // Apply animation - handle playOnce differently
    if (playOnce) {
      // Just apply the animation directly for playOnce
      boldIndex.value = animateSpring;
    } else {
      // For repeating animation, use withRepeat
      boldIndex.value = withRepeat(animateSpring, -1, comeback);
    }
  }, dependencies);

  useDerivedValue(() => {
    const interpolatedIndex = interpolate(
      boldIndex.value,
      [-1, text.length],
      [-1, text.length]
    );
    runOnJS(setCurrentBold)(interpolatedIndex);
  }, [boldIndex, ...dependencies]);

  // useEffect  but for reanimated values.  Update local state from the shared value.

  let currentX = xCord;

  const { colorScheme } = useColorScheme();

  return (
    <>
      {text.split("").map((char, index) => {
        const VariableFontAnimate = interpolate(
          index,
          [
            currentBold - 2,
            currentBold - 1,
            currentBold,
            currentBold + 1,
            currentBold + 2,
          ],
          [300, 500, 700, 500, 300], // Gradual weight changes
          Extrapolation.CLAMP
        );

        const fontStyleInText = interpolate(
          index,
          [
            currentBold - 2,
            currentBold - 1,
            currentBold,
            currentBold + 1,
            currentBold + 2,
          ],
          [0, 0, 1, 0, 0], // Gradual italic changes
          Extrapolation.CLAMP
        );

        const fontStyle = {
          fontFamily: "OverusedGrotesk",
          fontWeight: String(VariableFontAnimate) as
            | "300"
            | "400"
            | "500"
            | "700",
          fontStyle: fontStyleInText ? "italic" : "normal",
          fontSize: fontSize,
        } as const;

        // Get the matching font.
        const font = fontMgr ? matchFont(fontStyle, fontMgr) : null;
        const charWidth = font ? font.getTextWidth(char) : fontSize * 0.5;
        const charXPosition = currentX;
        currentX += charWidth;

        return (
          <Text
            key={index}
            font={font}
            text={char}
            x={charXPosition}
            color={
              textColor ?? colorScheme === "dark"
                ? "rgba(242.25, 242.25, 247.35, 1)"
                : "rgba(43.35, 43.35, 46.35, 1)"
            }
            y={yCord}
            opacity={0.9}
          />
        );
      })}
    </>
  );
});

export default VariableFontAnimateText;

[Glazzes]

You could render each letter as an SVG and animate the stroke width of each letter, as well as skew them a little bit.

[1pharaxh]

That sounds like a good approach. But this would mean I need all alphabets as SVGs ?

[Glazzes]

I can't recall how it's done, but you can generate a path out of a string, so you could generate each letter individually using Skia.