diff --git a/example/src/App.tsx b/example/src/App.tsx
index 216cbb04c9..4298fe44ae 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -28,6 +28,7 @@ import {
   Transitions,
   Stickers,
   FrostedCard,
+  SpeedTest,
 } from "./Examples";
 import { CI, Tests } from "./Tests";
 import { HomeScreen } from "./Home";
@@ -59,6 +60,7 @@ const linking: LinkingOptions<StackParamList> = {
       Transitions: "transitions",
       Stickers: "stickers",
       FrostedCard: "frosted-card",
+      SpeedTest: "speedtest",
     },
   },
   prefixes: ["rnskia://"],
@@ -146,6 +148,13 @@ const App = () => {
                 header: () => null,
               }}
             />
+            <Stack.Screen
+              name="SpeedTest"
+              component={SpeedTest}
+              options={{
+                header: () => null,
+              }}
+            />
             <Stack.Screen
               name="Glassmorphism"
               component={Glassmorphism}
diff --git a/example/src/Examples/SpeedTest/Header.tsx b/example/src/Examples/SpeedTest/Header.tsx
new file mode 100644
index 0000000000..68ebf7a910
--- /dev/null
+++ b/example/src/Examples/SpeedTest/Header.tsx
@@ -0,0 +1,43 @@
+/* eslint-disable max-len */
+import React from "react";
+import { View, StyleSheet, TouchableWithoutFeedback } from "react-native";
+import { useNavigation } from "@react-navigation/native";
+import { Canvas, Path } from "@shopify/react-native-skia";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+export const Header = () => {
+  const { goBack } = useNavigation();
+  const insets = useSafeAreaInsets();
+
+  const styles = StyleSheet.create({
+    container: {
+      position: "absolute",
+      top: insets.top,
+      left: insets.left,
+      zIndex: 1,
+    },
+  });
+
+  return (
+    <View style={styles.container}>
+      <TouchableWithoutFeedback onPress={goBack}>
+        <View
+          style={{
+            width: 48,
+            height: 48,
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+        >
+          <Canvas style={{ width: 32, height: 32 }}>
+            <Path
+              fillType="evenOdd"
+              path="M15.2677 7.39935C15.572 7.70363 15.5973 8.18122 15.3438 8.51439L15.2677 8.60143L8.71965 15.1494L25.3333 15.1504C25.8028 15.1504 26.1833 15.5309 26.1833 16.0004C26.1833 16.4337 25.8591 16.7913 25.4399 16.8438L25.3333 16.8504L8.71865 16.8494L15.2677 23.3993C15.5996 23.7313 15.5996 24.2695 15.2677 24.6014C14.9634 24.9057 14.4858 24.9311 14.1527 24.6775L14.0656 24.6014L6.06561 16.6014L6.04546 16.5806C6.03311 16.5674 6.02118 16.5538 6.00969 16.5398L5.98954 16.5144L6.06561 16.6014C6.03226 16.5681 6.00225 16.5326 5.9756 16.4955C5.96538 16.4812 5.95562 16.4667 5.9463 16.4518C5.93772 16.4383 5.92956 16.4244 5.92184 16.4104L5.92185 16.4103L5.91651 16.4006C5.91238 16.3929 5.90838 16.3851 5.90451 16.3773C5.89154 16.351 5.87977 16.3238 5.86942 16.2959C5.86635 16.2875 5.86318 16.2785 5.86017 16.2695C5.85112 16.2425 5.84349 16.2151 5.83723 16.1871C5.83424 16.1734 5.83159 16.1601 5.82926 16.1467C5.82559 16.126 5.82266 16.1043 5.82056 16.0824C5.81866 16.0622 5.81746 16.0425 5.81695 16.0229C5.81675 16.0159 5.81665 16.0082 5.81665 16.0004L5.81719 15.97C5.81783 15.952 5.81904 15.934 5.82083 15.916L5.81665 16.0004C5.81665 15.9478 5.82143 15.8963 5.83057 15.8464C5.83305 15.8332 5.83583 15.8198 5.83893 15.8066C5.85665 15.7302 5.88485 15.6575 5.92185 15.5905L5.92184 15.5904C5.92241 15.5893 5.92299 15.5883 5.92357 15.5872C5.93108 15.5738 5.93852 15.5612 5.9463 15.5488C5.95629 15.533 5.9668 15.5175 5.9778 15.5023C5.98808 15.488 5.99868 15.4743 6.00974 15.4609C6.02118 15.447 6.03311 15.4334 6.04546 15.4202C6.05192 15.4133 6.05869 15.4063 6.06561 15.3994L14.0656 7.39935C14.3976 7.0674 14.9357 7.0674 15.2677 7.39935Z"
+              color="white"
+            />
+          </Canvas>
+        </View>
+      </TouchableWithoutFeedback>
+    </View>
+  );
+};
diff --git a/example/src/Examples/SpeedTest/Slider.tsx b/example/src/Examples/SpeedTest/Slider.tsx
new file mode 100644
index 0000000000..9e1e1afc49
--- /dev/null
+++ b/example/src/Examples/SpeedTest/Slider.tsx
@@ -0,0 +1,104 @@
+import { StyleSheet, View, useWindowDimensions } from "react-native";
+import React from "react";
+import Animated, {
+  interpolate,
+  runOnJS,
+  useAnimatedReaction,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+
+interface Props {
+  onValueChange: (value: number) => void;
+  minValue: number;
+  maxValue: number;
+}
+
+const size = 32;
+
+const clamp = (value: number, lowerBound: number, upperBound: number) => {
+  "worklet";
+  return Math.min(Math.max(value, lowerBound), upperBound);
+};
+
+export const Slider: React.FC<Props> = ({
+  onValueChange,
+  minValue,
+  maxValue,
+}) => {
+  const { width } = useWindowDimensions();
+
+  const sliderWidth = width / 2;
+  const pickerR = size / 2;
+  const progressBarHeight = 3;
+
+  const translateX = useSharedValue(-pickerR);
+  const contextX = useSharedValue(0);
+  const scale = useSharedValue(1);
+
+  const styles = StyleSheet.create({
+    picker: {
+      position: "absolute",
+      width: size,
+      height: size,
+      borderRadius: pickerR,
+      backgroundColor: "white",
+    },
+    progressBar: {
+      height: progressBarHeight,
+      backgroundColor: "rgba(255,255,255,0.5)",
+      width: sliderWidth,
+    },
+  });
+
+  useAnimatedReaction(
+    () => translateX.value,
+    (value) => {
+      const progress = interpolate(
+        value,
+        [-pickerR, sliderWidth - pickerR],
+        [minValue, maxValue]
+      );
+
+      runOnJS(onValueChange)(progress);
+    }
+  );
+
+  const rPickerStyle = useAnimatedStyle(() => {
+    return {
+      transform: [
+        { translateX: translateX.value },
+        { translateY: -pickerR + progressBarHeight },
+        { scale: scale.value },
+      ],
+    };
+  }, []);
+
+  const gesture = Gesture.Pan()
+    .onBegin(() => {
+      scale.value = withTiming(1.2);
+      contextX.value = translateX.value;
+    })
+    .onUpdate((event) => {
+      clamp;
+      translateX.value = clamp(
+        contextX.value + event.translationX,
+        -pickerR,
+        sliderWidth - pickerR
+      );
+    })
+    .onFinalize(() => {
+      scale.value = withTiming(1);
+    });
+
+  return (
+    <View>
+      <Animated.View style={styles.progressBar} />
+      <GestureDetector gesture={gesture}>
+        <Animated.View style={[styles.picker, rPickerStyle]} />
+      </GestureDetector>
+    </View>
+  );
+};
diff --git a/example/src/Examples/SpeedTest/SpeedTest.tsx b/example/src/Examples/SpeedTest/SpeedTest.tsx
new file mode 100644
index 0000000000..85cf73abe8
--- /dev/null
+++ b/example/src/Examples/SpeedTest/SpeedTest.tsx
@@ -0,0 +1,352 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { StyleSheet, View, useWindowDimensions } from "react-native";
+import React, { useMemo } from "react";
+import type { SkTextStyle } from "@shopify/react-native-skia";
+import {
+  Canvas,
+  Skia,
+  Group,
+  Circle,
+  vec,
+  Path,
+  LinearGradient,
+  Paint,
+  BlurMask,
+  useFonts,
+  Paragraph,
+  TextAlign,
+  interpolate,
+  usePathValue,
+} from "@shopify/react-native-skia";
+import { useDerivedValue, useSharedValue } from "react-native-reanimated";
+
+import { Header } from "./Header";
+import { Slider } from "./Slider";
+
+const ticks = [0, 1, 5, 10, 20, 30, 50, 75, 100];
+
+interface TickProps {
+  value: number;
+  x: number;
+  y: number;
+}
+
+export const SpeedTest = () => {
+  const { width, height } = useWindowDimensions();
+  const speed = useSharedValue(0);
+
+  // For "native" SpeedTest experience consider using Gauge-Regular and Montserrat-Bold
+  const customFontMgr = useFonts({
+    SfPro: [require("../../assets/SF-Pro-Display-Bold.otf")],
+  });
+
+  const paragraphBuilder = useMemo(() => {
+    const paragraphStyle = {
+      textAlign: TextAlign.Center,
+    };
+
+    if (!customFontMgr) {
+      return Skia.ParagraphBuilder.Make(paragraphStyle);
+    }
+
+    return Skia.ParagraphBuilder.Make(paragraphStyle, customFontMgr);
+  }, [customFontMgr]);
+
+  const strokeWidth = 25;
+  const _r = width / 3 + 15; // Radius of the speedometer
+  const cx = width / 2; // Center x-coordinate
+  const cy = height / 2; // Center y-coordinate
+
+  const startAngle = 135;
+  const endAngle = 405;
+  const arcAnglesDiff = endAngle - startAngle;
+
+  const maxValue = 100; // Maximum value of the speedometer
+
+  const backgroundColor = "rgba(15,15,28,1)";
+
+  const sweepAngle = useDerivedValue(() => {
+    const output = ticks.map(
+      (_, i, arr) => (i * arcAnglesDiff) / (arr.length - 1)
+    );
+
+    return interpolate(speed.value, ticks, output);
+  });
+
+  const ArcGradient = () => {
+    const x = cx - _r - strokeWidth / 2;
+    const _width = width - x * 2;
+
+    return (
+      <LinearGradient
+        start={vec(x, cy)}
+        end={vec(_width, cy)}
+        colors={["rgba(37, 169, 253, 1)", "rgba(109, 255,103, 1)"]}
+      />
+    );
+  };
+
+  const BackgroundArc = () => {
+    const backgroundArcPath = usePathValue((path) => {
+      "worklet";
+      const r = _r;
+
+      path.addArc(
+        {
+          x: cx - r,
+          y: cy - r,
+          width: r * 2,
+          height: r * 2,
+        },
+        endAngle,
+        -(arcAnglesDiff - sweepAngle.value)
+      );
+      return path;
+    });
+
+    const color = Skia.Color("rgb(26,33,61)");
+
+    return (
+      <Path
+        path={backgroundArcPath}
+        style="stroke"
+        strokeWidth={strokeWidth}
+        color={color}
+      />
+    );
+  };
+
+  const ActiveArc = () => {
+    const activePath = usePathValue((path) => {
+      "worklet";
+      const r = _r;
+      path.addArc(
+        {
+          x: cx - r,
+          y: cy - r,
+          width: r * 2,
+          height: r * 2,
+        },
+        startAngle,
+        sweepAngle.value
+      );
+
+      return path;
+    });
+
+    const shadowPath = usePathValue((path) => {
+      "worklet";
+      const r = _r - strokeWidth / 2;
+      path.addArc(
+        {
+          x: cx - r,
+          y: cy - r,
+          width: r * 2,
+          height: r * 2,
+        },
+        startAngle,
+        sweepAngle.value
+      );
+
+      return path;
+    });
+
+    return (
+      <Group>
+        <Path path={activePath} style="stroke" strokeWidth={strokeWidth} />
+        <Path
+          path={shadowPath}
+          style="stroke"
+          strokeWidth={strokeWidth * 1.5}
+          opacity={0.3}
+        >
+          <BlurMask blur={50} respectCTM={false} />
+        </Path>
+        <ArcGradient />
+      </Group>
+    );
+  };
+
+  const NegativePath = () => {
+    const color = backgroundColor;
+
+    const negativeArcPath = usePathValue((path) => {
+      "worklet";
+      const r = _r - strokeWidth;
+      path.addArc(
+        {
+          x: cx - r,
+          y: cy - r,
+          width: r * 2,
+          height: r * 2,
+        },
+        startAngle,
+        -(360 - sweepAngle.value)
+      );
+
+      return path;
+    });
+
+    const circleR = _r + strokeWidth / 2;
+
+    return (
+      <Group>
+        <Path
+          path={negativeArcPath}
+          style="stroke"
+          strokeWidth={strokeWidth * 5}
+          color={color}
+        />
+        <Circle c={vec(cx, cy)} r={circleR * 1.5} color="transparent">
+          <Paint style="stroke" strokeWidth={circleR} color={backgroundColor} />
+        </Circle>
+      </Group>
+    );
+  };
+
+  const Needle = () => {
+    const topWidth = 10;
+    const bottomWidth = topWidth / 2;
+    const needleHeight = 100;
+
+    const needlePath = usePathValue((path) => {
+      "worklet";
+
+      path.moveTo(cx - topWidth, cy);
+      path.lineTo(cx + topWidth, cy);
+      path.lineTo(cx + bottomWidth, cy - needleHeight);
+      path.lineTo(cx - bottomWidth, cy - needleHeight);
+
+      return path;
+    });
+
+    const transform = useDerivedValue(() => {
+      const startAngleRadians = startAngle * (Math.PI / 180);
+      const currentAngleRadians =
+        (sweepAngle.value + startAngle) * (Math.PI / 180);
+      const rotate = currentAngleRadians - startAngleRadians * 2;
+
+      return [
+        {
+          rotate,
+        },
+      ];
+    });
+
+    return (
+      <Group transform={transform} origin={{ x: cx, y: cy }}>
+        <Path path={needlePath} origin={{ x: cx, y: cy }}>
+          <LinearGradient
+            start={vec(cx, cy)}
+            end={vec(cx, cy - 130)}
+            colors={["rgba(255,255,255,0)", "rgba(255,255,255,1)"]}
+          />
+        </Path>
+      </Group>
+    );
+  };
+
+  const SpeedLabel = () => {
+    const textStyle: SkTextStyle = {
+      color: Skia.Color("white"),
+      fontFamilies: ["SfPro"],
+      fontSize: 42,
+    };
+
+    const paragraph = useDerivedValue(() => {
+      const text = `${speed.value.toFixed(2).toString()}`;
+
+      paragraphBuilder.reset();
+
+      return paragraphBuilder.pushStyle(textStyle).addText(text).build();
+    });
+
+    const r = (_r * 0.75) / 2;
+    const y = cy + r + 20;
+
+    return <Paragraph paragraph={paragraph} x={0} y={y} width={width} />;
+  };
+
+  const Ticks = () => {
+    const end = 1;
+    const start = -Math.PI - end;
+    const angleDiff = end - start;
+    const singleTickAngle = angleDiff / ticks.length;
+    const r = _r - strokeWidth - 5;
+
+    return ticks.map((value, i) => {
+      const angle =
+        interpolate(i, [0, ticks.length], [start, end]) + singleTickAngle / 2;
+
+      const x = cx - 20 + r * Math.cos(angle);
+      const y = cy - 10 + r * Math.sin(angle);
+
+      return <Tick key={value} value={value} x={x} y={y} />;
+    });
+  };
+
+  const Tick: React.FC<TickProps> = ({ value, x, y }) => {
+    const alpha = useSharedValue(0.5);
+
+    const paragraph = useDerivedValue(() => {
+      alpha.value = interpolate(
+        speed.value,
+        [0, value - 10, value],
+        [0.5, 0.5, 1]
+      );
+
+      const textStyle = {
+        color: Skia.Color(`rgba(255,255,255,${alpha.value})`),
+        fontFamilies: ["SfPro"],
+        fontSize: 16,
+      };
+
+      paragraphBuilder.reset();
+
+      return paragraphBuilder
+        .pushStyle(textStyle)
+        .addText(value.toString())
+        .build();
+    }, [customFontMgr]);
+
+    return <Paragraph x={x} y={y} width={40} paragraph={paragraph} />;
+  };
+
+  const handleValueChange = (value: number) => {
+    speed.value = value;
+  };
+
+  return (
+    <View
+      style={{
+        flex: 1,
+        backgroundColor,
+      }}
+    >
+      <Header />
+      <Canvas style={{ flex: 3 }}>
+        <ActiveArc />
+        <NegativePath />
+        <BackgroundArc />
+        <Needle />
+        <SpeedLabel />
+        <Ticks />
+      </Canvas>
+
+      <View style={styles.sliderContainer}>
+        <Slider
+          minValue={0}
+          maxValue={maxValue}
+          onValueChange={handleValueChange}
+        />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  sliderContainer: {
+    flex: 1,
+    alignItems: "center",
+  },
+});
diff --git a/example/src/Examples/SpeedTest/index.ts b/example/src/Examples/SpeedTest/index.ts
new file mode 100644
index 0000000000..28e1054a12
--- /dev/null
+++ b/example/src/Examples/SpeedTest/index.ts
@@ -0,0 +1 @@
+export * from "./SpeedTest";
diff --git a/example/src/Examples/index.ts b/example/src/Examples/index.ts
index 11da100182..9bce87b6d5 100644
--- a/example/src/Examples/index.ts
+++ b/example/src/Examples/index.ts
@@ -22,3 +22,4 @@ export * from "./Severance";
 export * from "./Transitions";
 export * from "./Stickers";
 export * from "./FrostedCard";
+export * from "./SpeedTest";
diff --git a/example/src/Home/HomeScreen.tsx b/example/src/Home/HomeScreen.tsx
index 5c12877aa4..8a4b636cb2 100644
--- a/example/src/Home/HomeScreen.tsx
+++ b/example/src/Home/HomeScreen.tsx
@@ -47,6 +47,11 @@ export const HomeScreen = () => {
         description="Aurora Design via Mesh Gradients"
         route="Aurora"
       />
+      <HomeScreenButton
+        title="💯 SpeedTest"
+        description="SpeedTest network speedometer"
+        route="SpeedTest"
+      />
       <HomeScreenButton
         title="📸 Stickers"
         description="Stickers"
diff --git a/example/src/types.ts b/example/src/types.ts
index 69008be42c..3c328500ff 100644
--- a/example/src/types.ts
+++ b/example/src/types.ts
@@ -24,4 +24,5 @@ export type StackParamList = {
   Transitions: undefined;
   Stickers: undefined;
   FrostedCard: undefined;
+  SpeedTest: undefined;
 };
diff --git a/fabricexample/src/App.tsx b/fabricexample/src/App.tsx
index 216cbb04c9..4298fe44ae 100644
--- a/fabricexample/src/App.tsx
+++ b/fabricexample/src/App.tsx
@@ -28,6 +28,7 @@ import {
   Transitions,
   Stickers,
   FrostedCard,
+  SpeedTest,
 } from "./Examples";
 import { CI, Tests } from "./Tests";
 import { HomeScreen } from "./Home";
@@ -59,6 +60,7 @@ const linking: LinkingOptions<StackParamList> = {
       Transitions: "transitions",
       Stickers: "stickers",
       FrostedCard: "frosted-card",
+      SpeedTest: "speedtest",
     },
   },
   prefixes: ["rnskia://"],
@@ -146,6 +148,13 @@ const App = () => {
                 header: () => null,
               }}
             />
+            <Stack.Screen
+              name="SpeedTest"
+              component={SpeedTest}
+              options={{
+                header: () => null,
+              }}
+            />
             <Stack.Screen
               name="Glassmorphism"
               component={Glassmorphism}
diff --git a/fabricexample/src/Examples/SpeedTest/Header.tsx b/fabricexample/src/Examples/SpeedTest/Header.tsx
new file mode 100644
index 0000000000..68ebf7a910
--- /dev/null
+++ b/fabricexample/src/Examples/SpeedTest/Header.tsx
@@ -0,0 +1,43 @@
+/* eslint-disable max-len */
+import React from "react";
+import { View, StyleSheet, TouchableWithoutFeedback } from "react-native";
+import { useNavigation } from "@react-navigation/native";
+import { Canvas, Path } from "@shopify/react-native-skia";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+export const Header = () => {
+  const { goBack } = useNavigation();
+  const insets = useSafeAreaInsets();
+
+  const styles = StyleSheet.create({
+    container: {
+      position: "absolute",
+      top: insets.top,
+      left: insets.left,
+      zIndex: 1,
+    },
+  });
+
+  return (
+    <View style={styles.container}>
+      <TouchableWithoutFeedback onPress={goBack}>
+        <View
+          style={{
+            width: 48,
+            height: 48,
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+        >
+          <Canvas style={{ width: 32, height: 32 }}>
+            <Path
+              fillType="evenOdd"
+              path="M15.2677 7.39935C15.572 7.70363 15.5973 8.18122 15.3438 8.51439L15.2677 8.60143L8.71965 15.1494L25.3333 15.1504C25.8028 15.1504 26.1833 15.5309 26.1833 16.0004C26.1833 16.4337 25.8591 16.7913 25.4399 16.8438L25.3333 16.8504L8.71865 16.8494L15.2677 23.3993C15.5996 23.7313 15.5996 24.2695 15.2677 24.6014C14.9634 24.9057 14.4858 24.9311 14.1527 24.6775L14.0656 24.6014L6.06561 16.6014L6.04546 16.5806C6.03311 16.5674 6.02118 16.5538 6.00969 16.5398L5.98954 16.5144L6.06561 16.6014C6.03226 16.5681 6.00225 16.5326 5.9756 16.4955C5.96538 16.4812 5.95562 16.4667 5.9463 16.4518C5.93772 16.4383 5.92956 16.4244 5.92184 16.4104L5.92185 16.4103L5.91651 16.4006C5.91238 16.3929 5.90838 16.3851 5.90451 16.3773C5.89154 16.351 5.87977 16.3238 5.86942 16.2959C5.86635 16.2875 5.86318 16.2785 5.86017 16.2695C5.85112 16.2425 5.84349 16.2151 5.83723 16.1871C5.83424 16.1734 5.83159 16.1601 5.82926 16.1467C5.82559 16.126 5.82266 16.1043 5.82056 16.0824C5.81866 16.0622 5.81746 16.0425 5.81695 16.0229C5.81675 16.0159 5.81665 16.0082 5.81665 16.0004L5.81719 15.97C5.81783 15.952 5.81904 15.934 5.82083 15.916L5.81665 16.0004C5.81665 15.9478 5.82143 15.8963 5.83057 15.8464C5.83305 15.8332 5.83583 15.8198 5.83893 15.8066C5.85665 15.7302 5.88485 15.6575 5.92185 15.5905L5.92184 15.5904C5.92241 15.5893 5.92299 15.5883 5.92357 15.5872C5.93108 15.5738 5.93852 15.5612 5.9463 15.5488C5.95629 15.533 5.9668 15.5175 5.9778 15.5023C5.98808 15.488 5.99868 15.4743 6.00974 15.4609C6.02118 15.447 6.03311 15.4334 6.04546 15.4202C6.05192 15.4133 6.05869 15.4063 6.06561 15.3994L14.0656 7.39935C14.3976 7.0674 14.9357 7.0674 15.2677 7.39935Z"
+              color="white"
+            />
+          </Canvas>
+        </View>
+      </TouchableWithoutFeedback>
+    </View>
+  );
+};
diff --git a/fabricexample/src/Examples/SpeedTest/Slider.tsx b/fabricexample/src/Examples/SpeedTest/Slider.tsx
new file mode 100644
index 0000000000..9e1e1afc49
--- /dev/null
+++ b/fabricexample/src/Examples/SpeedTest/Slider.tsx
@@ -0,0 +1,104 @@
+import { StyleSheet, View, useWindowDimensions } from "react-native";
+import React from "react";
+import Animated, {
+  interpolate,
+  runOnJS,
+  useAnimatedReaction,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+
+interface Props {
+  onValueChange: (value: number) => void;
+  minValue: number;
+  maxValue: number;
+}
+
+const size = 32;
+
+const clamp = (value: number, lowerBound: number, upperBound: number) => {
+  "worklet";
+  return Math.min(Math.max(value, lowerBound), upperBound);
+};
+
+export const Slider: React.FC<Props> = ({
+  onValueChange,
+  minValue,
+  maxValue,
+}) => {
+  const { width } = useWindowDimensions();
+
+  const sliderWidth = width / 2;
+  const pickerR = size / 2;
+  const progressBarHeight = 3;
+
+  const translateX = useSharedValue(-pickerR);
+  const contextX = useSharedValue(0);
+  const scale = useSharedValue(1);
+
+  const styles = StyleSheet.create({
+    picker: {
+      position: "absolute",
+      width: size,
+      height: size,
+      borderRadius: pickerR,
+      backgroundColor: "white",
+    },
+    progressBar: {
+      height: progressBarHeight,
+      backgroundColor: "rgba(255,255,255,0.5)",
+      width: sliderWidth,
+    },
+  });
+
+  useAnimatedReaction(
+    () => translateX.value,
+    (value) => {
+      const progress = interpolate(
+        value,
+        [-pickerR, sliderWidth - pickerR],
+        [minValue, maxValue]
+      );
+
+      runOnJS(onValueChange)(progress);
+    }
+  );
+
+  const rPickerStyle = useAnimatedStyle(() => {
+    return {
+      transform: [
+        { translateX: translateX.value },
+        { translateY: -pickerR + progressBarHeight },
+        { scale: scale.value },
+      ],
+    };
+  }, []);
+
+  const gesture = Gesture.Pan()
+    .onBegin(() => {
+      scale.value = withTiming(1.2);
+      contextX.value = translateX.value;
+    })
+    .onUpdate((event) => {
+      clamp;
+      translateX.value = clamp(
+        contextX.value + event.translationX,
+        -pickerR,
+        sliderWidth - pickerR
+      );
+    })
+    .onFinalize(() => {
+      scale.value = withTiming(1);
+    });
+
+  return (
+    <View>
+      <Animated.View style={styles.progressBar} />
+      <GestureDetector gesture={gesture}>
+        <Animated.View style={[styles.picker, rPickerStyle]} />
+      </GestureDetector>
+    </View>
+  );
+};
diff --git a/fabricexample/src/Examples/SpeedTest/SpeedTest.tsx b/fabricexample/src/Examples/SpeedTest/SpeedTest.tsx
new file mode 100644
index 0000000000..85cf73abe8
--- /dev/null
+++ b/fabricexample/src/Examples/SpeedTest/SpeedTest.tsx
@@ -0,0 +1,352 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { StyleSheet, View, useWindowDimensions } from "react-native";
+import React, { useMemo } from "react";
+import type { SkTextStyle } from "@shopify/react-native-skia";
+import {
+  Canvas,
+  Skia,
+  Group,
+  Circle,
+  vec,
+  Path,
+  LinearGradient,
+  Paint,
+  BlurMask,
+  useFonts,
+  Paragraph,
+  TextAlign,
+  interpolate,
+  usePathValue,
+} from "@shopify/react-native-skia";
+import { useDerivedValue, useSharedValue } from "react-native-reanimated";
+
+import { Header } from "./Header";
+import { Slider } from "./Slider";
+
+const ticks = [0, 1, 5, 10, 20, 30, 50, 75, 100];
+
+interface TickProps {
+  value: number;
+  x: number;
+  y: number;
+}
+
+export const SpeedTest = () => {
+  const { width, height } = useWindowDimensions();
+  const speed = useSharedValue(0);
+
+  // For "native" SpeedTest experience consider using Gauge-Regular and Montserrat-Bold
+  const customFontMgr = useFonts({
+    SfPro: [require("../../assets/SF-Pro-Display-Bold.otf")],
+  });
+
+  const paragraphBuilder = useMemo(() => {
+    const paragraphStyle = {
+      textAlign: TextAlign.Center,
+    };
+
+    if (!customFontMgr) {
+      return Skia.ParagraphBuilder.Make(paragraphStyle);
+    }
+
+    return Skia.ParagraphBuilder.Make(paragraphStyle, customFontMgr);
+  }, [customFontMgr]);
+
+  const strokeWidth = 25;
+  const _r = width / 3 + 15; // Radius of the speedometer
+  const cx = width / 2; // Center x-coordinate
+  const cy = height / 2; // Center y-coordinate
+
+  const startAngle = 135;
+  const endAngle = 405;
+  const arcAnglesDiff = endAngle - startAngle;
+
+  const maxValue = 100; // Maximum value of the speedometer
+
+  const backgroundColor = "rgba(15,15,28,1)";
+
+  const sweepAngle = useDerivedValue(() => {
+    const output = ticks.map(
+      (_, i, arr) => (i * arcAnglesDiff) / (arr.length - 1)
+    );
+
+    return interpolate(speed.value, ticks, output);
+  });
+
+  const ArcGradient = () => {
+    const x = cx - _r - strokeWidth / 2;
+    const _width = width - x * 2;
+
+    return (
+      <LinearGradient
+        start={vec(x, cy)}
+        end={vec(_width, cy)}
+        colors={["rgba(37, 169, 253, 1)", "rgba(109, 255,103, 1)"]}
+      />
+    );
+  };
+
+  const BackgroundArc = () => {
+    const backgroundArcPath = usePathValue((path) => {
+      "worklet";
+      const r = _r;
+
+      path.addArc(
+        {
+          x: cx - r,
+          y: cy - r,
+          width: r * 2,
+          height: r * 2,
+        },
+        endAngle,
+        -(arcAnglesDiff - sweepAngle.value)
+      );
+      return path;
+    });
+
+    const color = Skia.Color("rgb(26,33,61)");
+
+    return (
+      <Path
+        path={backgroundArcPath}
+        style="stroke"
+        strokeWidth={strokeWidth}
+        color={color}
+      />
+    );
+  };
+
+  const ActiveArc = () => {
+    const activePath = usePathValue((path) => {
+      "worklet";
+      const r = _r;
+      path.addArc(
+        {
+          x: cx - r,
+          y: cy - r,
+          width: r * 2,
+          height: r * 2,
+        },
+        startAngle,
+        sweepAngle.value
+      );
+
+      return path;
+    });
+
+    const shadowPath = usePathValue((path) => {
+      "worklet";
+      const r = _r - strokeWidth / 2;
+      path.addArc(
+        {
+          x: cx - r,
+          y: cy - r,
+          width: r * 2,
+          height: r * 2,
+        },
+        startAngle,
+        sweepAngle.value
+      );
+
+      return path;
+    });
+
+    return (
+      <Group>
+        <Path path={activePath} style="stroke" strokeWidth={strokeWidth} />
+        <Path
+          path={shadowPath}
+          style="stroke"
+          strokeWidth={strokeWidth * 1.5}
+          opacity={0.3}
+        >
+          <BlurMask blur={50} respectCTM={false} />
+        </Path>
+        <ArcGradient />
+      </Group>
+    );
+  };
+
+  const NegativePath = () => {
+    const color = backgroundColor;
+
+    const negativeArcPath = usePathValue((path) => {
+      "worklet";
+      const r = _r - strokeWidth;
+      path.addArc(
+        {
+          x: cx - r,
+          y: cy - r,
+          width: r * 2,
+          height: r * 2,
+        },
+        startAngle,
+        -(360 - sweepAngle.value)
+      );
+
+      return path;
+    });
+
+    const circleR = _r + strokeWidth / 2;
+
+    return (
+      <Group>
+        <Path
+          path={negativeArcPath}
+          style="stroke"
+          strokeWidth={strokeWidth * 5}
+          color={color}
+        />
+        <Circle c={vec(cx, cy)} r={circleR * 1.5} color="transparent">
+          <Paint style="stroke" strokeWidth={circleR} color={backgroundColor} />
+        </Circle>
+      </Group>
+    );
+  };
+
+  const Needle = () => {
+    const topWidth = 10;
+    const bottomWidth = topWidth / 2;
+    const needleHeight = 100;
+
+    const needlePath = usePathValue((path) => {
+      "worklet";
+
+      path.moveTo(cx - topWidth, cy);
+      path.lineTo(cx + topWidth, cy);
+      path.lineTo(cx + bottomWidth, cy - needleHeight);
+      path.lineTo(cx - bottomWidth, cy - needleHeight);
+
+      return path;
+    });
+
+    const transform = useDerivedValue(() => {
+      const startAngleRadians = startAngle * (Math.PI / 180);
+      const currentAngleRadians =
+        (sweepAngle.value + startAngle) * (Math.PI / 180);
+      const rotate = currentAngleRadians - startAngleRadians * 2;
+
+      return [
+        {
+          rotate,
+        },
+      ];
+    });
+
+    return (
+      <Group transform={transform} origin={{ x: cx, y: cy }}>
+        <Path path={needlePath} origin={{ x: cx, y: cy }}>
+          <LinearGradient
+            start={vec(cx, cy)}
+            end={vec(cx, cy - 130)}
+            colors={["rgba(255,255,255,0)", "rgba(255,255,255,1)"]}
+          />
+        </Path>
+      </Group>
+    );
+  };
+
+  const SpeedLabel = () => {
+    const textStyle: SkTextStyle = {
+      color: Skia.Color("white"),
+      fontFamilies: ["SfPro"],
+      fontSize: 42,
+    };
+
+    const paragraph = useDerivedValue(() => {
+      const text = `${speed.value.toFixed(2).toString()}`;
+
+      paragraphBuilder.reset();
+
+      return paragraphBuilder.pushStyle(textStyle).addText(text).build();
+    });
+
+    const r = (_r * 0.75) / 2;
+    const y = cy + r + 20;
+
+    return <Paragraph paragraph={paragraph} x={0} y={y} width={width} />;
+  };
+
+  const Ticks = () => {
+    const end = 1;
+    const start = -Math.PI - end;
+    const angleDiff = end - start;
+    const singleTickAngle = angleDiff / ticks.length;
+    const r = _r - strokeWidth - 5;
+
+    return ticks.map((value, i) => {
+      const angle =
+        interpolate(i, [0, ticks.length], [start, end]) + singleTickAngle / 2;
+
+      const x = cx - 20 + r * Math.cos(angle);
+      const y = cy - 10 + r * Math.sin(angle);
+
+      return <Tick key={value} value={value} x={x} y={y} />;
+    });
+  };
+
+  const Tick: React.FC<TickProps> = ({ value, x, y }) => {
+    const alpha = useSharedValue(0.5);
+
+    const paragraph = useDerivedValue(() => {
+      alpha.value = interpolate(
+        speed.value,
+        [0, value - 10, value],
+        [0.5, 0.5, 1]
+      );
+
+      const textStyle = {
+        color: Skia.Color(`rgba(255,255,255,${alpha.value})`),
+        fontFamilies: ["SfPro"],
+        fontSize: 16,
+      };
+
+      paragraphBuilder.reset();
+
+      return paragraphBuilder
+        .pushStyle(textStyle)
+        .addText(value.toString())
+        .build();
+    }, [customFontMgr]);
+
+    return <Paragraph x={x} y={y} width={40} paragraph={paragraph} />;
+  };
+
+  const handleValueChange = (value: number) => {
+    speed.value = value;
+  };
+
+  return (
+    <View
+      style={{
+        flex: 1,
+        backgroundColor,
+      }}
+    >
+      <Header />
+      <Canvas style={{ flex: 3 }}>
+        <ActiveArc />
+        <NegativePath />
+        <BackgroundArc />
+        <Needle />
+        <SpeedLabel />
+        <Ticks />
+      </Canvas>
+
+      <View style={styles.sliderContainer}>
+        <Slider
+          minValue={0}
+          maxValue={maxValue}
+          onValueChange={handleValueChange}
+        />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  sliderContainer: {
+    flex: 1,
+    alignItems: "center",
+  },
+});
diff --git a/fabricexample/src/Examples/SpeedTest/index.ts b/fabricexample/src/Examples/SpeedTest/index.ts
new file mode 100644
index 0000000000..28e1054a12
--- /dev/null
+++ b/fabricexample/src/Examples/SpeedTest/index.ts
@@ -0,0 +1 @@
+export * from "./SpeedTest";
diff --git a/fabricexample/src/Examples/index.ts b/fabricexample/src/Examples/index.ts
index 11da100182..9bce87b6d5 100644
--- a/fabricexample/src/Examples/index.ts
+++ b/fabricexample/src/Examples/index.ts
@@ -22,3 +22,4 @@ export * from "./Severance";
 export * from "./Transitions";
 export * from "./Stickers";
 export * from "./FrostedCard";
+export * from "./SpeedTest";
diff --git a/fabricexample/src/Home/HomeScreen.tsx b/fabricexample/src/Home/HomeScreen.tsx
index 5c12877aa4..8a4b636cb2 100644
--- a/fabricexample/src/Home/HomeScreen.tsx
+++ b/fabricexample/src/Home/HomeScreen.tsx
@@ -47,6 +47,11 @@ export const HomeScreen = () => {
         description="Aurora Design via Mesh Gradients"
         route="Aurora"
       />
+      <HomeScreenButton
+        title="💯 SpeedTest"
+        description="SpeedTest network speedometer"
+        route="SpeedTest"
+      />
       <HomeScreenButton
         title="📸 Stickers"
         description="Stickers"
diff --git a/fabricexample/src/types.ts b/fabricexample/src/types.ts
index 69008be42c..3c328500ff 100644
--- a/fabricexample/src/types.ts
+++ b/fabricexample/src/types.ts
@@ -24,4 +24,5 @@ export type StackParamList = {
   Transitions: undefined;
   Stickers: undefined;
   FrostedCard: undefined;
+  SpeedTest: undefined;
 };