diff --git a/package-lock.json b/package-lock.json
index 380df966..94c742f0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -104,6 +104,7 @@
         "remark-gfm": "^4.0.0",
         "remark-math": "^6.0.0",
         "remove-markdown": "^0.5.5",
+        "resize-observer-polyfill": "^1.5.1",
         "sanitize.css": "^13.0.0",
         "screenfull": "^6.0.2",
         "sse": "github:mpetazzoni/sse.js",
@@ -145,6 +146,7 @@
         "@types/react": "^18.3.12",
         "@types/react-dom": "^18.3.1",
         "@types/react-test-renderer": "^18.3.0",
+        "@types/resize-observer-browser": "^0.1.11",
         "@types/three": "^0.170.0",
         "@types/user-agents": "^1.0.4",
         "@typescript-eslint/eslint-plugin": "^8.16.0",
@@ -10062,6 +10064,13 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/resize-observer-browser": {
+      "version": "0.1.11",
+      "resolved": "https://registry.npmmirror.com/@types/resize-observer-browser/-/resize-observer-browser-0.1.11.tgz",
+      "integrity": "sha512-cNw5iH8JkMkb3QkCoe7DaZiawbDQEUX8t7iuQaRTyLOyQCR2h+ibBD4GJt7p5yhUHrlOeL7ZtbxNHeipqNsBzQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/retry": {
       "version": "0.12.2",
       "dev": true,
@@ -32570,6 +32579,8 @@
     },
     "node_modules/resize-observer-polyfill": {
       "version": "1.5.1",
+      "resolved": "https://registry.npmmirror.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==",
       "license": "MIT"
     },
     "node_modules/resolve": {
diff --git a/package.json b/package.json
index 3c84d246..bc3371b3 100644
--- a/package.json
+++ b/package.json
@@ -111,6 +111,7 @@
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@types/react-test-renderer": "^18.3.0",
+    "@types/resize-observer-browser": "^0.1.11",
     "@types/three": "^0.170.0",
     "@types/user-agents": "^1.0.4",
     "@typescript-eslint/eslint-plugin": "^8.16.0",
@@ -307,6 +308,7 @@
     "remark-gfm": "^4.0.0",
     "remark-math": "^6.0.0",
     "remove-markdown": "^0.5.5",
+    "resize-observer-polyfill": "^1.5.1",
     "sanitize.css": "^13.0.0",
     "screenfull": "^6.0.2",
     "sse": "github:mpetazzoni/sse.js",
diff --git a/src/components/container/masonryContainer/index.jsx b/src/components/container/masonryContainer/index.jsx
index aad6acad..94383279 100644
--- a/src/components/container/masonryContainer/index.jsx
+++ b/src/components/container/masonryContainer/index.jsx
@@ -1,6 +1,6 @@
 import useMasonry from '@hooks/useMasonry'
 
-const Masonry = () => {
+const MyMasonry = () => {
   const masonryContainer = useMasonry()
   return (
     <div
@@ -29,4 +29,4 @@ const Masonry = () => {
   )
 }
 
-export default Masonry
+export default MyMasonry
diff --git a/src/components/hooks/useMasonry/index.tsx b/src/components/hooks/useMasonry/index.tsx
index 269147d7..6ade020a 100644
--- a/src/components/hooks/useMasonry/index.tsx
+++ b/src/components/hooks/useMasonry/index.tsx
@@ -1,10 +1,10 @@
-import { useEffect, useState, useRef } from 'react'
+import { useEffect, useLayoutEffect, useState, useRef } from 'react'
 
 const useMasonry = () => {
   const masonryContainer = useRef<HTMLDivElement | null>(null)
   const [items, setItems] = useState<ChildNode[]>([])
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (masonryContainer.current) {
       const masonryItem = Array.from(masonryContainer.current.children)
       setItems(masonryItem)
diff --git a/src/components/hooks/useRect/index.tsx b/src/components/hooks/useRect/index.tsx
new file mode 100644
index 00000000..33329237
--- /dev/null
+++ b/src/components/hooks/useRect/index.tsx
@@ -0,0 +1,60 @@
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
+
+import ResizeObserver from 'resize-observer-polyfill'
+
+type RectResult = {
+  bottom: number;
+  height: number;
+  left: number;
+  right: number;
+  top: number;
+  width: number;
+} | null;
+
+const getRect = (element: HTMLElement | null): RectResult | null => {
+  if (!element) return null;
+  return element.getBoundingClientRect();
+};
+
+const useRect = (): [
+  RectResult,
+  React.MutableRefObject<HTMLDivElement | null>
+] => {
+  const ref = useRef<HTMLDivElement | null>(null);
+  const current = ref.current || null;
+  const [rect, setRect] = useState(getRect(current));
+
+  const handleResize = useCallback(() => {
+    if (!ref.current) return;
+
+    // Update client rect
+    setRect(getRect(ref.current));
+  }, [ref]);
+
+  useLayoutEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+
+    handleResize();
+    if (typeof ResizeObserver === "function") {
+      let resizeObserver: ResizeObserver | null = new ResizeObserver(() =>
+        handleResize()
+      );
+      resizeObserver.observe(element);
+
+      return () => {
+        if (!resizeObserver) return;
+        resizeObserver.disconnect();
+        resizeObserver = null;
+      };
+    }
+    // set resize listener
+    window.addEventListener("resize", handleResize);
+    // remove resize listener
+    return () => window.removeEventListener("resize", handleResize);
+  }, [handleResize]);
+
+  return [rect, ref];
+};
+
+export default useRect
diff --git a/src/pages/home/index.jsx b/src/pages/home/index.jsx
index 47f2f7cc..657b9197 100644
--- a/src/pages/home/index.jsx
+++ b/src/pages/home/index.jsx
@@ -27,6 +27,7 @@ import AnimateOnScreen from '@stateless/AnimateOnScreen'
 import AnimateRipple from '@stateless/AnimateRipple'
 import AnimateWave from '@stateless/AnimateWave'
 import MeshGradientBackground from '@stateless/MeshGradientBackground'
+import useRect from '@hooks/useRect'
 import TagCloud from '@stateless/TagCloud'
 // import SlideLinear from '@stateless/SlideLinear'
 // import Masonry from '@container/masonryContainer'
@@ -165,7 +166,9 @@ const Home = () => {
       })
   }
 
-  const { scrollDir, scrollPosition } = useDetectScroll({target: document.getElementById('container')})
+  // const { scrollDir, scrollPosition } = useDetectScroll({target: document.getElementById('container')})
+
+  const [barRect, barRef] = useRect()
 
   return (
     <FixTabPanel>
@@ -192,12 +195,12 @@ const Home = () => {
       <section style={{ display: 'flex', alignItems: 'center', marginTop: 10, marginBottom: 40 }}>
         <Atom /> <Merge /> <GitMerge /> <GitPullRequestArrow />
       </section>
-      <section style={{ marginBottom: 40, fontSize: 16 }}>
+      {/* <section style={{ marginBottom: 40, fontSize: 16 }}>
         <h2>Scroll direction: {`${scrollDir}`}</h2>
         <p>
           Scroll position - Top: {scrollPosition.top}, Bottom: {scrollPosition.bottom}
         </p>
-      </section>
+      </section> */}
       <section style={{ marginBottom: 40, fontSize: 16 }}>
         <h3>
           React Animate On Scroll.
@@ -274,11 +277,14 @@ const Home = () => {
           <section></section>
         </SpotlightCard>
       </section>
-      <section className={styles.box} style={{ marginBottom: 40, width: 360, height: 200, position: 'relative', backgroundColor: 'rgba(0, 0,0, 0.9)', borderRadius:8 }}>
-        <section className={styles.dotMask}>
-          我的中国心
+      <section className={styles.box} style={{ marginBottom: 10, width: 360, height: 200, position: 'relative', backgroundColor: 'rgba(0, 0,0, 0.9)', borderRadius:8 }}>
+        <section className={styles.dotMask} ref={barRef}>
+          dot mask
         </section>
       </section>
+      <section style={{ marginBottom: 40, fontSize: 18 }}>
+        <section>RectResult.</section>
+        width: {parseInt(barRect?.width)} height: {parseInt(barRect?.height)} top: {parseInt(barRect?.top)} bottom: {parseInt(barRect?.bottom)} right: {parseInt(barRect?.right)} left: {parseInt(barRect?.left)}</section>
       <section style={{ marginBottom: 40, height: 200, width: 360, overflow: 'hidden' }}>
         <MeshGradientBackground />
       </section>
@@ -373,6 +379,10 @@ const Home = () => {
             <LazyLoadImage src="https://picsum.photos/id/6/300/100" alt="Strawberries" />
             <LazyLoadImage src="https://picsum.photos/id/7/300/150" alt="Strawberries" />
             <LazyLoadImage src="https://picsum.photos/id/8/300/200" alt="Strawberries" />
+            <LazyLoadImage src="https://picsum.photos/id/1/300/100" alt="Strawberries" />
+            <LazyLoadImage src="https://picsum.photos/id/2/300/200" alt="Strawberries" />
+            <LazyLoadImage src="https://picsum.photos/id/3/300/150" alt="Strawberries" />
+            <LazyLoadImage src="https://picsum.photos/id/4/300/150" alt="Strawberries" />
           </Masonry>
         </ResponsiveMasonry>
       </section>
@@ -389,7 +399,6 @@ const Home = () => {
           <div style={{ width: 200, height: 40, lineHeight: '40px', textAlign: 'center', background: '#aaa', margin: '0 10px', borderRadius: 4 }}>Vue</div>
         </Marquee>
       </section>
-
     </FixTabPanel>
   )
 }