diff --git a/app/src/examples/MatrixTransform.tsx b/app/src/examples/MatrixTransform.tsx
index 6c49fd9f06c2..441dc008ceb7 100644
--- a/app/src/examples/MatrixTransform.tsx
+++ b/app/src/examples/MatrixTransform.tsx
@@ -3,9 +3,19 @@ import Animated, {
   useAnimatedStyle,
   withSpring,
 } from 'react-native-reanimated';
-import { SafeAreaView, Button, View, StyleSheet, Platform } from 'react-native';
+import {
+  SafeAreaView,
+  View,
+  StyleSheet,
+  Platform,
+  Text,
+  TouchableOpacity,
+} from 'react-native';
 import React, { useRef } from 'react';
 
+const NAVY = '#001A72';
+const LIGHT_NAVY = '#C1C6E5';
+
 const TRANSFORM_MATRICES = [
   [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 2],
   [0.5, 1, 0, 0, -1, 0.5, 0, 0, 0, 0, 1, 0, 100, 100, 100, 1],
@@ -46,21 +56,38 @@ export default function MatrixTransform() {
   }, [matrix, matrix2, currentTransformIndex]);
 
   return (
-    <SafeAreaView style={styles.container}>
-      <Button onPress={handlePress} title="GO GO matrix" />
-      <Animated.View style={[styles.bigBox, styles.blue, matrixTransforms]}>
-        <Animated.View style={[styles.smallBox, styles.lime]} />
-      </Animated.View>
-      <View style={styles.spacer} />
-      <Animated.View style={[styles.bigBox, styles.orange, matrixTransforms2]}>
-        <Animated.View style={[styles.smallBox, styles.red]} />
-      </Animated.View>
+    <SafeAreaView style={styles.flexOne}>
+      <TouchableOpacity onPress={handlePress} style={styles.button}>
+        <Text style={styles.buttonText}>Animate transform matrix</Text>
+      </TouchableOpacity>
+      <View style={styles.flexOne}>
+        <View style={styles.textContainer}>
+          <Text style={styles.text}>
+            Extract all transforms (rotation, scale and translation) and animate
+            separately (the default behavior)
+          </Text>
+        </View>
+        <Animated.View style={[styles.bigBox, styles.blue, matrixTransforms]}>
+          <Animated.View style={[styles.smallBox, styles.lime]} />
+        </Animated.View>
+      </View>
+      <View style={styles.flexOne}>
+        <View style={styles.textContainer}>
+          <Text style={styles.text}>
+            Apply linear animation to each value of matrix
+          </Text>
+        </View>
+        <Animated.View
+          style={[styles.bigBox, styles.orange, matrixTransforms2]}>
+          <Animated.View style={[styles.smallBox, styles.red]} />
+        </Animated.View>
+      </View>
     </SafeAreaView>
   );
 }
 
 const styles = StyleSheet.create({
-  container: {
+  flexOne: {
     flex: 1,
   },
   bigBox: {
@@ -71,8 +98,27 @@ const styles = StyleSheet.create({
     borderRadius: Platform.select({ ios: 10, android: 0 }),
     marginLeft: 100,
   },
-  spacer: {
-    height: 100,
+  textContainer: {
+    width: '100%',
+    borderTopWidth: 2,
+    borderBottomWidth: 2,
+    borderColor: NAVY,
+    backgroundColor: LIGHT_NAVY,
+  },
+  text: {
+    fontSize: 15,
+    color: NAVY,
+    margin: 10,
+  },
+  button: {
+    height: 40,
+    backgroundColor: NAVY,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  buttonText: {
+    fontSize: 20,
+    color: 'white',
   },
   smallBox: {
     width: 40,
diff --git a/app/src/examples/PendulumExample.tsx b/app/src/examples/PendulumExample.tsx
index 4cddd82f9a71..1dc4fba9abfa 100644
--- a/app/src/examples/PendulumExample.tsx
+++ b/app/src/examples/PendulumExample.tsx
@@ -19,8 +19,8 @@ const LIGHT_NAVY = '#C1C6E5';
 
 interface FieldDefinition {
   fieldName: string;
-  value: number;
-  setValue: Dispatch<SetStateAction<number>>;
+  value: string;
+  setValue: Dispatch<SetStateAction<string>>;
 }
 
 function InputField({ fieldName, value, setValue }: FieldDefinition) {
@@ -30,13 +30,10 @@ function InputField({ fieldName, value, setValue }: FieldDefinition) {
       <TextInput
         key={fieldName}
         value={`${value}`}
-        onChangeText={(s) => {
-          const parsedInput = Number.parseFloat(s);
-          if (parsedInput) {
-            setValue(parsedInput);
-          } else {
-            setValue(0);
-          }
+        onChangeText={(str) => {
+          str = str.replace(/[^0-9.]/g, ''); // Remove everything except for dots and digits
+          str = str.replace(/(?<=\..*)\./g, ''); // Remove all the dots except for the first one
+          setValue(str);
         }}
         autoCapitalize="none"
         inputMode="numeric"
@@ -51,21 +48,21 @@ export default function SpringExample() {
   const offset = useSharedValue({ x: 0, y: 0 });
   const [useConfigWithDuration, setUseConfigWithDuration] = useState(true);
 
-  const [stiffness, setStiffness] = useState(100);
-  const [duration, setDuration] = useState(5000);
-  const [dampingRatio, setDampingRatio] = useState(0.5);
-  const [mass, setMass] = useState(1);
-  const [damping, setDamping] = useState(1);
+  const [stiffness, setStiffness] = useState('100');
+  const [duration, setDuration] = useState('5000');
+  const [dampingRatio, setDampingRatio] = useState('0.5');
+  const [mass, setMass] = useState('1');
+  const [damping, setDamping] = useState('1');
 
   const config = {
-    stiffness: stiffness,
+    stiffness: Number.parseFloat(stiffness),
     ...(useConfigWithDuration
       ? {
-          duration: duration,
-          dampingRatio: dampingRatio,
+          duration: Number.parseFloat(duration),
+          dampingRatio: Number.parseFloat(dampingRatio),
         }
-      : { mass: mass, damping: damping }),
-  };
+      : { mass: Number.parseFloat(mass), damping: Number.parseFloat(damping) }),
+  } as const;
 
   const style = useAnimatedStyle(() => {
     return {
@@ -157,7 +154,7 @@ export default function SpringExample() {
                 {
                   fontSize: useConfigWithDuration
                     ? 50
-                    : Math.min(0.75 * mass, 40) + 10,
+                    : Math.min(0.75 * Number.parseFloat(mass), 40) + 10,
                 },
               ]}>
               {/* Using here view with border radius would be more natural, but views with border radius and rotation are bugged on android */}