diff --git a/src/components/stateless/AnimationTabs/index.jsx b/src/components/stateless/AnimationTabs/index.jsx
index d6372db9..2635dfb7 100644
--- a/src/components/stateless/AnimationTabs/index.jsx
+++ b/src/components/stateless/AnimationTabs/index.jsx
@@ -35,18 +35,18 @@ const AnimationTabs = ({ tabs: propTabs, containerClassName, activeTabClassName,
             onMouseLeave={() => setHovering(false)}
             className={clsx('relative px-4 py-2 rounded-full', tabClassName)}
             style={{
-              transformStyle: 'preserve-3d',
+              transformStyle: 'preserve-3d'
             }}
           >
             {active.value === tab.value && (
               <motion.div
-                layoutId="clickedButton"
+                layoutId='clickedButton'
                 transition={{ type: 'spring', bounce: 0.3, duration: 0.6 }}
                 className={clsx('absolute inset-0 bg-gray-200 dark:bg-zinc-800 rounded-full', activeTabClassName)}
               />
             )}
 
-            <span className="relative block text-black dark:text-white">{tab.title}</span>
+            <span className='relative block text-black dark:text-white'>{tab.title}</span>
           </button>
         ))}
       </div>
@@ -66,7 +66,7 @@ export const FadeInDiv = ({ className, tabs, hovering }) => {
     return tab.value === tabs[0].value
   }
   return (
-    <div className="relative w-full h-full">
+    <div className='relative w-full h-full'>
       {tabs.map((tab, idx) => (
         <motion.div
           key={tab.value}
@@ -75,10 +75,10 @@ export const FadeInDiv = ({ className, tabs, hovering }) => {
             scale: 1 - idx * 0.1,
             top: hovering ? idx * -50 : 0,
             zIndex: -idx,
-            opacity: idx < 3 ? 1 - idx * 0.1 : 0,
+            opacity: idx < 3 ? 1 - idx * 0.1 : 0
           }}
           animate={{
-            y: isActive(tab) ? [0, 40, 0] : 0,
+            y: isActive(tab) ? [0, 40, 0] : 0
           }}
           className={clsx('w-full h-full absolute top-0 left-0', className)}
         >
diff --git a/src/pages/demo/index.jsx b/src/pages/demo/index.jsx
index 34fe7105..21e8be6a 100644
--- a/src/pages/demo/index.jsx
+++ b/src/pages/demo/index.jsx
@@ -7,19 +7,19 @@ const columns = [
     title: 'Name',
     align: 'center',
     dataIndex: 'name',
-    width: 150,
+    width: 150
   },
   {
     title: 'Age',
     align: 'center',
     dataIndex: 'age',
-    width: 150,
+    width: 150
   },
   {
     title: 'Address',
     align: 'center',
-    dataIndex: 'address',
-  },
+    dataIndex: 'address'
+  }
 ]
 
 const tabs = [
@@ -27,52 +27,52 @@ const tabs = [
     title: 'Product',
     value: 'product',
     content: (
-      <div className="relative w-full h-full p-10 overflow-hidden text-xl font-bold text-white rounded-2xl md:text-4xl bg-gradient-to-br from-purple-700 to-violet-900">
+      <div className='relative w-full h-full p-10 overflow-hidden text-xl font-bold text-white rounded-2xl md:text-4xl bg-gradient-to-br from-purple-700 to-violet-900'>
         <p>Product Tab</p>
       </div>
-    ),
+    )
   },
   {
     title: 'Services',
     value: 'services',
     content: (
-      <div className="relative w-full h-full p-10 overflow-hidden text-xl font-bold text-white rounded-2xl md:text-4xl bg-gradient-to-br from-purple-700 to-violet-900">
+      <div className='relative w-full h-full p-10 overflow-hidden text-xl font-bold text-white rounded-2xl md:text-4xl bg-gradient-to-br from-purple-700 to-violet-900'>
         <p>Services tab</p>
       </div>
-    ),
+    )
   },
   {
     title: 'Playground',
     value: 'playground',
     content: (
-      <div className="relative w-full h-full p-10 overflow-hidden text-xl font-bold text-white rounded-2xl md:text-4xl bg-gradient-to-br from-purple-700 to-violet-900">
+      <div className='relative w-full h-full p-10 overflow-hidden text-xl font-bold text-white rounded-2xl md:text-4xl bg-gradient-to-br from-purple-700 to-violet-900'>
         <p>Playground tab</p>
       </div>
-    ),
+    )
   },
   {
     title: 'Content',
     value: 'content',
     content: (
-      <div className="relative w-full h-full p-10 overflow-hidden text-xl font-bold text-white rounded-2xl md:text-4xl bg-gradient-to-br from-purple-700 to-violet-900">
+      <div className='relative w-full h-full p-10 overflow-hidden text-xl font-bold text-white rounded-2xl md:text-4xl bg-gradient-to-br from-purple-700 to-violet-900'>
         <p>Content tab</p>
       </div>
-    ),
+    )
   },
   {
     title: 'Random',
     value: 'random',
     content: (
-      <div className="relative w-full h-full p-10 overflow-hidden text-xl font-bold text-white rounded-2xl md:text-4xl bg-gradient-to-br from-purple-700 to-violet-900">
+      <div className='relative w-full h-full p-10 overflow-hidden text-xl font-bold text-white rounded-2xl md:text-4xl bg-gradient-to-br from-purple-700 to-violet-900'>
         <p>Random tab</p>
       </div>
-    ),
-  },
+    )
+  }
 ]
 const ProDemo = () => {
   return (
     <FixTabPanel>
-      <div className="h-[20rem] [perspective:1000px] relative b flex flex-col max-w-5xl mx-auto w-full  items-start justify-start">
+      <div className='h-[20rem] [perspective:1000px] relative b flex flex-col max-w-5xl mx-auto w-full  items-start justify-start'>
         <AnimationTabs tabs={tabs} />
       </div>
       <Table columns={columns} dataSource={[]} pagination={{ pageSize: 50 }} scroll={{ y: 240 }} />
diff --git a/src/pages/motion/index.jsx b/src/pages/motion/index.jsx
index 26d68982..cb9c6dd8 100644
--- a/src/pages/motion/index.jsx
+++ b/src/pages/motion/index.jsx
@@ -8,7 +8,7 @@ import {
   useSpring,
   useTransform,
   useMotionValue,
-  animate,
+  animate
 } from 'motion/react'
 import clsx from 'clsx'
 import FixTabPanel from '@stateless/FixTabPanel'
@@ -18,32 +18,32 @@ import styles from './index.module.less'
 const animations = {
   show: {
     opacity: 1,
-    filter: 'blur(0)',
+    filter: 'blur(0)'
   },
   hidden: {
     opacity: 0,
-    filter: 'blur(10px)',
-  },
+    filter: 'blur(10px)'
+  }
 }
 
 const list = {
   visible: { opacity: 1 },
-  hidden: { opacity: 0 },
+  hidden: { opacity: 0 }
 }
 
 const item = {
   visible: { opacity: 1, x: 0 },
-  hidden: { opacity: 0, x: -100 },
+  hidden: { opacity: 0, x: -100 }
 }
 
 const variantsText = {
   visible: (i) => ({
     opacity: i * 0.3,
     transition: {
-      delay: i * 0.3,
-    },
+      delay: i * 0.3
+    }
   }),
-  hidden: { opacity: 0 },
+  hidden: { opacity: 0 }
 }
 
 const btnStyle = {
@@ -56,7 +56,7 @@ const btnStyle = {
   letterSpacing: 1,
   borderRadius: 20,
   cursor: 'pointer',
-  whiteSpace: 'nowrap',
+  whiteSpace: 'nowrap'
 }
 const easeNames = [
   'linear',
@@ -69,11 +69,11 @@ const easeNames = [
   'backIn',
   'backOut',
   'backInOut',
-  'anticipate',
+  'anticipate'
 ]
 
 const randomSort = (arr) => {
-  let newArr = []
+  const newArr = []
   const len = arr.length
   for (let i = 0; i < len; i++) {
     const random = Math.floor(Math.random() * arr.length)
@@ -108,18 +108,18 @@ const ParallaxVert = () => {
   const scrollRef = useRef(null)
 
   const { scrollYProgress, scrollY } = useScroll({
-    container: scrollRef,
+    container: scrollRef
   })
   const { scrollYProgress: scrYPro, scrollY: scrY } = useScroll({
     target: constraintsRef,
     container: scrollRef,
-    offset: ['start end', 'end start'],
+    offset: ['start end', 'end start']
   })
 
   const targetRef = useRef(null)
   const { scrollYProgress: scrYProCard } = useScroll({
     target: targetRef,
-    container: scrollRef,
+    container: scrollRef
     // offset: ['start end', 'end start']
   })
   const scrYProCardX = useTransform(scrYProCard, [0, 1], ['1%', '-50%'])
@@ -134,7 +134,7 @@ const ParallaxVert = () => {
   const scaleX = useSpring(scrollYProgress, {
     stiffness: 100,
     damping: 30,
-    restDelta: 0.001,
+    restDelta: 0.001
   })
 
   const [scrollDirection, setScrollDirection] = useState('down')
@@ -165,7 +165,7 @@ const ParallaxVert = () => {
   const { scrollY: followScrollY } = useScroll({
     container: scrollRef,
     target: followScrollRef,
-    offset: ['start end', 'end start'],
+    offset: ['start end', 'end start']
   })
   const findIndex = (arr, x) => {
     if (x <= arr[0]) {
@@ -227,15 +227,15 @@ const ParallaxVert = () => {
           backgroundImage: 'linear-gradient(108deg,#0894ff,#ff2e54 70%,#ff9004)',
           borderRadius: '3px',
           transformOrigin: 'left',
-          scaleX: scaleX,
+          scaleX
         }}
-      ></motion.div>
+      />
       <motion.div
         style={{
           width: 100,
           height: 100,
           backgroundColor: '#aaa',
-          borderRadius: '20px',
+          borderRadius: '20px'
         }}
         // initial={{
         //   width:100,
@@ -251,16 +251,16 @@ const ParallaxVert = () => {
           y: 20, // 向下移动20px
           scale: 0.5, // 缩放至0.5倍
           rotate: 45, // 旋转45度
-          opacity: 0.5, // 不透明度设置为0.5
+          opacity: 0.5 // 不透明度设置为0.5
         }}
-      ></motion.div>
+      />
       <motion.nav
         layout
         className={styles.nav}
         style={{ position: activeScrollY > sectionPositions[sectionPositions.length - 1] ? 'relative' : 'sticky' }}
         initial={{ opacity: 1 }}
         animate={{
-          opacity: activeScrollY > sectionPositions[sectionPositions.length - 1] ? 0 : 1,
+          opacity: activeScrollY > sectionPositions[sectionPositions.length - 1] ? 0 : 1
         }}
         exit={{ opacity: 0 }}
       >
@@ -272,13 +272,13 @@ const ParallaxVert = () => {
               ref={(el) => (navItemsRef.current[index] = el)}
               onClick={() => handleNavItemClick(index)}
               style={{
-                transformStyle: 'preserve-3d',
+                transformStyle: 'preserve-3d'
               }}
             >
               {item}
               {index === activeNavItemIndex && (
                 <motion.div
-                  layoutId="clickedButton"
+                  layoutId='clickedButton'
                   transition={{ type: 'spring', bounce: 0.3, duration: 0.6 }}
                   className={clsx('absolute inset-0 bg-gray-200 dark:bg-zinc-800 rounded-full')}
                   style={{ zIndex: -1 }}
@@ -288,7 +288,7 @@ const ParallaxVert = () => {
           ))}
         </ul>
       </motion.nav>
-      <div className="content" ref={followScrollRef}>
+      <div className='content' ref={followScrollRef}>
         {navItems.map((item) => (
           <div
             key={item}
@@ -310,32 +310,32 @@ const ParallaxVert = () => {
           backgroundColor: '#aaa',
           borderRadius: '10px',
           rotate: 0,
-          x: '200px',
+          x: '200px'
         }}
-      ></motion.div>
+      />
 
       <motion.div
         style={{
           width: 100,
           height: 100,
           backgroundColor: '#aaa',
-          borderRadius: '20px',
+          borderRadius: '20px'
         }}
         transition={{
-          duration: 2,
+          duration: 2
         }}
         variants={animations}
-        initial={'hidden'}
-        animate={'show'}
-      ></motion.div>
+        initial='hidden'
+        animate='show'
+      />
       <motion.ul
-        initial="hidden"
-        animate="visible"
+        initial='hidden'
+        animate='visible'
         variants={list}
         transition={{
           duration: 2,
           staggerChildren: 0.5,
-          delayChildren: 0.5,
+          delayChildren: 0.5
         }}
         style={{ fontSize: 20 }}
       >
@@ -344,7 +344,7 @@ const ParallaxVert = () => {
         <motion.li variants={item}>item3</motion.li>
       </motion.ul>
       {['vue', 'react', 'angular'].map((item, i) => (
-        <motion.p style={{ fontSize: 20 }} key={i} custom={i + 0.3} animate="visible" variants={variantsText}>
+        <motion.p style={{ fontSize: 20 }} key={i} custom={i + 0.3} animate='visible' variants={variantsText}>
           {item}
         </motion.p>
       ))}
@@ -353,7 +353,7 @@ const ParallaxVert = () => {
         style={{
           display: 'flex',
           flexDirection: 'column',
-          gap: 30,
+          gap: 30
         }}
       >
         <motion.div
@@ -361,24 +361,24 @@ const ParallaxVert = () => {
             width: 100,
             height: 100,
             backgroundColor: '#aaa',
-            borderRadius: '20px',
+            borderRadius: '20px'
           }}
           animate={{
-            rotate: isRotated ? 45 : 0,
+            rotate: isRotated ? 45 : 0
           }}
           // 实现鼠标悬浮的效果
           whileHover={{
-            rotate: 45,
+            rotate: 45
           }}
           // 实现按住的效果
           whileTap={{
             backgroundColor: '#000',
-            scale: 1.2,
+            scale: 1.2
           }}
           onClick={() => {
             setRotate(!isRotated)
           }}
-        ></motion.div>
+        />
       </div>
 
       {/* <div
@@ -405,7 +405,7 @@ const ParallaxVert = () => {
 
       <div
         style={{
-          margin: '200px 0 0 150px',
+          margin: '200px 0 0 150px'
         }}
       >
         <motion.div
@@ -413,14 +413,14 @@ const ParallaxVert = () => {
             width: 100,
             height: 100,
             backgroundColor: '#aaa',
-            borderRadius: '20px',
+            borderRadius: '20px'
           }}
           transition={{
             duration: 2,
-            ease: 'linear',
+            ease: 'linear'
           }}
           initial={{
-            x: -100,
+            x: -100
           }}
           animate={controller2}
           onUpdate={(latest) => {
@@ -434,17 +434,17 @@ const ParallaxVert = () => {
             setIsAnimation(false)
             console.log('Completed animating', definition)
           }}
-        ></motion.div>
+        />
         <div
           style={{
             display: 'flex',
-            gap: 20,
+            gap: 20
           }}
         >
           <motion.div
             style={{
               ...btnStyle,
-              pointerEvents: isAnimation ? 'none' : 'auto',
+              pointerEvents: isAnimation ? 'none' : 'auto'
             }}
             onTap={async () => {
               await controller2.start({ x: 100 })
@@ -467,7 +467,7 @@ const ParallaxVert = () => {
           width: 800,
           height: 400,
           border: '1px solid #aaa',
-          margin: '20px auto',
+          margin: '20px auto'
         }}
         ref={constraintsRef}
       >
@@ -484,7 +484,7 @@ const ParallaxVert = () => {
             position: 'sticky',
             top: '40px',
             left: 0,
-            zIndex: 3,
+            zIndex: 3
           }}
         >
           拖动元素
@@ -494,29 +494,26 @@ const ParallaxVert = () => {
             width: 100,
             height: 100,
             backgroundColor: '#333',
-            borderRadius: '20px',
+            borderRadius: '20px'
           }}
           animate={controller}
           whileDrag={{
             backgroundColor: '#aaa',
-            scale: 1.2,
+            scale: 1.2
           }}
           // drag="x"
           drag
           onDragStart={(event, info) => console.log(info.point.x, info.point.y)}
           onDragEnd={(event, info) => console.log(info.point.x, info.point.y)}
           onDirectionLock={(axis) => console.log('axis', axis)}
-          dragSnapToOrigin={true}
+          dragSnapToOrigin
           // dragConstraints={{ left: 0, right: 300 }}
           dragConstraints={constraintsRef}
-          // dragElastic={false}
-          // dragElastic={0.8}
-          // dragPropagation={false}
-        ></motion.div>
+        />
         <div
           style={{
             display: 'flex',
-            gap: 20,
+            gap: 20
           }}
         >
           <motion.div
@@ -554,9 +551,9 @@ const ParallaxVert = () => {
         </div>
       </motion.div>
 
-      <section ref={targetRef} className="relative h-[300vh] pt-4 bg-neutral-300">
-        <div className="sticky top-0 flex items-center overflow-hidden">
-          <motion.div style={{ x: scrYProCardX }} className="flex gap-4">
+      <section ref={targetRef} className='relative h-[300vh] pt-4 bg-neutral-300'>
+        <div className='sticky top-0 flex items-center overflow-hidden'>
+          <motion.div style={{ x: scrYProCardX }} className='flex gap-4'>
             <HorizontalScrollParallax />
           </motion.div>
         </div>
@@ -568,7 +565,7 @@ const ParallaxVert = () => {
           justifyContent: 'center',
           flexWrap: 'wrap',
           alignItems: 'center',
-          gap: 52,
+          gap: 52
         }}
       >
         <div
@@ -579,7 +576,7 @@ const ParallaxVert = () => {
             flexWrap: 'wrap',
             alignItems: 'center',
             gap: 32,
-            marginTop: 230,
+            marginTop: 230
           }}
         >
           {easeNames.map((item, i) => {
@@ -592,7 +589,7 @@ const ParallaxVert = () => {
                   alignItems: 'center',
                   fontFamily: 'system-ui',
                   gap: 12,
-                  color: 'white',
+                  color: 'white'
                 }}
                 key={i}
               >
@@ -603,11 +600,11 @@ const ParallaxVert = () => {
                     backgroundColor: '#333',
                     borderRadius: '20px',
                     textAlign: 'center',
-                    lineHeight: '100px',
+                    lineHeight: '100px'
                   }}
                   transition={{
                     duration: 2,
-                    ease: item,
+                    ease: item
                   }}
                   animate={controls}
                 >
@@ -621,7 +618,7 @@ const ParallaxVert = () => {
         <div
           style={{
             display: 'flex',
-            gap: 100,
+            gap: 100
           }}
         >
           <div
@@ -653,7 +650,7 @@ const ParallaxVert = () => {
           display: 'flex',
           alignItems: 'center',
           justifyContent: buttonRight ? 'flex-end' : 'flex-start',
-          padding: 10,
+          padding: 10
         }}
         onTap={() => {
           setButtonState(!buttonRight)
@@ -665,9 +662,9 @@ const ParallaxVert = () => {
             width: 60,
             height: 60,
             backgroundColor: 'white',
-            borderRadius: 60,
+            borderRadius: 60
           }}
-        ></motion.div>
+        />
       </motion.div>
 
       <section style={{ fontSize: 30 }}>scrollDirection: {scrollDirection}</section>
@@ -679,18 +676,18 @@ const ParallaxVert = () => {
           borderRadius: '20px',
           // scaleX: scrollYProgress,
           x,
-          rotate,
+          rotate
         }}
-      ></motion.div>
+      />
       <motion.div
         style={{
           width: 200,
           height: 100,
           backgroundColor: '#aaa',
           borderRadius: '20px',
-          scaleX,
+          scaleX
         }}
-      ></motion.div>
+      />
 
       <div
         style={{
@@ -701,7 +698,7 @@ const ParallaxVert = () => {
           fontFamily: 'system-ui',
           fontSize: '2rem',
           fontWeight: 'bold',
-          marginBottom: 20,
+          marginBottom: 20
         }}
       >
         <motion.div
@@ -709,7 +706,7 @@ const ParallaxVert = () => {
             display: 'flex',
             flexDirection: 'column',
             alignItems: 'center',
-            gap: 10,
+            gap: 10
           }}
         >
           {listLabel.map((item) => {
@@ -723,7 +720,7 @@ const ParallaxVert = () => {
                   display: 'flex',
                   justifyContent: 'center',
                   alignItems: 'center',
-                  borderRadius: 12,
+                  borderRadius: 12
                 }}
                 key={item}
               >
@@ -744,7 +741,7 @@ const ParallaxVert = () => {
               backgroundColor: 'black',
               color: 'white',
               letterSpacing: 2,
-              cursor: 'pointer',
+              cursor: 'pointer'
             }}
             onTap={() => {
               setListLabel(randomSort(listLabel))
@@ -759,7 +756,7 @@ const ParallaxVert = () => {
           display: 'flex',
           flexDirection: 'column',
           justifyContent: 'center',
-          alignItems: 'center',
+          alignItems: 'center'
         }}
       >
         <motion.div
@@ -770,7 +767,7 @@ const ParallaxVert = () => {
             alignItems: 'center',
             justifyContent: 'center',
             padding: 10,
-            gap: 10,
+            gap: 10
           }}
           layout
         >
@@ -787,7 +784,7 @@ const ParallaxVert = () => {
                 justifyContent: 'center',
                 alignItems: 'center',
                 fontFamily: 'system-ui',
-                color: '#000',
+                color: '#000'
               }}
               onTap={() => {
                 setBigState(!isBig)
@@ -801,18 +798,18 @@ const ParallaxVert = () => {
                 width: 60,
                 height: 60,
                 backgroundColor: '#fff',
-                borderRadius: 10,
+                borderRadius: 10
               }}
-            ></motion.div>
+            />
             <motion.div
               layout
               style={{
                 width: 60,
                 height: 60,
                 backgroundColor: '#fff',
-                borderRadius: 10,
+                borderRadius: 10
               }}
-            ></motion.div>
+            />
           </LayoutGroup>
         </motion.div>
       </div>