diff --git a/example/package.json b/example/package.json
index ccf93ccc..d7c07acd 100644
--- a/example/package.json
+++ b/example/package.json
@@ -18,11 +18,13 @@
         "predeploy": "yarn build:web"
     },
     "dependencies": {
+        "@faker-js/faker": "^6.0.0-beta.0",
         "@react-navigation/core": "^6.1.0",
         "@react-navigation/native": "^6.0.6",
         "@react-navigation/native-stack": "^6.2.5",
         "babel-loader": "^8.2.3",
         "expo": "^41.0.0",
+        "expo-blur": "~9.0.3",
         "expo-constants": "~10.1.3",
         "expo-splash-screen": "~0.10.2",
         "react": "16.13.1",
diff --git a/example/src/flow/index.tsx b/example/src/flow/index.tsx
new file mode 100644
index 00000000..057d1ce1
--- /dev/null
+++ b/example/src/flow/index.tsx
@@ -0,0 +1,157 @@
+import * as React from 'react';
+import { interpolate } from 'react-native-reanimated';
+import Carousel from 'react-native-reanimated-carousel';
+import type { TAnimationStyle } from '../../../src/layouts/BaseLayout';
+import { window } from '../constants';
+import { useHeaderHeight } from '@react-navigation/elements';
+import { Text, View } from 'react-native-ui-lib';
+import { BlurView } from 'expo-blur';
+import { faker } from '@faker-js/faker';
+import { Image } from 'react-native';
+
+function Index() {
+    const headerHeight = useHeaderHeight();
+    const scale = 0.9;
+
+    const RIGHT_OFFSET = window.width * (1 - scale);
+
+    const ITEM_WIDTH = window.width * scale;
+    const ITEM_HEIGHT = 120;
+
+    const PAGE_HEIGHT = window.height - headerHeight;
+    const PAGE_WIDTH = window.width;
+
+    const animationStyle: TAnimationStyle = React.useCallback(
+        (value: number) => {
+            'worklet';
+
+            const translateY = interpolate(
+                value,
+                [-1, 0, 1],
+                [-ITEM_HEIGHT, 0, ITEM_HEIGHT]
+            );
+            const right = interpolate(
+                value,
+                [-1, -0.2, 1],
+                [RIGHT_OFFSET / 2, RIGHT_OFFSET, RIGHT_OFFSET / 3]
+            );
+            return {
+                transform: [{ translateY }],
+                right,
+            };
+        },
+        [RIGHT_OFFSET]
+    );
+
+    return (
+        <View style={{ flex: 1 }}>
+            <Image
+                source={{
+                    uri:
+                        faker.image.nature(PAGE_WIDTH, PAGE_HEIGHT) +
+                        '?random=' +
+                        Math.random(),
+                }}
+                style={{
+                    width: PAGE_WIDTH,
+                    height: PAGE_HEIGHT,
+                    position: 'absolute',
+                }}
+            />
+            <BlurView
+                intensity={80}
+                tint="dark"
+                style={{
+                    width: PAGE_WIDTH,
+                    height: PAGE_HEIGHT,
+                    position: 'absolute',
+                }}
+            />
+            <Carousel
+                loop
+                vertical
+                style={{
+                    justifyContent: 'center',
+                    width: PAGE_WIDTH,
+                    height: PAGE_HEIGHT,
+                }}
+                width={ITEM_WIDTH}
+                pagingEnabled={false}
+                height={ITEM_HEIGHT}
+                data={[...new Array(10).keys()]}
+                renderItem={({ index }) => {
+                    return (
+                        <View key={index} flex padding-10>
+                            <View
+                                flex
+                                br20
+                                row
+                                spread
+                                style={{
+                                    alignItems: 'flex-start',
+                                }}
+                            >
+                                <View row centerV>
+                                    <Image
+                                        style={{
+                                            width: 20,
+                                            height: 20,
+                                            borderRadius: 10,
+                                            marginRight: 5,
+                                        }}
+                                        source={{
+                                            uri:
+                                                faker.image.animals(20, 20) +
+                                                '?random=' +
+                                                Math.random(),
+                                        }}
+                                    />
+                                    <Text
+                                        numberOfLines={1}
+                                        style={{
+                                            maxWidth: ITEM_WIDTH * 0.3 - 40,
+                                        }}
+                                        white
+                                    >
+                                        {faker.animal.dog()}
+                                    </Text>
+                                </View>
+                                <View
+                                    style={{
+                                        width: ITEM_WIDTH * 0.6,
+                                        height: ITEM_HEIGHT - 20,
+                                        borderRadius: 10,
+                                        overflow: 'hidden',
+                                    }}
+                                >
+                                    <Image
+                                        style={{
+                                            width: ITEM_WIDTH * 0.6,
+                                            height: ITEM_HEIGHT - 20,
+                                            borderRadius: 10,
+                                            marginRight: 5,
+                                        }}
+                                        source={{
+                                            uri:
+                                                faker.image.nature(
+                                                    Math.round(
+                                                        ITEM_WIDTH * 0.6
+                                                    ),
+                                                    ITEM_HEIGHT - 20
+                                                ) +
+                                                '?random=' +
+                                                Math.random(),
+                                        }}
+                                    />
+                                </View>
+                            </View>
+                        </View>
+                    );
+                }}
+                customAnimation={animationStyle}
+            />
+        </View>
+    );
+}
+
+export default Index;
diff --git a/example/src/home/index.tsx b/example/src/home/index.tsx
index f04b016d..d3f22d98 100644
--- a/example/src/home/index.tsx
+++ b/example/src/home/index.tsx
@@ -24,6 +24,9 @@ const LayoutsPage: Array<Record<'name', keyof RootStackParamList>> = [
 ];
 
 const CustomAnimations: Array<Record<'name', keyof RootStackParamList>> = [
+    {
+        name: 'Flow',
+    },
     {
         name: 'AdvancedParallax',
     },
diff --git a/example/src/index.tsx b/example/src/index.tsx
index 12b151ba..d329db17 100644
--- a/example/src/index.tsx
+++ b/example/src/index.tsx
@@ -19,6 +19,7 @@ import RotateInOutComponent from './rotate-in-out';
 import RotateScaleFadeInOutComponent from './rotate-scale-fade-in-out';
 import AnimTabBarComponent from './anim-tab-bar';
 import MarqueeComponent from './marquee';
+import Flow from './flow';
 import { isWeb } from './utils';
 import { window } from './constants';
 import { QRCode } from './components/QRCode';
@@ -39,6 +40,7 @@ export type RootStackParamList = {
     Parallax: undefined;
     Stack: undefined;
 
+    Flow: undefined;
     Complex: undefined;
     AdvancedParallax: undefined;
     PauseAdvancedParallax: undefined;
@@ -113,6 +115,7 @@ function App() {
                             component={ParallaxComponent}
                         />
                         <Stack.Screen name="Stack" component={StackComponent} />
+                        <Stack.Screen name="Flow" component={Flow} />
                         <Stack.Screen
                             name="Complex"
                             component={ComplexComponent}
diff --git a/example/yarn.lock b/example/yarn.lock
index ffe69b17..54d9005c 100644
--- a/example/yarn.lock
+++ b/example/yarn.lock
@@ -1783,6 +1783,11 @@
     find-up "^5.0.0"
     js-yaml "^4.1.0"
 
+"@faker-js/faker@^6.0.0-beta.0":
+  version "6.0.0-beta.0"
+  resolved "https://registry.npmmirror.com/@faker-js/faker/-/faker-6.0.0-beta.0.tgz#8d772b0c37ebc450e3a95114be549e8fd245f16f"
+  integrity sha512-7QdsX5ZqUEz87twuoKEJe7NHn6OHQsVYQpJcK0disnR0XuVb9FEgQUcsViard9OTNN/fG/nZT63V35vieOwZ4Q==
+
 "@gar/promisify@^1.0.1":
   version "1.1.3"
   resolved "https://registry.npmmirror.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6"
@@ -5791,6 +5796,11 @@ expo-asset@~8.3.1:
     path-browserify "^1.0.0"
     url-parse "^1.4.4"
 
+expo-blur@~9.0.3:
+  version "9.0.3"
+  resolved "https://registry.npmmirror.com/expo-blur/-/expo-blur-9.0.3.tgz#5095b5bd04d000f73b351d0e4736767b86b49bbd"
+  integrity sha512-7jMqzo53eg5t9Uc1Tg+yGu9lKL9the4CWAQO0kC6YMhrsDiB13mwOUesC+IScHDTSUKNMGcHI8kN+OmvEWfPig==
+
 expo-cli@^4.0.13:
   version "4.13.0"
   resolved "https://registry.npmmirror.com/expo-cli/-/expo-cli-4.13.0.tgz#975e8fe4244b763e958ac48024923507738da371"