diff --git a/apps/common-app/App.tsx b/apps/common-app/App.tsx
index 2e4a95d279..0b0c530413 100644
--- a/apps/common-app/App.tsx
+++ b/apps/common-app/App.tsx
@@ -76,6 +76,18 @@ import LongPressExample from './src/simple/longPress';
 import ManualExample from './src/simple/manual';
 import SimpleFling from './src/simple/fling';
 
+import Lock from './src/v3_api/lock/lock';
+import V3Fling from './src/v3_api/fling/fling';
+import LogicDetectorExample from './src/v3_api/svg/svg';
+import V3Hover from './src/v3_api/hover/index';
+import V3Overlap from './src/v3_api/overlap/index';
+import V3Calculator from './src/v3_api/calculator/index';
+import V3Velocity from './src/v3_api/velocity_test/index';
+import V3BottomSheet from './src/v3_api/bottom_sheet/index';
+import V3ChatHeads from './src/v3_api/chat_heads/index';
+import V3HoverableIcons from './src/v3_api/hoverable_icons/index';
+import V3Camera from './src/v3_api/camera/index';
+import V3NestedText from './src/v3_api/nested_text/nested_text';
 import { Icon } from '@swmansion/icons';
 
 interface Example {
@@ -93,6 +105,23 @@ const EXAMPLES: ExamplesSection[] = [
     sectionTitle: 'Empty',
     data: [{ name: 'Empty Example', component: EmptyExample }],
   },
+  {
+    sectionTitle: 'V3 api',
+    data: [
+      { name: 'V3 Fling', component: V3Fling },
+      { name: 'Svg', component: LogicDetectorExample },
+      { name: 'Lock', component: Lock },
+      { name: 'V3 Hover', component: V3Hover },
+      { name: 'V3 Overlap', component: V3Overlap },
+      { name: 'V3 Calculator', component: V3Calculator },
+      { name: 'V3 Velocity Test', component: V3Velocity },
+      { name: 'V3 Bottom Sheet', component: V3BottomSheet },
+      { name: 'V3 Chat Heads', component: V3ChatHeads },
+      { name: 'V3 Hoverable Icons', component: V3HoverableIcons },
+      { name: 'V3 Camera', component: V3Camera },
+      { name: 'V3 Nested Text', component: V3NestedText },
+    ],
+  },
   {
     sectionTitle: 'New api',
     data: [
diff --git a/apps/common-app/src/common.tsx b/apps/common-app/src/common.tsx
index 0a7436e840..f5692d8da1 100644
--- a/apps/common-app/src/common.tsx
+++ b/apps/common-app/src/common.tsx
@@ -1,10 +1,21 @@
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Text, StyleSheet, ViewStyle, StyleProp } from 'react-native';
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
 
 const styles = StyleSheet.create({
   lipsum: {
     padding: 10,
   },
+  feedback: {
+    marginTop: 20,
+    fontSize: 16,
+    fontWeight: '600',
+  },
 });
 
 type Props = {
@@ -25,9 +36,84 @@ export class LoremIpsum extends React.Component<Props> {
   }
 }
 
+type FeedbackProps = {
+  text: string;
+  highlight: string;
+  color?: string;
+  resetState?: () => void;
+  duration?: number;
+};
+
+// this piece of code is certainly not beutiful, but functional. It enables simple testing without the console
+export function Feedback({
+  text,
+  highlight,
+  color = 'black',
+  resetState,
+  duration = 1000,
+}: FeedbackProps) {
+  const opacity = useSharedValue(0);
+  const [activeHighlight, setActiveHighlight] = useState<string>(highlight);
+  const [activeText, setActiveText] = useState<string>(text);
+  const [activeColor, setActiveColor] = useState<string>(color);
+  const timerRef = useRef<number>(null);
+  useEffect(() => {
+    if (highlight === '') {
+      return;
+    }
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+    setActiveHighlight(highlight);
+    setActiveText(text);
+    setActiveColor(color);
+    opacity.value = 1;
+    if (resetState) {
+      resetState();
+    }
+    timerRef.current = setTimeout(() => {
+      opacity.value = withTiming(0, {
+        duration: 500,
+        easing: Easing.out(Easing.ease),
+      });
+    }, duration);
+  }, [text, highlight, opacity, duration]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+  }));
+  if (!activeHighlight || !activeText.includes(activeHighlight)) {
+    return (
+      <Animated.Text style={[styles.feedback, animatedStyle]}>
+        {text}
+      </Animated.Text>
+    );
+  }
+
+  const parts = activeText.split(activeHighlight);
+
+  return (
+    <Animated.Text style={[styles.feedback, animatedStyle]}>
+      {parts.map((part, index) => (
+        <React.Fragment key={index}>
+          <Text>{part}</Text>
+          {index < parts.length - 1 && (
+            <Text style={{ color: activeColor }}>{activeHighlight}</Text>
+          )}
+        </React.Fragment>
+      ))}
+    </Animated.Text>
+  );
+}
+
 export const COLORS = {
   offWhite: '#f8f9ff',
   headerSeparator: '#eef0ff',
+  NAVY: '#001A72',
+  KINDA_RED: '#FFB2AD',
+  YELLOW: '#FFF096',
+  KINDA_GREEN: '#C4E7DB',
+  KINDA_BLUE: '#A0D5EF',
 };
 
 const LOREM_IPSUM = `
diff --git a/apps/common-app/src/v3_api/bottom_sheet/index.tsx b/apps/common-app/src/v3_api/bottom_sheet/index.tsx
new file mode 100644
index 0000000000..6626c29d04
--- /dev/null
+++ b/apps/common-app/src/v3_api/bottom_sheet/index.tsx
@@ -0,0 +1,163 @@
+import React, { useState } from 'react';
+import {
+  Dimensions,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  StyleSheet,
+  View,
+} from 'react-native';
+import {
+  GestureDetector,
+  PanGestureEvent,
+  useSimultaneousGestures,
+  usePanGesture,
+  useTapGesture,
+  useNativeGesture,
+} from 'react-native-gesture-handler';
+import Animated, {
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from 'react-native-reanimated';
+import { LoremIpsum } from '../../common';
+
+const HEADER_HEIGTH = 50;
+const windowHeight = Dimensions.get('window').height;
+const SNAP_POINTS_FROM_TOP = [50, windowHeight * 0.4, windowHeight * 0.8];
+
+const FULLY_OPEN_SNAP_POINT = SNAP_POINTS_FROM_TOP[0];
+const CLOSED_SNAP_POINT = SNAP_POINTS_FROM_TOP[SNAP_POINTS_FROM_TOP.length - 1];
+
+function Example() {
+  const [snapPoint, setSnapPoint] = useState(CLOSED_SNAP_POINT);
+  const translationY = useSharedValue(0);
+  const scrollOffset = useSharedValue(0);
+  const bottomSheetTranslateY = useSharedValue(CLOSED_SNAP_POINT);
+
+  const onHandlerEndOnJS = (point: number) => {
+    setSnapPoint(point);
+  };
+  const onHandlerDeactivate = (e: PanGestureEvent) => {
+    'worklet';
+    const dragToss = 0.01;
+    const endOffsetY =
+      bottomSheetTranslateY.value + translationY.value + e.velocityY * dragToss;
+
+    // calculate nearest snap point
+    let destSnapPoint = FULLY_OPEN_SNAP_POINT;
+
+    if (
+      snapPoint === FULLY_OPEN_SNAP_POINT &&
+      endOffsetY < FULLY_OPEN_SNAP_POINT
+    ) {
+      return;
+    }
+    for (const snapPoint of SNAP_POINTS_FROM_TOP) {
+      const distFromSnap = Math.abs(snapPoint - endOffsetY);
+      if (distFromSnap < Math.abs(destSnapPoint - endOffsetY)) {
+        destSnapPoint = snapPoint;
+      }
+    }
+
+    // update current translation to be able to animate withSpring to snapPoint
+    bottomSheetTranslateY.value =
+      bottomSheetTranslateY.value + translationY.value;
+    translationY.value = 0;
+
+    bottomSheetTranslateY.value = withSpring(destSnapPoint, {
+      mass: 0.5,
+    });
+    runOnJS(onHandlerEndOnJS)(destSnapPoint);
+  };
+  const panGesture = usePanGesture({
+    onUpdate: (e) => {
+      'worklet';
+      // when bottom sheet is not fully opened scroll offset should not influence
+      // its position (prevents random snapping when opening bottom sheet when
+      // the content is already scrolled)
+      if (snapPoint === FULLY_OPEN_SNAP_POINT) {
+        translationY.value = e.translationY - scrollOffset.value;
+      } else {
+        translationY.value = e.translationY;
+      }
+    },
+    onDeactivate: onHandlerDeactivate,
+  });
+
+  const blockScrollUntilAtTheTop = useTapGesture({
+    maxDeltaY: snapPoint - FULLY_OPEN_SNAP_POINT,
+    maxDuration: 100000,
+    simultaneousWith: panGesture,
+  });
+
+  const headerGesture = usePanGesture({
+    onUpdate: (e) => {
+      'worklet';
+      translationY.value = e.translationY;
+    },
+    onDeactivate: onHandlerDeactivate,
+  });
+
+  const scrollViewGesture = useNativeGesture({
+    requireToFail: blockScrollUntilAtTheTop,
+  });
+
+  const bottomSheetAnimatedStyle = useAnimatedStyle(() => {
+    const translateY = bottomSheetTranslateY.value + translationY.value;
+
+    const minTranslateY = Math.max(FULLY_OPEN_SNAP_POINT, translateY);
+    const clampedTranslateY = Math.min(CLOSED_SNAP_POINT, minTranslateY);
+    return {
+      transform: [{ translateY: clampedTranslateY }],
+    };
+  });
+
+  const simultanousGesture = useSimultaneousGestures(
+    panGesture,
+    scrollViewGesture
+  );
+
+  return (
+    <View style={styles.container}>
+      <LoremIpsum words={200} />
+      <GestureDetector gesture={blockScrollUntilAtTheTop}>
+        <Animated.View style={[styles.bottomSheet, bottomSheetAnimatedStyle]}>
+          <GestureDetector gesture={headerGesture}>
+            <View style={styles.header} />
+          </GestureDetector>
+          <GestureDetector gesture={simultanousGesture}>
+            <Animated.ScrollView
+              bounces={false}
+              scrollEventThrottle={1}
+              onScrollBeginDrag={(
+                e: NativeSyntheticEvent<NativeScrollEvent>
+              ) => {
+                scrollOffset.value = e.nativeEvent.contentOffset.y;
+              }}>
+              <LoremIpsum />
+              <LoremIpsum />
+              <LoremIpsum />
+            </Animated.ScrollView>
+          </GestureDetector>
+        </Animated.View>
+      </GestureDetector>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    height: HEADER_HEIGTH,
+    backgroundColor: 'coral',
+  },
+  bottomSheet: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: '#ff9f7A',
+  },
+});
+
+export default Example;
diff --git a/apps/common-app/src/v3_api/calculator/index.tsx b/apps/common-app/src/v3_api/calculator/index.tsx
new file mode 100644
index 0000000000..701ef11959
--- /dev/null
+++ b/apps/common-app/src/v3_api/calculator/index.tsx
@@ -0,0 +1,426 @@
+import React, { Dispatch, SetStateAction, useRef, useState } from 'react';
+import {
+  StyleSheet,
+  View,
+  Text,
+  Dimensions,
+  LayoutChangeEvent,
+  LayoutRectangle,
+} from 'react-native';
+import {
+  ScrollView,
+  usePanGesture,
+  useTapGesture,
+  GestureDetector,
+} from 'react-native-gesture-handler';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  runOnJS,
+} from 'react-native-reanimated';
+
+const DRAG_ANIMATION_DURATION = 300;
+const TAP_ANIMATION_DURATION = 100;
+const OPERATIONS_TOGGLE_OFFSET = 75;
+const OUTPUT_TOGGLE_OFFSET = 100;
+const window = Dimensions.get('window');
+
+export default function CalculatorUI() {
+  const outputOffset = useSharedValue(0);
+  const [history, setHistory] = useState(Array<string>());
+  const [expression, setExpression] = useState('');
+
+  function measure({
+    nativeEvent: {
+      layout: { height },
+    },
+  }: LayoutChangeEvent) {
+    outputOffset.value = -height;
+  }
+
+  return (
+    <View style={styles.home}>
+      <Output offset={outputOffset} expression={expression} history={history} />
+      <Input
+        offset={outputOffset}
+        measure={measure}
+        expression={expression}
+        setExpression={setExpression}
+        setHistory={setHistory}
+      />
+    </View>
+  );
+}
+
+interface OutputProps {
+  offset: Animated.SharedValue<number>;
+  expression: string;
+  history: string[];
+}
+
+function Output({ offset, expression, history }: OutputProps) {
+  const layout = useRef({});
+  const scrollView = useRef<ScrollView>(null);
+  const drag = useSharedValue(0);
+  const dragOffset = useSharedValue(0);
+  const [opened, setOpened] = useState(false);
+
+  function measure({ nativeEvent: { layout: newLayout } }: LayoutChangeEvent) {
+    layout.current = newLayout;
+  }
+
+  function open() {
+    drag.value = withTiming(-offset.value, {
+      duration: DRAG_ANIMATION_DURATION,
+    });
+    dragOffset.value = -offset.value;
+
+    setOpened(true);
+  }
+
+  function close() {
+    drag.value = withTiming(0, { duration: DRAG_ANIMATION_DURATION });
+    dragOffset.value = 0;
+
+    setOpened(false);
+  }
+
+  const translationStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{ translateY: offset.value + drag.value }],
+    };
+  });
+
+  const dragGesture = usePanGesture({
+    onUpdate: (e) => {
+      'worklet';
+      const translatedOffset = dragOffset.value + e.translationY;
+
+      if (translatedOffset > -offset.value) {
+        drag.value = -offset.value;
+      } else if (translatedOffset < 0) {
+        drag.value = 0;
+      } else {
+        drag.value = translatedOffset;
+      }
+    },
+    onDeactivate: (e) => {
+      'worklet';
+      const translatedOffset = dragOffset.value + e.translationY;
+
+      if (opened) {
+        if (translatedOffset < -offset.value - OUTPUT_TOGGLE_OFFSET) {
+          runOnJS(close)();
+        } else {
+          runOnJS(open)();
+        }
+      } else {
+        if (translatedOffset > OUTPUT_TOGGLE_OFFSET) {
+          runOnJS(open)();
+        } else {
+          runOnJS(close)();
+        }
+      }
+    },
+  });
+
+  scrollView.current?.scrollToEnd({ animated: true });
+
+  return (
+    <GestureDetector gesture={dragGesture}>
+      <Animated.View
+        style={[styles.output, translationStyle]}
+        onLayout={measure}>
+        <ScrollView
+          ref={(ref: ScrollView) => {
+            if (!opened) {
+              ref?.scrollToEnd({ animated: false });
+            }
+            scrollView.current = ref;
+          }}
+          enabled={opened}
+          contentContainerStyle={{ flexGrow: 1 }}>
+          <View style={{ flexGrow: 1 }} />
+
+          {history.map((exp: string) => {
+            return <Expression expression={exp} key={exp} />;
+          })}
+
+          <Expression expression={expression} />
+        </ScrollView>
+        <View style={styles.handleView}>
+          <View style={styles.handle} />
+        </View>
+      </Animated.View>
+    </GestureDetector>
+  );
+}
+
+interface ExpressionProps {
+  expression: string;
+}
+
+function Expression({ expression }: ExpressionProps) {
+  return (
+    <View style={styles.expression}>
+      <Text style={styles.expressionText}>{expression}</Text>
+      <Text style={styles.expressionResult}>{expression}</Text>
+    </View>
+  );
+}
+
+interface InputProps {
+  setHistory: Dispatch<SetStateAction<string[]>>;
+  setExpression: Dispatch<SetStateAction<string>>;
+  measure: (e: LayoutChangeEvent) => void;
+  offset: Animated.SharedValue<number>;
+  expression: string;
+}
+
+function Input({
+  setHistory,
+  setExpression,
+  measure,
+  offset,
+  expression,
+}: InputProps) {
+  const translationStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{ translateY: offset.value }],
+    };
+  });
+
+  function append(symbol: string) {
+    if (symbol === '<') {
+      setHistory((h) => h.concat(expression));
+      setExpression((_e) => '');
+    } else {
+      setExpression((e) => e + symbol);
+    }
+  }
+
+  return (
+    <Animated.View style={[styles.input, translationStyle]} onLayout={measure}>
+      <NumPad append={append} />
+      <Operations />
+    </Animated.View>
+  );
+}
+
+interface NumPadProps {
+  append: (text: string) => void;
+}
+
+function NumPad({ append }: NumPadProps) {
+  const buttons = ['7', '8', '9', '4', '5', '6', '1', '2', '3', '<', '0', '.'];
+  return (
+    <View style={styles.numPad}>
+      {buttons.map((text) => {
+        return <Button text={text} key={text} append={append} />;
+      })}
+    </View>
+  );
+}
+
+function Operations() {
+  const layout = useSharedValue<LayoutRectangle>({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+  });
+  const drag = useSharedValue(0);
+  const dragOffset = useSharedValue(0);
+  const [opened, setOpened] = useState(false);
+
+  function open() {
+    const margin = window.width - layout.value.x;
+
+    drag.value = withTiming(-layout.value.width + margin, {
+      duration: DRAG_ANIMATION_DURATION,
+    });
+    dragOffset.value = -layout.value.width + margin;
+
+    setOpened(true);
+  }
+
+  function close() {
+    drag.value = withTiming(0, { duration: DRAG_ANIMATION_DURATION });
+    dragOffset.value = 0;
+
+    setOpened(false);
+  }
+
+  const dragGesture = usePanGesture({
+    onUpdate: (e) => {
+      'worklet';
+      const margin = window.width - layout.value.x;
+      const translatedOffset = dragOffset.value + e.translationX;
+
+      if (translatedOffset < -layout.value.width + margin) {
+        drag.value = -layout.value.width + margin;
+      } else if (translatedOffset > 0) {
+        drag.value = 0;
+      } else {
+        drag.value = translatedOffset;
+      }
+    },
+    onDeactivate: (e) => {
+      'worklet';
+      const margin = window.width - layout.value.x;
+      const translatedOffset = dragOffset.value + e.translationX;
+
+      if (opened) {
+        if (
+          translatedOffset >
+          -layout.value.width + margin + OPERATIONS_TOGGLE_OFFSET
+        ) {
+          runOnJS(close)();
+        } else {
+          runOnJS(open)();
+        }
+      } else {
+        if (translatedOffset < -OPERATIONS_TOGGLE_OFFSET) {
+          runOnJS(open)();
+        } else {
+          runOnJS(close)();
+        }
+      }
+    },
+  });
+
+  const translationStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{ translateX: drag.value }],
+    };
+  });
+
+  function measure({ nativeEvent: { layout: newLayout } }: LayoutChangeEvent) {
+    layout.value = newLayout;
+  }
+
+  return (
+    <GestureDetector gesture={dragGesture}>
+      <Animated.View
+        style={[styles.operations, translationStyle]}
+        onLayout={measure}
+      />
+    </GestureDetector>
+  );
+}
+
+interface ButtonProps {
+  text: string;
+  append: (text: string) => void;
+}
+
+function Button({ text, append }: ButtonProps) {
+  const alpha = useSharedValue(0);
+
+  const backgroundStyles = useAnimatedStyle(() => {
+    return {
+      backgroundColor: `rgba(200, 200, 200, ${alpha.value})`,
+    };
+  });
+
+  const tapHandler = useTapGesture({
+    onDeactivate: (_e, success) => {
+      'worklet';
+      alpha.value = withTiming(0, { duration: TAP_ANIMATION_DURATION });
+
+      if (success) {
+        runOnJS(append)(text);
+      }
+    },
+    onBegin: (_e) => {
+      'worklet';
+      alpha.value = withTiming(0.75, { duration: TAP_ANIMATION_DURATION });
+    },
+  });
+
+  return (
+    <GestureDetector gesture={tapHandler}>
+      <Animated.View style={styles.button}>
+        <Animated.View style={[styles.buttonTextContainer, backgroundStyles]}>
+          <Text style={styles.buttonText}>{text}</Text>
+        </Animated.View>
+      </Animated.View>
+    </GestureDetector>
+  );
+}
+
+const styles = StyleSheet.create({
+  home: {
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    zIndex: 0,
+  },
+  numPad: {
+    width: '92%',
+    display: 'flex',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  output: {
+    backgroundColor: 'white',
+    width: '100%',
+    height: '100%',
+    zIndex: 1,
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  expression: {
+    width: '100%',
+    flexDirection: 'column',
+    padding: 30,
+  },
+  expressionText: {
+    fontSize: 35,
+    alignSelf: 'flex-end',
+  },
+  expressionResult: {
+    fontSize: 24,
+    alignSelf: 'flex-end',
+    color: 'rgb(64, 64, 64)',
+  },
+  handleView: {
+    width: '100%',
+    height: 50,
+    flexDirection: 'column',
+    justifyContent: 'center',
+  },
+  handle: {
+    width: 50,
+    height: 8,
+    backgroundColor: 'rgb(200, 200, 200)',
+    alignSelf: 'center',
+    borderRadius: 10,
+  },
+  input: {
+    display: 'flex',
+    flexDirection: 'row',
+  },
+  operations: {
+    backgroundColor: 'blue',
+    width: '86%',
+  },
+  button: {
+    width: '33.33%',
+    height: '33.33%',
+    aspectRatio: 1,
+    padding: 15,
+  },
+  buttonText: {
+    alignSelf: 'center',
+    fontSize: 25,
+  },
+  buttonTextContainer: {
+    borderRadius: 150,
+    width: '100%',
+    height: '100%',
+    justifyContent: 'center',
+  },
+});
diff --git a/apps/common-app/src/v3_api/camera/index.tsx b/apps/common-app/src/v3_api/camera/index.tsx
new file mode 100644
index 0000000000..c7052a36ac
--- /dev/null
+++ b/apps/common-app/src/v3_api/camera/index.tsx
@@ -0,0 +1,280 @@
+import React, { useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import {
+  useLongPressGesture,
+  usePinchGesture,
+  useTapGesture,
+  useCompetingGestures,
+  GestureDetector,
+  useSimultaneousGestures,
+  usePanGesture,
+  useExclusiveGestures,
+} from 'react-native-gesture-handler';
+import Animated, {
+  SharedValue,
+  runOnJS,
+  useAnimatedProps,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { Circle, Svg } from 'react-native-svg';
+import AnimatedCameraView from '../../new_api/camera/AnimatedCameraView';
+
+const FILTERS = ['red', 'green', 'blue', 'yellow', 'orange', 'cyan'];
+const CAROUSEL_SIZE = 100;
+const FILTER_SIZE = 60;
+const VIDEO_DURATION = 20000;
+const RECORD_INDICATOR_STROKE = 10;
+
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+
+export default function Camera() {
+  const [facing, setFacing] = useState<'front' | 'back'>('back');
+  const selectedFilter = useSharedValue(0);
+  const captureProgress = useSharedValue(0);
+  const zoom = useSharedValue(1);
+
+  const filterChangeGesture = usePanGesture({
+    onUpdate: (e) => {
+      'worklet';
+      selectedFilter.value -= e.changeX / FILTER_SIZE;
+    },
+    onDeactivate: () => {
+      'worklet';
+      const nextFilter = Math.min(
+        FILTERS.length - 1,
+        Math.max(0, Math.round(selectedFilter.value))
+      );
+      selectedFilter.value = withTiming(nextFilter, { duration: 150 });
+    },
+  });
+
+  function takePhoto() {
+    alert("I didn't bother to implement this :)");
+  }
+
+  function startRecording() {
+    // no-op
+  }
+
+  function stopRecording() {
+    alert("I didn't bother to implement this either :)");
+  }
+
+  const takePhotoGesture = useTapGesture({
+    onDeactivate: () => {
+      'worklet';
+      runOnJS(takePhoto)();
+      captureProgress.value = withTiming(0, { duration: 1000 });
+    },
+  });
+
+  const takeVideoGesture = useLongPressGesture({
+    shouldCancelWhenOutside: false,
+    maxDistance: 10000,
+    onActivate: () => {
+      'worklet';
+      runOnJS(startRecording)();
+      captureProgress.value = withTiming(1, { duration: VIDEO_DURATION });
+    },
+    onDeactivate: () => {
+      'worklet';
+      runOnJS(stopRecording)();
+      captureProgress.value = 0;
+    },
+  });
+
+  const panZoomGesture = usePanGesture({
+    shouldCancelWhenOutside: false,
+    requireToFail: filterChangeGesture,
+    onUpdate: (e) => {
+      'worklet';
+      zoom.value = Math.max(1, Math.min(2, zoom.value - e.changeY / 500));
+    },
+  });
+
+  const pinchZoomGesture = usePinchGesture({
+    onUpdate: (e) => {
+      'worklet';
+      zoom.value = Math.max(
+        1,
+        Math.min(2, zoom.value * ((e.scaleChange - 1) * 0.2 + 1))
+      );
+      console.log(zoom.value);
+    },
+  });
+
+  const changeCameraGesture = useTapGesture({
+    numberOfTaps: 2,
+    onDeactivate: () => {
+      'worklet';
+      setFacing((f) => (f === 'back' ? 'front' : 'back'));
+    },
+    disableReanimated: true,
+  });
+
+  const raceGesture = useCompetingGestures(
+    pinchZoomGesture,
+    changeCameraGesture
+  );
+  const simultanousGesture = useSimultaneousGestures(
+    panZoomGesture,
+    takeVideoGesture
+  );
+  const exclusiveGesture = useExclusiveGestures(
+    simultanousGesture,
+    takePhotoGesture
+  );
+  return (
+    <GestureDetector gesture={raceGesture}>
+      <View style={styles.container}>
+        <AnimatedCameraView facing={facing} zoom={zoom} />
+        <FilterOverlay filters={FILTERS} selected={selectedFilter} />
+        <GestureDetector gesture={filterChangeGesture}>
+          <View style={styles.carouselContainer}>
+            <FilterCarousel filters={FILTERS} selected={selectedFilter} />
+            <GestureDetector gesture={exclusiveGesture}>
+              <CaptureButton progress={captureProgress} />
+            </GestureDetector>
+          </View>
+        </GestureDetector>
+      </View>
+    </GestureDetector>
+  );
+}
+
+interface FilterCarouselProps {
+  filters: string[];
+  selected: SharedValue<number>;
+}
+
+function FilterCarousel(props: FilterCarouselProps) {
+  const style = useAnimatedStyle(() => {
+    return {
+      flexDirection: 'row',
+      position: 'absolute',
+      left: '50%',
+      gap: FILTER_SIZE * 0.4,
+      transform: [
+        {
+          translateX:
+            -FILTER_SIZE / 2 - FILTER_SIZE * 1.4 * props.selected.value,
+        },
+      ],
+    };
+  });
+
+  return (
+    <Animated.View style={style}>
+      {props.filters.map((filter) => (
+        <View
+          key={filter}
+          style={{
+            backgroundColor: filter,
+            width: FILTER_SIZE,
+            height: FILTER_SIZE,
+            borderRadius: FILTER_SIZE / 2,
+          }}
+        />
+      ))}
+    </Animated.View>
+  );
+}
+
+interface FilterOverlayProps {
+  filters: string[];
+  selected: SharedValue<number>;
+}
+
+export function FilterOverlay(props: FilterOverlayProps) {
+  const style = useAnimatedStyle(() => {
+    const progress = props.selected.value % 1;
+
+    return {
+      opacity: 0.3 * (Math.abs(progress - 0.5) * 2),
+      backgroundColor: props.filters[Math.round(props.selected.value)],
+    };
+  });
+
+  return (
+    <Animated.View
+      style={[StyleSheet.absoluteFill, style]}
+      pointerEvents={'none'}
+    />
+  );
+}
+
+interface CaptureButtonProps {
+  progress: SharedValue<number>;
+}
+
+function CaptureButton(props: CaptureButtonProps) {
+  const radius = CAROUSEL_SIZE / 2;
+  const svgRadius = CAROUSEL_SIZE / 2 - RECORD_INDICATOR_STROKE * 0.5;
+  const circumference = svgRadius * 2 * Math.PI;
+
+  const animatedProps = useAnimatedProps(() => {
+    const svgProgress = 100 - props.progress.value * 100;
+    return {
+      strokeDashoffset: svgRadius * Math.PI * 2 * (svgProgress / 100),
+    };
+  });
+
+  return (
+    <Animated.View style={styles.shutterContainer}>
+      <Animated.View style={styles.shutterButtonBackground} />
+      <Svg style={styles.shutterButtonRecordingIndicator}>
+        <AnimatedCircle
+          cx={radius}
+          cy={radius}
+          r={svgRadius}
+          stroke={'red'}
+          strokeLinecap="round"
+          fill={'transparent'}
+          strokeDasharray={`${circumference} ${circumference}`}
+          strokeWidth={RECORD_INDICATOR_STROKE}
+          animatedProps={animatedProps}
+        />
+      </Svg>
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  carouselContainer: {
+    position: 'absolute',
+    left: 0,
+    bottom: 32,
+    height: CAROUSEL_SIZE,
+    width: '100%',
+    justifyContent: 'center',
+  },
+  shutterContainer: {
+    position: 'absolute',
+    top: 0,
+    left: '50%',
+    width: CAROUSEL_SIZE,
+    height: CAROUSEL_SIZE,
+    transform: [{ translateX: -CAROUSEL_SIZE / 2 }],
+  },
+  shutterButtonBackground: {
+    width: CAROUSEL_SIZE,
+    height: CAROUSEL_SIZE,
+    borderRadius: CAROUSEL_SIZE / 2,
+    borderWidth: RECORD_INDICATOR_STROKE,
+    borderColor: 'white',
+    position: 'absolute',
+  },
+  shutterButtonRecordingIndicator: {
+    width: CAROUSEL_SIZE,
+    height: CAROUSEL_SIZE,
+    position: 'absolute',
+    top: 0,
+    left: '50%',
+    transform: [{ translateX: -CAROUSEL_SIZE / 2 }, { rotateZ: '-90deg' }],
+  },
+});
diff --git a/apps/common-app/src/v3_api/chat_heads/index.tsx b/apps/common-app/src/v3_api/chat_heads/index.tsx
new file mode 100644
index 0000000000..2ade06d1c5
--- /dev/null
+++ b/apps/common-app/src/v3_api/chat_heads/index.tsx
@@ -0,0 +1,213 @@
+import React, { useState } from 'react';
+import { StyleSheet, ImageStyle, LayoutChangeEvent } from 'react-native';
+import { GestureDetector, usePanGesture } from 'react-native-gesture-handler';
+import Animated, {
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+  withSpring,
+} from 'react-native-reanimated';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { useHeaderHeight } from '@react-navigation/elements';
+
+const CHAT_HEADS = [
+  { imageUrl: 'https://avatars0.githubusercontent.com/u/379606?v=4&s=460' },
+  { imageUrl: 'https://avatars3.githubusercontent.com/u/90494?v=4&s=460' },
+  { imageUrl: 'https://avatars3.githubusercontent.com/u/726445?v=4&s=460' },
+  { imageUrl: 'https://avatars.githubusercontent.com/u/15989228?v=4&s=460' },
+];
+
+interface AnimatedOffset {
+  x: Animated.SharedValue<number>;
+  y: Animated.SharedValue<number>;
+}
+
+interface FollowingChatHeadProps {
+  imageUri: string;
+  offset: AnimatedOffset;
+  offsetToFollow: AnimatedOffset;
+  style?: ImageStyle;
+}
+
+function FollowingChatHead({
+  imageUri,
+  style,
+  offset,
+  offsetToFollow,
+}: FollowingChatHeadProps) {
+  useDerivedValue(() => {
+    offset.x.value = withSpring(offsetToFollow.x.value);
+    offset.y.value = withSpring(offsetToFollow.y.value);
+  }, []);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [
+        { translateX: offset.x.value },
+        { translateY: offset.y.value },
+      ],
+    };
+  });
+
+  return (
+    <Animated.Image
+      style={[styles.box, style, animatedStyle]}
+      source={{
+        uri: imageUri,
+      }}
+    />
+  );
+}
+
+function useOffsetAnimatedValue() {
+  return {
+    x: useSharedValue(0),
+    y: useSharedValue(0),
+  };
+}
+
+function clampToValues({
+  value,
+  bottom,
+  top,
+}: {
+  value: number;
+  bottom: number;
+  top: number;
+}) {
+  'worklet';
+  return Math.max(bottom, Math.min(value, top));
+}
+
+const Example = () => {
+  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+  const panOffset = useOffsetAnimatedValue();
+  const mainChatHeadPosition = useOffsetAnimatedValue();
+  const chatHeadsOffsets = CHAT_HEADS.map(useOffsetAnimatedValue);
+  const headerHeight = useHeaderHeight();
+
+  const onLayout = ({ nativeEvent }: LayoutChangeEvent) => {
+    const { width, height } = nativeEvent.layout;
+    setDimensions({ width, height });
+  };
+
+  const panHandler = usePanGesture({
+    onUpdate: (e) => {
+      'worklet';
+      panOffset.x.value = mainChatHeadPosition.x.value + e.translationX;
+      panOffset.y.value = mainChatHeadPosition.y.value + e.translationY;
+    },
+    onDeactivate: (e) => {
+      'worklet';
+      const { height, width } = dimensions;
+
+      const velocityDragX = clampToValues({
+        value: e.velocityX * 0.05,
+        bottom: -100,
+        top: 100,
+      });
+      const velocityDragY = clampToValues({
+        value: e.velocityY * 0.05,
+        bottom: -100,
+        top: 100,
+      });
+
+      const distFromTop = e.absoluteY + velocityDragY - headerHeight;
+      const distFromBottom = height + velocityDragY - e.absoluteY;
+      const distFromLeft = e.absoluteX + velocityDragX;
+      const distFromRight = width - e.absoluteX + velocityDragX;
+
+      const minDist = Math.min(
+        distFromTop,
+        distFromBottom,
+        distFromLeft,
+        distFromRight
+      );
+
+      // drag to the edge
+      switch (minDist) {
+        case distFromTop: {
+          panOffset.y.value = withSpring(-IMAGE_SIZE / 2);
+          panOffset.x.value = withSpring(panOffset.x.value + velocityDragX);
+          mainChatHeadPosition.y.value = -IMAGE_SIZE / 2;
+          mainChatHeadPosition.x.value = panOffset.x.value;
+          break;
+        }
+        case distFromBottom: {
+          panOffset.y.value = withSpring(height - IMAGE_SIZE / 2);
+          panOffset.x.value = withSpring(panOffset.x.value + velocityDragX);
+          mainChatHeadPosition.y.value = height - IMAGE_SIZE / 2;
+          mainChatHeadPosition.x.value = panOffset.x.value;
+          break;
+        }
+        case distFromLeft: {
+          panOffset.x.value = withSpring(-IMAGE_SIZE / 2);
+          panOffset.y.value = withSpring(panOffset.y.value + velocityDragY);
+          mainChatHeadPosition.x.value = -IMAGE_SIZE / 2;
+          mainChatHeadPosition.y.value = panOffset.y.value;
+          break;
+        }
+        case distFromRight: {
+          panOffset.x.value = withSpring(width - IMAGE_SIZE / 2);
+          panOffset.y.value = withSpring(panOffset.y.value + velocityDragY);
+          mainChatHeadPosition.x.value = width - IMAGE_SIZE / 2;
+          mainChatHeadPosition.y.value = panOffset.y.value;
+          break;
+        }
+      }
+    },
+  });
+
+  const headsComponents = CHAT_HEADS.map(({ imageUrl }, idx) => {
+    const headOffset = chatHeadsOffsets[idx];
+    if (idx === 0) {
+      return (
+        <GestureDetector gesture={panHandler} key={imageUrl}>
+          <FollowingChatHead
+            offsetToFollow={panOffset}
+            imageUri={imageUrl}
+            offset={headOffset}
+          />
+        </GestureDetector>
+      );
+    }
+
+    return (
+      <FollowingChatHead
+        key={imageUrl}
+        imageUri={imageUrl}
+        style={{
+          marginLeft: idx * 5,
+          marginTop: idx * 5,
+        }}
+        offset={headOffset}
+        offsetToFollow={chatHeadsOffsets[idx - 1]}
+      />
+    );
+  });
+
+  return (
+    <SafeAreaView style={styles.container} onLayout={onLayout}>
+      {/* we want ChatHead with gesture on top  */}
+      {headsComponents.reverse()}
+    </SafeAreaView>
+  );
+};
+
+export default Example;
+
+const IMAGE_SIZE = 80;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  box: {
+    position: 'absolute',
+    width: IMAGE_SIZE,
+    height: IMAGE_SIZE,
+    borderColor: '#F5FCFF',
+    backgroundColor: 'plum',
+    borderRadius: IMAGE_SIZE / 2,
+  },
+});
diff --git a/apps/common-app/src/v3_api/fling/fling.tsx b/apps/common-app/src/v3_api/fling/fling.tsx
new file mode 100644
index 0000000000..aaae5d99fb
--- /dev/null
+++ b/apps/common-app/src/v3_api/fling/fling.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import {
+  Directions,
+  GestureDetector,
+  useFlingGesture,
+} from 'react-native-gesture-handler';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  Easing,
+} from 'react-native-reanimated';
+
+export default function V3Fling() {
+  const position = useSharedValue(0);
+  const beginPosition = useSharedValue(0);
+
+  const flingGesture = useFlingGesture({
+    direction: Directions.LEFT | Directions.RIGHT,
+    onBegin: (e) => {
+      'worklet';
+      beginPosition.value = e.x;
+    },
+    onActivate: (e) => {
+      'worklet';
+      const direction = Math.sign(e.x - beginPosition.value);
+      position.value = withTiming(position.value + direction * 50, {
+        duration: 300,
+        easing: Easing.bounce,
+      });
+    },
+  });
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: position.value }],
+  }));
+
+  return (
+    <View style={styles.centerView}>
+      <GestureDetector gesture={flingGesture}>
+        <Animated.View style={[styles.box, animatedStyle]} />
+      </GestureDetector>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  centerView: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  box: {
+    height: 120,
+    width: 120,
+    backgroundColor: '#b58df1',
+    marginBottom: 30,
+  },
+});
diff --git a/apps/common-app/src/v3_api/hover/index.tsx b/apps/common-app/src/v3_api/hover/index.tsx
new file mode 100644
index 0000000000..cfb654d91c
--- /dev/null
+++ b/apps/common-app/src/v3_api/hover/index.tsx
@@ -0,0 +1,134 @@
+import React from 'react';
+import { View, Text } from 'react-native';
+import {
+  GestureDetector,
+  HoverEffect,
+  useHoverGesture,
+} from 'react-native-gesture-handler';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+} from 'react-native-reanimated';
+
+function useColoredHover(color: string) {
+  const hovered = useSharedValue(false);
+
+  const style = useAnimatedStyle(() => ({
+    opacity: hovered.value ? 0.5 : 1,
+  }));
+
+  const gesture = useHoverGesture({
+    onBegin: () => {
+      'worklet';
+      hovered.value = true;
+      console.log('hover begin', color);
+    },
+    onActivate: () => {
+      'worklet';
+      console.log('hover start', color);
+    },
+    onDeactivate: (_, success) => {
+      'worklet';
+      console.log('hover end', color, 'failed', !success);
+    },
+    onFinalize: () => {
+      'worklet';
+      hovered.value = false;
+      console.log('hover finalize', color);
+    },
+    hoverEffect: HoverEffect.LIFT,
+  });
+
+  return [gesture, style] as const;
+}
+
+export default function Example() {
+  const [hover1, style1] = useColoredHover('red');
+
+  const [hover2, style2] = useColoredHover('green');
+
+  const [hover3, style3] = useColoredHover('red');
+
+  const [hover4, style4] = useColoredHover('green');
+
+  const [hover5, style5] = useColoredHover('blue');
+
+  return (
+    <View style={{ flex: 1 }}>
+      <Text>Parent & child</Text>
+      <GestureDetector gesture={hover1}>
+        <Animated.View
+          style={[
+            {
+              width: 200,
+              height: 200,
+              backgroundColor: 'red',
+              elevation: 8,
+            },
+            style1,
+          ]}>
+          <GestureDetector gesture={hover2}>
+            <Animated.View
+              style={[
+                {
+                  width: 100,
+                  height: 100,
+                  backgroundColor: 'green',
+                  elevation: 8,
+                },
+                style2,
+              ]}
+            />
+          </GestureDetector>
+        </Animated.View>
+      </GestureDetector>
+
+      <View style={{ height: 50 }} />
+
+      <Text>Absolute positioning</Text>
+      <View style={{ width: 200, height: 200 }}>
+        <GestureDetector gesture={hover3}>
+          <Animated.View
+            style={[
+              {
+                width: 200,
+                height: 200,
+                backgroundColor: 'red',
+                // zIndex: 10,
+              },
+              style3,
+            ]}
+          />
+        </GestureDetector>
+        <GestureDetector gesture={hover5}>
+          <Animated.View
+            style={[
+              {
+                width: 200,
+                height: 200,
+                backgroundColor: 'blue',
+                position: 'absolute',
+              },
+              style5,
+            ]}
+          />
+        </GestureDetector>
+
+        <GestureDetector gesture={hover4}>
+          <Animated.View
+            style={[
+              {
+                width: 100,
+                height: 100,
+                backgroundColor: 'green',
+                position: 'absolute',
+                // zIndex: 80,
+              },
+              style4,
+            ]}
+          />
+        </GestureDetector>
+      </View>
+    </View>
+  );
+}
diff --git a/apps/common-app/src/v3_api/hoverable_icons/index.tsx b/apps/common-app/src/v3_api/hoverable_icons/index.tsx
new file mode 100644
index 0000000000..7ae718e709
--- /dev/null
+++ b/apps/common-app/src/v3_api/hoverable_icons/index.tsx
@@ -0,0 +1,125 @@
+import React from 'react';
+import {
+  GestureDetector,
+  HoverEffect,
+  useHoverGesture,
+} from 'react-native-gesture-handler';
+import Animated, {
+  useAnimatedStyle,
+  useFrameCallback,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { Platform, StyleSheet } from 'react-native';
+
+// eslint-disable-next-line import-x/no-commonjs, @typescript-eslint/no-var-requires
+const SVG = require('../../new_api/hoverable_icons/svg.png');
+// eslint-disable-next-line import-x/no-commonjs, @typescript-eslint/no-var-requires
+const FREEZE = require('../../new_api/hoverable_icons/freeze.png');
+// eslint-disable-next-line import-x/no-commonjs, @typescript-eslint/no-var-requires
+const REA = require('../../new_api/hoverable_icons/rea.png');
+// eslint-disable-next-line import-x/no-commonjs, @typescript-eslint/no-var-requires
+const GH = require('../../new_api/hoverable_icons/gh.png');
+// eslint-disable-next-line import-x/no-commonjs, @typescript-eslint/no-var-requires
+const SCREENS = require('../../new_api/hoverable_icons/screens.png');
+
+const images = [GH, REA, SCREENS, SVG, FREEZE];
+const SIZE = 100;
+
+function BoxReanimated(props: { source: any }) {
+  const scale = useSharedValue(1);
+  const offsetX = useSharedValue(0);
+  const targetOffsetX = useSharedValue(0);
+  const offsetY = useSharedValue(0);
+  const targetOffsetY = useSharedValue(0);
+
+  useFrameCallback((frame) => {
+    offsetX.value +=
+      ((targetOffsetX.value - offsetX.value) *
+        0.15 *
+        (frame.timeSincePreviousFrame ?? 1)) /
+      16;
+    offsetY.value +=
+      ((targetOffsetY.value - offsetY.value) *
+        0.15 *
+        (frame.timeSincePreviousFrame ?? 1)) /
+      16;
+  });
+
+  const style = useAnimatedStyle(() => ({
+    transform: [
+      { scale: scale.value },
+      { translateX: offsetX.value },
+      { translateY: offsetY.value },
+    ],
+  }));
+
+  const hover = useHoverGesture({
+    onBegin: () => {
+      'worklet';
+      scale.value = withTiming(1.15, { duration: 100 });
+    },
+    onUpdate: (e) => {
+      'worklet';
+      const oX = e.x - SIZE / 2;
+      const oY = e.y - SIZE / 2;
+
+      targetOffsetX.value = Math.pow(Math.abs(oX), 0.3) * Math.sign(oX);
+      targetOffsetY.value = Math.pow(Math.abs(oY), 0.3) * Math.sign(oY);
+    },
+    onFinalize: () => {
+      'worklet';
+      scale.value = withTiming(1, { duration: 100 });
+      targetOffsetX.value = 0;
+      targetOffsetY.value = 0;
+    },
+  });
+
+  return (
+    <GestureDetector gesture={hover}>
+      <Animated.View style={{ overflow: 'visible' }}>
+        <Animated.Image source={props.source} style={[style, styles.image]} />
+      </Animated.View>
+    </GestureDetector>
+  );
+}
+
+function BoxNative(props: { source: any }) {
+  const hover = useHoverGesture({
+    hoverEffect: HoverEffect.LIFT,
+  });
+
+  return (
+    <GestureDetector gesture={hover}>
+      <Animated.Image source={props.source} style={styles.image} />
+    </GestureDetector>
+  );
+}
+
+export default function Example() {
+  const BoxComponent = Platform.OS === 'ios' ? BoxNative : BoxReanimated;
+
+  return (
+    <Animated.View style={styles.container}>
+      <Animated.View style={{ flexDirection: 'row', overflow: 'visible' }}>
+        {images.map((source, index) => (
+          <BoxComponent key={index} source={source} />
+        ))}
+      </Animated.View>
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  image: {
+    overflow: 'visible',
+    width: SIZE,
+    height: SIZE,
+    marginHorizontal: 8,
+  },
+});
diff --git a/apps/common-app/src/v3_api/lock/lock.tsx b/apps/common-app/src/v3_api/lock/lock.tsx
new file mode 100644
index 0000000000..abcd48c616
--- /dev/null
+++ b/apps/common-app/src/v3_api/lock/lock.tsx
@@ -0,0 +1,166 @@
+import React, { useState } from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  runOnJS,
+} from 'react-native-reanimated';
+import {
+  GestureDetector,
+  useCompetingGestures,
+  useLongPressGesture,
+  usePinchGesture,
+  useRotationGesture,
+  useSimultaneousGestures,
+  useTapGesture,
+} from 'react-native-gesture-handler';
+
+export default function Lock() {
+  const rotation = useSharedValue(-Math.PI / 2);
+  const savedRotation = useSharedValue(-Math.PI / 2);
+
+  const scale = useSharedValue(0.6);
+  const savedScale = useSharedValue(1);
+
+  const [locked, setLocked] = useState(true);
+  const snapThreshold = 0.4;
+  const scaleThreshold = 0.1;
+  const minScale = 0.5;
+  const maxScale = 1;
+  const TWO_PI = 2 * Math.PI;
+
+  // Tap to lock
+  const tap = useTapGesture({
+    onDeactivate: () => {
+      'worklet';
+      if (savedRotation.value === 0 && scale.value === maxScale) {
+        runOnJS(setLocked)(false);
+      }
+    },
+  });
+
+  // Long press to cancel tap
+  const longPress = useLongPressGesture({});
+
+  const confirm = useCompetingGestures(longPress, tap);
+
+  const rotationGesture = useRotationGesture({
+    onUpdate: (e) => {
+      'worklet';
+      rotation.value = savedRotation.value + e.rotation;
+
+      if (!locked) {
+        runOnJS(setLocked)(true);
+      }
+    },
+    onDeactivate: () => {
+      'worklet';
+
+      const nearestMultiple = Math.round(rotation.value / TWO_PI) * TWO_PI;
+
+      if (Math.abs(rotation.value - nearestMultiple) < snapThreshold) {
+        rotation.value = withTiming(nearestMultiple, { duration: 300 });
+        savedRotation.value = 0;
+      } else {
+        rotation.value = withTiming(-Math.PI / 2, { duration: 300 });
+        savedRotation.value = -Math.PI / 2;
+      }
+    },
+    simultaneousWith: confirm,
+  });
+
+  const pinchGesture = usePinchGesture({
+    onUpdate: (e) => {
+      'worklet';
+      const value = savedScale.value * e.scale;
+      if (value < minScale || value > maxScale) {
+        return;
+      }
+      scale.value = value;
+
+      if (!locked) {
+        runOnJS(setLocked)(true);
+      }
+    },
+    onDeactivate: () => {
+      'worklet';
+
+      if (Math.abs(scale.value - maxScale) < scaleThreshold) {
+        scale.value = withTiming(maxScale, { duration: 300 });
+      } else {
+        scale.value = withTiming(minScale, { duration: 300 });
+      }
+      savedScale.value = scale.value;
+    },
+    simultaneousWith: confirm,
+  });
+
+  const unlockingGesture = useSimultaneousGestures(
+    rotationGesture,
+    pinchGesture
+  );
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [
+      { rotateZ: `${(rotation.value / Math.PI) * 180}deg` },
+      { scale: scale.value },
+    ],
+  }));
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.outerBox}>
+        <GestureDetector gesture={unlockingGesture}>
+          <Animated.View style={[styles.box, animatedStyle]}>
+            <GestureDetector gesture={confirm}>
+              <Text style={styles.lockIcon}>{locked ? '🔒' : '🔓'}</Text>
+            </GestureDetector>
+          </Animated.View>
+        </GestureDetector>
+      </View>
+      <Text>{locked ? 'Locked' : 'Unlocked!'}</Text>
+      <Text style={styles.instructions}>
+        Tou unlock rotate 90 degrees clockwise, and scale to fill the square.
+        Then tap to confirm, longpress to cancel the tap
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  lockIcon: {
+    fontSize: 40,
+    color: '#fff',
+    fontWeight: 'bold',
+  },
+  instructions: {
+    color: '#9CA3AF',
+    marginTop: 8,
+    textAlign: 'center',
+    paddingHorizontal: 16,
+  },
+
+  outerBox: {
+    height: 200,
+    width: 200,
+    backgroundColor: 'gray',
+    borderRadius: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: 50,
+  },
+  box: {
+    height: 200,
+    width: 200,
+    backgroundColor: '#b58df1',
+    borderRadius: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
diff --git a/apps/common-app/src/v3_api/nested_text/nested_text.tsx b/apps/common-app/src/v3_api/nested_text/nested_text.tsx
new file mode 100644
index 0000000000..81262a9f66
--- /dev/null
+++ b/apps/common-app/src/v3_api/nested_text/nested_text.tsx
@@ -0,0 +1,166 @@
+import * as React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import {
+  Gesture,
+  GestureDetector,
+  InterceptingGestureDetector,
+  VirtualGestureDetector,
+  useTapGesture,
+} from 'react-native-gesture-handler';
+
+import { COLORS, Feedback } from '../../common';
+import { runOnJS } from 'react-native-reanimated';
+type Part = 'All Text' | 'try tapping on this part' | 'or on this part' | '';
+function NativeDetectorExample() {
+  const [tappedPart, setTappedPart] = React.useState<Part>('');
+  const resetState = () => {
+    setTappedPart('');
+  };
+
+  const tapAll = useTapGesture({
+    onActivate: () => {
+      'worklet';
+      console.log('Tapped on text!');
+      runOnJS(setTappedPart)('All Text');
+    },
+  });
+
+  const tapFirstPart = useTapGesture({
+    onActivate: () => {
+      'worklet';
+      console.log('Tapped on first part!');
+      runOnJS(setTappedPart)('try tapping on this part');
+    },
+  });
+
+  const tapSecondPart = useTapGesture({
+    onActivate: () => {
+      'worklet';
+      console.log('Tapped on second part!');
+      runOnJS(setTappedPart)('or on this part');
+    },
+  });
+
+  return (
+    <View style={styles.subcontainer}>
+      <Text style={styles.header}>
+        Native Detector example - this one should work
+      </Text>
+      <InterceptingGestureDetector gesture={tapAll}>
+        <Text style={{ fontSize: 18, textAlign: 'center' }}>
+          Some text example running with RNGH
+          <VirtualGestureDetector gesture={tapFirstPart}>
+            <Text style={{ fontSize: 24, color: COLORS.NAVY }}>
+              {' '}
+              try tapping on this part
+            </Text>
+          </VirtualGestureDetector>
+          <VirtualGestureDetector gesture={tapSecondPart}>
+            <Text style={{ fontSize: 28, color: COLORS.KINDA_BLUE }}>
+              {' '}
+              or on this part
+            </Text>
+          </VirtualGestureDetector>
+          this part is not special :(
+        </Text>
+      </InterceptingGestureDetector>
+      <Feedback
+        text={`Tapped part: ${tappedPart}`}
+        highlight={tappedPart}
+        color={partColors[tappedPart]}
+        resetState={resetState}
+      />
+    </View>
+  );
+}
+
+function LegacyDetectorExample() {
+  const [tappedPart, setTappedPart] = React.useState<Part>('');
+  const resetState = () => {
+    setTappedPart('');
+  };
+
+  const tapAll = Gesture.Tap().onStart(() => {
+    'worklet';
+    console.log('Tapped on text!');
+    runOnJS(setTappedPart)('All Text');
+  });
+
+  const tapFirstPart = Gesture.Tap().onStart(() => {
+    'worklet';
+    console.log('Tapped on first part!');
+    runOnJS(setTappedPart)('try tapping on this part');
+  });
+
+  const tapSecondPart = Gesture.Tap().onStart(() => {
+    'worklet';
+    console.log('Tapped on second part!');
+    runOnJS(setTappedPart)('or on this part');
+  });
+
+  return (
+    <View style={styles.subcontainer}>
+      <Text style={styles.header}>
+        Legacy Detector example - this one should only work on web
+      </Text>
+      <GestureDetector gesture={tapAll}>
+        <Text style={{ fontSize: 18, textAlign: 'center' }}>
+          Some text example running with RNGH
+          <GestureDetector gesture={tapFirstPart}>
+            <Text style={{ fontSize: 24, color: COLORS.NAVY }}>
+              {' '}
+              try tapping on this part
+            </Text>
+          </GestureDetector>
+          <GestureDetector gesture={tapSecondPart}>
+            <Text style={{ fontSize: 28, color: COLORS.KINDA_BLUE }}>
+              {' '}
+              or on this part
+            </Text>
+          </GestureDetector>
+          this part is not special :(
+        </Text>
+      </GestureDetector>
+      <Feedback
+        text={`Tapped part: ${tappedPart}`}
+        highlight={tappedPart}
+        color={partColors[tappedPart]}
+        resetState={resetState}
+      />
+    </View>
+  );
+}
+
+export default function NativeTextExample() {
+  return (
+    <View style={styles.container}>
+      <NativeDetectorExample />
+      <LegacyDetectorExample />
+    </View>
+  );
+}
+
+const partColors = {
+  'All Text': 'BLACK',
+  'try tapping on this part': COLORS.NAVY,
+  'or on this part': COLORS.KINDA_BLUE,
+  '': 'BLACK',
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  subcontainer: {
+    flex: 1,
+    gap: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderBottomWidth: 1,
+  },
+  header: {
+    fontSize: 18,
+    textAlign: 'center',
+    paddingHorizontal: 24,
+  },
+});
diff --git a/apps/common-app/src/v3_api/overlap/index.tsx b/apps/common-app/src/v3_api/overlap/index.tsx
new file mode 100644
index 0000000000..7bda3150e6
--- /dev/null
+++ b/apps/common-app/src/v3_api/overlap/index.tsx
@@ -0,0 +1,147 @@
+import React from 'react';
+import { StyleSheet, View, Text } from 'react-native';
+import {
+  GestureDetector,
+  InterceptingGestureDetector,
+  useTapGesture,
+  VirtualGestureDetector,
+} from 'react-native-gesture-handler';
+
+function Box(props: {
+  color: string;
+  overlap?: boolean;
+  children?: React.ReactNode;
+  elevated: boolean;
+}) {
+  return (
+    <View
+      style={[
+        styles.box,
+        { backgroundColor: props.color },
+        props.overlap ? styles.overlap : {},
+        props.elevated ? styles.elevated : {},
+      ]}>
+      {props.children}
+    </View>
+  );
+}
+
+function OverlapSiblings() {
+  const [elevated, setElevated] = React.useState('');
+
+  const tapRed = useTapGesture({
+    onDeactivate: (_e, success) => {
+      'worklet';
+      if (success) {
+        setElevated('red');
+      }
+    },
+    disableReanimated: true,
+  });
+
+  const tapGreen = useTapGesture({
+    onDeactivate: (_e, success) => {
+      'worklet';
+      if (success) {
+        setElevated('green');
+      }
+    },
+    disableReanimated: true,
+  });
+
+  return (
+    <View style={styles.row}>
+      <Text style={styles.text}>Overlap Siblings</Text>
+      <View style={{ width: 225 }}>
+        <GestureDetector gesture={tapRed}>
+          <Box color="#fa7f7c" elevated={elevated === 'red'} />
+        </GestureDetector>
+        <GestureDetector gesture={tapGreen}>
+          <Box color="#57b495" overlap elevated={elevated === 'green'} />
+        </GestureDetector>
+      </View>
+    </View>
+  );
+}
+
+function OverlapParents() {
+  const [elevated, setElevated] = React.useState('');
+
+  const tapRed = useTapGesture({
+    onDeactivate: (_e, success) => {
+      'worklet';
+      console.log('tap red');
+      if (success) {
+        setElevated('red');
+      }
+    },
+    disableReanimated: true,
+  });
+
+  const tapGreen = useTapGesture({
+    onDeactivate: (_e, success) => {
+      console.log('tap green');
+      if (success) {
+        setElevated('green');
+      }
+    },
+    disableReanimated: true,
+  });
+
+  return (
+    <View style={styles.row}>
+      <Text style={styles.text}>Overlap Child</Text>
+      <View style={{ width: 225 }}>
+        <InterceptingGestureDetector gesture={tapRed}>
+          <Box color="#fa7f7c" elevated={elevated === 'red'}>
+            <VirtualGestureDetector gesture={tapGreen}>
+              <Box color="#57b495" overlap elevated={elevated === 'green'} />
+            </VirtualGestureDetector>
+          </Box>
+        </InterceptingGestureDetector>
+      </View>
+    </View>
+  );
+}
+
+export default function Example() {
+  return (
+    <View style={styles.container}>
+      <OverlapSiblings />
+      <OverlapParents />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  row: {
+    padding: 30,
+    alignItems: 'center',
+    height: 225,
+    marginTop: 48,
+  },
+  box: {
+    width: 150,
+    height: 150,
+  },
+  overlap: {
+    position: 'absolute',
+    left: 75,
+    top: 75,
+  },
+  text: {
+    fontSize: 24,
+    margin: 4,
+  },
+  elevated: {
+    zIndex: 10,
+    elevation: 16,
+    shadowColor: 'black',
+    shadowOffset: { width: 0, height: 3 },
+    shadowOpacity: 0.5,
+    shadowRadius: 8,
+  },
+});
diff --git a/apps/common-app/src/v3_api/svg/svg.tsx b/apps/common-app/src/v3_api/svg/svg.tsx
new file mode 100644
index 0000000000..29c18855a5
--- /dev/null
+++ b/apps/common-app/src/v3_api/svg/svg.tsx
@@ -0,0 +1,89 @@
+import { Feedback } from '../../common';
+import React, { useState } from 'react';
+import { Text, View, StyleSheet } from 'react-native';
+import {
+  InterceptingGestureDetector,
+  useTapGesture,
+  VirtualGestureDetector,
+} from 'react-native-gesture-handler';
+import { runOnJS } from 'react-native-reanimated';
+
+import Svg, { Circle, Rect } from 'react-native-svg';
+
+type Element = 'circle!' | 'parallelogram!' | 'container!' | '';
+export default function LogicDetectorExample() {
+  const [tappedElement, setTappedElement] = useState<Element>('');
+  const resetState = () => {
+    setTappedElement('');
+  };
+
+  const circleElementTap = useTapGesture({
+    onActivate: () => {
+      'worklet';
+      console.log('clicked on Circle');
+      runOnJS(setTappedElement)('circle!');
+    },
+  });
+
+  const rectElementTap = useTapGesture({
+    onActivate: () => {
+      'worklet';
+      console.log('clicked on Parallelogram');
+      runOnJS(setTappedElement)('parallelogram!');
+    },
+  });
+
+  const containerTap = useTapGesture({
+    onActivate: () => {
+      'worklet';
+      console.log('clicked on container');
+      runOnJS(setTappedElement)('container!');
+    },
+  });
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.header}>Overlapping SVGs with gesture detectors</Text>
+
+      <View style={{ backgroundColor: 'tomato' }}>
+        <InterceptingGestureDetector gesture={containerTap}>
+          <Svg height="250" width="250">
+            <VirtualGestureDetector gesture={circleElementTap}>
+              <Circle cx="125" cy="125" r="125" fill="green" />
+            </VirtualGestureDetector>
+            <VirtualGestureDetector gesture={rectElementTap}>
+              <Rect skewX="45" width="125" height="250" fill="yellow" />
+            </VirtualGestureDetector>
+          </Svg>
+        </InterceptingGestureDetector>
+      </View>
+
+      <Feedback
+        text={`Tapped: ${tappedElement}`}
+        highlight={tappedElement}
+        color={partColors[tappedElement]}
+        resetState={resetState}
+      />
+    </View>
+  );
+}
+
+const partColors = {
+  'circle!': 'green',
+  'parallelogram!': 'yellow',
+  'container!': 'tomato',
+  '': 'BLACK',
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: 48,
+  },
+  header: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    margin: 10,
+  },
+});
diff --git a/apps/common-app/src/v3_api/velocity_test/index.tsx b/apps/common-app/src/v3_api/velocity_test/index.tsx
new file mode 100644
index 0000000000..4a2882a2d4
--- /dev/null
+++ b/apps/common-app/src/v3_api/velocity_test/index.tsx
@@ -0,0 +1,106 @@
+import { StyleSheet, View } from 'react-native';
+import Animated, {
+  interpolateColor,
+  measure,
+  useAnimatedRef,
+  useAnimatedStyle,
+  useSharedValue,
+  withDecay,
+  withTiming,
+} from 'react-native-reanimated';
+
+import React from 'react';
+import { GestureDetector, usePanGesture } from 'react-native-gesture-handler';
+
+const BOX_SIZE = 120;
+
+export default function App() {
+  const aref = useAnimatedRef<View>();
+  const offsetX = useSharedValue(0);
+  const offsetY = useSharedValue(0);
+  const isPressed = useSharedValue(false);
+  const colorProgress = useSharedValue(0);
+
+  const pan = usePanGesture({
+    onBegin: () => {
+      'worklet';
+      isPressed.value = true;
+      colorProgress.value = withTiming(1, {
+        duration: 100,
+      });
+    },
+    onUpdate: (event) => {
+      'worklet';
+      offsetX.value += event.changeX;
+      offsetY.value += event.changeY;
+    },
+    onFinalize: (event) => {
+      'worklet';
+      isPressed.value = false;
+      colorProgress.value = withTiming(0, {
+        duration: 100,
+      });
+      // If we can't get view size, just ignore it. Half of the view will be
+      // able to go outside the screen
+      const size = measure(aref) ?? { width: 0, height: 0 };
+
+      offsetX.value = withDecay({
+        velocity: event.velocityX,
+        clamp: [-size.width / 2 + BOX_SIZE / 2, size.width / 2 - BOX_SIZE / 2],
+        rubberBandEffect: true,
+        rubberBandFactor: 0.75,
+      });
+
+      offsetY.value = withDecay({
+        velocity: event.velocityY,
+        clamp: [
+          -size.height / 2 + BOX_SIZE / 2,
+          size.height / 2 - BOX_SIZE / 2,
+        ],
+        rubberBandEffect: true,
+        rubberBandFactor: 0.75,
+      });
+    },
+  });
+
+  const animatedStyles = useAnimatedStyle(() => {
+    const backgroundColor = interpolateColor(
+      colorProgress.value,
+      [0, 1],
+      ['#0a2688', '#6fcef5']
+    );
+
+    return {
+      transform: [
+        { translateX: offsetX.value },
+        { translateY: offsetY.value },
+        { scale: withTiming(isPressed.value ? 1.2 : 1, { duration: 100 }) },
+      ],
+      backgroundColor,
+    };
+  });
+
+  return (
+    <View style={styles.container} ref={aref} collapsable={false}>
+      <GestureDetector gesture={pan}>
+        <Animated.View style={[styles.box, animatedStyles]} />
+      </GestureDetector>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: '100%',
+  },
+  box: {
+    width: BOX_SIZE,
+    height: BOX_SIZE,
+    borderRadius: BOX_SIZE / 2,
+    // @ts-expect-error `grab` is correct value for `cursor` property
+    cursor: 'grab',
+  },
+});