diff --git a/src/components/new_ui/truth.tsx b/src/components/new_ui/truth.tsx
index 3d19289..bc6c608 100644
--- a/src/components/new_ui/truth.tsx
+++ b/src/components/new_ui/truth.tsx
@@ -1,7 +1,13 @@
 import { Box, HStack, Image, Stack, Text, Link, Flex } from '@chakra-ui/react'
 import { motion, useInView } from 'framer-motion'
-import { colors } from '../../colors';
 import { useEffect, useRef } from 'react';
+
+const MotionBox = motion.create(Box)
+const MotionStack = motion.create(Stack)
+const MotionHStack = motion.create(HStack)
+const MotionText = motion.create(Text)
+const MotionImage = motion.create(Image)
+const MotionFlex = motion.create(Flex)
 const truthItems = [
 
     {
@@ -59,7 +65,9 @@ function Truth() {
     ]
 
     const fbContainerRef = useRef<HTMLDivElement>(null);
+    const mainRef = useRef<HTMLDivElement>(null);
     const titleRef = useRef<HTMLDivElement>(null);
+    const isMainInView = useInView(mainRef, { once: true });
     const isTitleInView = useInView(titleRef, { once: true });
 
 
@@ -99,25 +107,33 @@ function Truth() {
 
 
     return (
-        <Box
+        <MotionBox
+            ref={mainRef}
             position="relative"
             w="100%"
             bgColor="white"
             zIndex={3}
             overflow="hidden"
             justifyItems={'center'}
+            initial={{ opacity: 0 }}
+            animate={isMainInView ? { opacity: 1 } : { opacity: 0 }}
+            transition={{ duration: 0.8, ease: "easeOut" }}
         >
 
-            <Text
+            <MotionText
                 className='font-melle font-xbold'
                 color='#458B02'
                 mt={{ base: 10, sm: 10, md: 10, lg: 10, xl: 10 }}
                 fontSize={{ base: '2xl', sm: '3xl', md: '5xl', lg: '5xl', xl: '5xl' }}
-                textAlign={'center'}>
+                textAlign={'center'}
+                initial={{ opacity: 0, y: -30 }}
+                animate={isMainInView ? { opacity: 1, y: 0 } : { opacity: 0, y: -30 }}
+                transition={{ duration: 0.6, delay: 0.2, ease: "easeOut" }}
+            >
                 想知道更多食用油健康真相？
-            </Text>
+            </MotionText>
 
-            <Stack
+            <MotionStack
                 mt={{ base: 3, sm: -5, md: -5, lg: -5, xl: -5 }}
                 columns={{ base: 1, sm: 1, md: 2 }}
                 p={{ base: 5, sm: 12, md: 20 }}
@@ -126,98 +142,132 @@ function Truth() {
                 gap={{ base: 7, md: 7 }}
                 justifyItems={'center'}
                 alignItems={'flex-start'}
+                initial={{ opacity: 0, y: 50 }}
+                animate={isMainInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
+                transition={{ duration: 0.8, delay: 0.4, ease: "easeOut" }}
             >
-                {truthItems.map((item) => (
-                    <HStack
+                {truthItems.map((item, index) => (
+                    <MotionHStack
+                        key={item.id}
                         gap={{ base: 4, md: 5 }}
                         justifyItems={'flex-start'}
-                        alignItems={'flex-start'}>
-                        <Image
+                        alignItems={'flex-start'}
+                        initial={{ opacity: 0, x: -30 }}
+                        animate={isMainInView ? { opacity: 1, x: 0 } : { opacity: 0, x: -30 }}
+                        transition={{ duration: 0.5, delay: 0.6 + index * 0.1, ease: "easeOut" }}
+                    >
+                        <MotionImage
                             src={item.image}
                             alt={`truth item ${item.id}`}
                             w={{ base: '70px', sm: '70px', md: '70px', lg: '70px', xl: '70px' }}
+                            initial={{ opacity: 0, scale: 0.8 }}
+                            animate={isMainInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.8 }}
+                            transition={{ duration: 0.4, delay: 0.8 + index * 0.1, ease: "easeOut" }}
                         />
-                        <Text
+                        <MotionText
                             className="font-noto-sans font-regular"
                             color='#458B02'
                             fontSize={{ base: 'lg', sm: 'lg', md: 'lg', lg: 'lg', xl: 'lg' }}
+                            initial={{ opacity: 0, y: 20 }}
+                            animate={isMainInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
+                            transition={{ duration: 0.5, delay: 1.0 + index * 0.1, ease: "easeOut" }}
                         >
                             {renderDescription(item.desc)}
-                        </Text>
+                        </MotionText>
 
-                    </HStack>
+                    </MotionHStack>
 
                 ))}
-            </Stack>
+            </MotionStack>
             <motion.div
                 ref={titleRef}
                 initial={{ opacity: 0, y: 50 }}
                 animate={isTitleInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
                 transition={{ duration: 0.7 }}
             >
-                <Stack
+                <MotionStack
                     w='100%'
                     justify={'center'}
                     align={'center'}
+                    initial={{ opacity: 0, scale: 0.9 }}
+                    animate={isTitleInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.9 }}
+                    transition={{ duration: 0.5, delay: 0.3, ease: "easeOut" }}
                 >
-                    <Text
+                    <MotionText
                         className='font-melle font-xbold'
                         color={"#458B02"}
                         fontSize={{ base: '2xl', sm: '3xl', md: '5xl', lg: '5xl', xl: '5xl' }}
+                        initial={{ opacity: 0 }}
+                        animate={isTitleInView ? { opacity: 1 } : { opacity: 0 }}
+                        transition={{ duration: 0.6, delay: 0.6, ease: "easeOut" }}
                     >
                         點擊以下銷售點連結
-                    </Text>
-                </Stack>
+                    </MotionText>
+                </MotionStack>
             </motion.div>
 
-            <Flex
+            <MotionFlex
                 gap={12}
                 direction={{ base: 'column', sm: 'column', md: 'row' }}
                 justify="center"
                 mt={5}
                 align={'flex-end'}
-
+                initial={{ opacity: 0, y: 30 }}
+                animate={isTitleInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
+                transition={{ duration: 0.8, delay: 0.4, ease: "easeOut" }}
             >
                 {shopImages.map((image, index) => (
                     <motion.div
                         key={index}
-                        initial={{ opacity: 0, y: 30 }}
-                        whileInView={{ opacity: 1, y: 0 }}
-                        viewport={{ once: true }}
-                        transition={{ duration: 0.5, delay: index * 0.2 }}
+                        initial={{ opacity: 0, scale: 0.8 }}
+                        animate={isTitleInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.8 }}
+                        transition={{ duration: 0.5, delay: 0.8 + index * 0.2, ease: "easeOut" }}
                     >
-                        <Stack
+                        <MotionStack
                             w='250px'
                             justify={'flex-end'}
+                            initial={{ opacity: 0, y: 20 }}
+                            animate={isTitleInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
+                            transition={{ duration: 0.4, delay: 1.0 + index * 0.2, ease: "easeOut" }}
                         >
                             <Link href={image.link}>
-                                <Image src={image.image} cursor="pointer" fit={'contain'}
-                                    loading="lazy" />
+                                <MotionImage src={image.image} cursor="pointer" fit={'contain'}
+                                    loading="lazy" 
+                                    initial={{ opacity: 0, scale: 0.9 }}
+                                    animate={isTitleInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.9 }}
+                                    transition={{ duration: 0.3, delay: 1.2 + index * 0.2, ease: "easeOut" }}
+                                />
                             </Link>
-                        </Stack>
+                        </MotionStack>
                     </motion.div>
                 ))}
-            </Flex>
+            </MotionFlex>
 
 
-            <Stack
+            <MotionStack
                 my={15}
                 ml={2}
                 mt={10}
+                initial={{ opacity: 0, scale: 0.9 }}
+                animate={isTitleInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.9 }}
+                transition={{ duration: 0.6, delay: 1.6, ease: "easeOut" }}
             >
                 <Link href={"https://www.facebook.com/profile.php?id=100064320806613"}
                     _focus={{ outline: 'none', boxShadow: 'none' }}
                     _active={{ outline: 'none', boxShadow: 'none' }}>
-                    <Image
+                    <MotionImage
                         src={'/images/facebook.webp'}
                         alt="salespoint"
                         w={"400px"}
                         loading='lazy'
+                        initial={{ opacity: 0, y: 20 }}
+                        animate={isTitleInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
+                        transition={{ duration: 0.5, delay: 1.8, ease: "easeOut" }}
                     />
                 </Link>
-            </Stack>
+            </MotionStack>
 
-        </Box>
+        </MotionBox>
 
 
     )