diff --git a/package.json b/package.json
index ddeeb3791..5b922c701 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "iSunFA",
-  "version": "0.8.5+274",
+  "version": "0.8.5+275",
   "private": false,
   "scripts": {
     "dev": "next dev",
diff --git a/src/components/date_picker/date_picker.tsx b/src/components/date_picker/date_picker.tsx
index 776524da2..435d8af20 100644
--- a/src/components/date_picker/date_picker.tsx
+++ b/src/components/date_picker/date_picker.tsx
@@ -168,7 +168,7 @@ const PopulateDates = ({
         key={el?.date || `${Date.now()}-${index}`}
         type="button"
         disabled={el?.disable ?? true} // Info: (20241108 - Julian) 禁用範圍外和空白日期
-        className={`relative z-10 flex h-35px items-center justify-center whitespace-nowrap px-1 text-base transition-all duration-150 ease-in-out disabled:text-date-picker-text-disable md:h-35px ${isSelectedDateStyle} ${isSelectedPeriodStyle} ${!el?.disable ? 'hover:bg-date-picker-surface-date-period' : ''} hover:rounded-full`}
+        className={`relative z-10 flex h-42px items-center justify-center whitespace-nowrap px-1 text-base transition-all duration-150 ease-in-out disabled:text-date-picker-text-disable ${isSelectedDateStyle} ${isSelectedPeriodStyle} ${!el?.disable ? 'hover:bg-date-picker-surface-date-period' : ''} hover:rounded-full`}
         onClick={dateClickHandler}
       >
         {el?.date ?? ' '}
diff --git a/src/components/landing_page_v2/cta.tsx b/src/components/landing_page_v2/cta.tsx
index c88326505..ed896727e 100644
--- a/src/components/landing_page_v2/cta.tsx
+++ b/src/components/landing_page_v2/cta.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useTranslation } from 'next-i18next';
@@ -70,6 +70,18 @@ const CTAIntroCard: React.FC<{
 const CTA: React.FC = () => {
   const { t } = useTranslation('common');
 
+  const ctaRef = useRef<HTMLDivElement>(null);
+  const [isCtaRefVisible, setIsCtaRefVisible] = useState(false);
+
+  useEffect(() => {
+    const waitForCTA = setTimeout(() => {
+      setIsCtaRefVisible(true);
+    }, 500);
+    return () => {
+      clearTimeout(waitForCTA);
+    };
+  }, []);
+
   // Info: (20241218 - Julian) 卡片內容
   const introCards = [
     {
@@ -103,22 +115,37 @@ const CTA: React.FC = () => {
   ));
 
   return (
-    <div className="flex flex-col items-center py-14px md:px-50px md:py-20px lg:py-70px">
+    <div
+      ref={ctaRef}
+      className="flex flex-col items-center py-14px md:px-50px md:py-20px lg:py-70px"
+    >
       {/* Info: (20241211 - Julian) CTA Main */}
       <div className="flex flex-col items-center">
         {/* Info: (20241205 - Julian) CTA Main */}
         <div className="flex flex-col items-center gap-12px lg:gap-24px">
-          <LinearGradientText size={LinearTextSize.XL} align={TextAlign.CENTER}>
+          <LinearGradientText
+            size={LinearTextSize.XL}
+            align={TextAlign.CENTER}
+            className={`${
+              isCtaRefVisible ? 'translate-y-0 opacity-100' : '-translate-y-200px opacity-0'
+            } transition-all duration-500`}
+          >
             {t('landing_page_v2:CTA.MAIN_TITLE')}
           </LinearGradientText>
-          <p className="text-center text-xs font-medium md:text-lg lg:text-xl">
+          <p
+            className={` ${isCtaRefVisible ? 'translate-y-0 opacity-100' : 'translate-y-full opacity-0'} text-center text-xs font-medium transition-all duration-500 md:text-lg lg:text-xl`}
+          >
             {t('landing_page_v2:CTA.MAIN_DESCRIPTION')}
           </p>
         </div>
 
         <div className="mt-20px md:mt-30px lg:mt-60px">
           <Link href={ISUNFA_ROUTE.DASHBOARD}>
-            <LandingButton type="button" variant="primary">
+            <LandingButton
+              type="button"
+              variant="primary"
+              className={` ${isCtaRefVisible ? 'opacity-100' : 'opacity-0'} transition-all duration-500`}
+            >
               <BsFillRocketTakeoffFill size={20} />
               <p className="text-base font-bold">{t('landing_page_v2:CTA.FREE_TRIAL_BTN')}</p>
             </LandingButton>
@@ -127,7 +154,11 @@ const CTA: React.FC = () => {
       </div>
 
       {/* Info: (20241211 - Julian) CTA Intro Card */}
-      <div className="mt-140px grid grid-cols-1 gap-36px md:mt-80px lg:mt-120px lg:grid-cols-3">
+      <div
+        className={` ${
+          isCtaRefVisible ? 'translate-y-0 opacity-100' : 'translate-y-200px opacity-0'
+        } mt-140px grid grid-cols-1 gap-36px transition-all duration-500 md:mt-80px lg:mt-120px lg:grid-cols-3`}
+      >
         {displayIntroCards}
       </div>
     </div>
diff --git a/src/components/landing_page_v2/easy_to_use.tsx b/src/components/landing_page_v2/easy_to_use.tsx
index 760720686..ac6283dff 100644
--- a/src/components/landing_page_v2/easy_to_use.tsx
+++ b/src/components/landing_page_v2/easy_to_use.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { useTranslation } from 'next-i18next';
 import Image from 'next/image';
 import {
@@ -110,8 +110,29 @@ const EasyToUse: React.FC = () => {
     },
   ];
 
+  const easyRef = useRef<HTMLDivElement>(null);
+
   // Info: (20241218 - Julian) 卡片順序
   const [currentOrder, setCurrentOrder] = useState<number[]>([0, 1, 2]);
+  // Info: (20250108 - Julian) 播放動畫
+  const [isEasyRefVisible, setIsEasyRefVisible] = useState(false);
+
+  const scrollHandler = () => {
+    if (easyRef.current) {
+      const rect = (easyRef.current as HTMLElement).getBoundingClientRect();
+      const rectTop = rect.top;
+      const windowHeight = window.innerHeight;
+
+      setIsEasyRefVisible(rectTop < windowHeight);
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener('scroll', scrollHandler, { passive: true });
+    return () => {
+      window.removeEventListener('scroll', scrollHandler);
+    };
+  }, []);
 
   const toLeft = () => {
     // Info: (20241218 - Julian) 左移:將最後一個元素移到第一個
@@ -147,14 +168,22 @@ const EasyToUse: React.FC = () => {
   });
 
   return (
-    <div className="flex flex-col py-120px">
+    <div ref={easyRef} className="flex flex-col py-120px">
       {/* Info: (20241218 - Julian) Title */}
-      <LinearGradientText size={LinearTextSize.LG} align={TextAlign.CENTER}>
+      <LinearGradientText
+        size={LinearTextSize.LG}
+        align={TextAlign.CENTER}
+        className={`${
+          isEasyRefVisible ? 'translate-y-0 opacity-100' : '-translate-y-200px opacity-0'
+        } transition-all duration-500`}
+      >
         {t('landing_page_v2:EASY_TO_USE.MAIN_TITLE')}
       </LinearGradientText>
 
       {/* Info: (20241218 - Julian) Carousel */}
-      <div className="relative mx-auto mt-80px h-300px w-full overflow-hidden bg-digital bg-cover bg-bottom bg-no-repeat md:h-550px lg:px-120px">
+      <div
+        className={`${isEasyRefVisible ? 'translate-y-0 opacity-100' : 'translate-y-full opacity-0'} relative mx-auto mt-80px h-300px w-full overflow-hidden bg-digital bg-cover bg-bottom bg-no-repeat transition-all duration-500 md:h-550px lg:px-120px`}
+      >
         <div className="relative flex transform-gpu items-center justify-center">
           {displayedCards}
         </div>
diff --git a/src/components/landing_page_v2/financial_report.tsx b/src/components/landing_page_v2/financial_report.tsx
index a7d45422e..8dac7fcb8 100644
--- a/src/components/landing_page_v2/financial_report.tsx
+++ b/src/components/landing_page_v2/financial_report.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import Image from 'next/image';
 import { useTranslation } from 'next-i18next';
 import {
@@ -10,16 +10,49 @@ import {
 const FinancialReport: React.FC = () => {
   const { t } = useTranslation('common');
 
+  const reportRef = useRef<HTMLDivElement>(null);
+  const [isReportRefVisible, setIsReportRefVisible] = useState(false);
+
+  const scrollHandler = () => {
+    if (reportRef.current) {
+      const rect = (reportRef.current as HTMLElement).getBoundingClientRect();
+      const rectTop = rect.top;
+      const windowHeight = window.innerHeight;
+
+      setIsReportRefVisible(rectTop < windowHeight);
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener('scroll', scrollHandler, { passive: true });
+    return () => {
+      window.removeEventListener('scroll', scrollHandler);
+    };
+  }, []);
+
   return (
-    <div className="flex flex-col items-start justify-between bg-landing-page-black3 px-16px py-120px md:px-80px lg:flex-row lg:items-center lg:px-112px">
+    <div
+      ref={reportRef}
+      className="flex flex-col items-start justify-between bg-landing-page-black3 px-16px py-120px md:px-80px lg:flex-row lg:items-center lg:px-112px"
+    >
       <div className="order-2 flex flex-col gap-16px lg:order-1 lg:w-1/2">
         {/* Info: (20241218 - Julian) Title */}
-        <LinearGradientText size={LinearTextSize.LG} align={TextAlign.LEFT}>
+        <LinearGradientText
+          size={LinearTextSize.LG}
+          align={TextAlign.LEFT}
+          className={`${
+            isReportRefVisible ? 'translate-y-0 opacity-100' : '-translate-y-200px opacity-0'
+          } transition-all duration-500`}
+        >
           {t('landing_page_v2:REAL_TIME_REPORT.MAIN_TITLE')}
         </LinearGradientText>
 
         {/* Info: (20241218 - Julian) Reports */}
-        <ul className="list-none text-xs md:text-lg lg:text-xl">
+        <ul
+          className={`${
+            isReportRefVisible ? 'translate-x-0 opacity-100' : '-translate-x-full opacity-0'
+          } list-none text-xs transition-all duration-500 md:text-lg lg:text-xl`}
+        >
           <li>{t('landing_page_v2:REAL_TIME_REPORT.BS')}</li>
           <li>{t('landing_page_v2:REAL_TIME_REPORT.CFS')}</li>
           <li>{t('landing_page_v2:REAL_TIME_REPORT.CIS')}</li>
@@ -28,7 +61,11 @@ const FinancialReport: React.FC = () => {
       </div>
 
       {/* Info: (20241218 - Julian) Image */}
-      <div className="order-1 mx-auto max-w-400px lg:order-2 lg:w-1/2">
+      <div
+        className={`${
+          isReportRefVisible ? 'translate-x-0 opacity-100' : 'translate-x-full opacity-0'
+        } order-1 mx-auto max-w-400px transition-all duration-500 lg:order-2 lg:w-1/2`}
+      >
         <Image
           src="/elements/real_time_report.png"
           width={544}
diff --git a/src/components/landing_page_v2/flexible_feature_selection.tsx b/src/components/landing_page_v2/flexible_feature_selection.tsx
index 44ad3575c..3c985e52e 100644
--- a/src/components/landing_page_v2/flexible_feature_selection.tsx
+++ b/src/components/landing_page_v2/flexible_feature_selection.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import { useTranslation } from 'next-i18next';
 import Image from 'next/image';
 import Link from 'next/link';
@@ -41,6 +41,37 @@ const FlexibleFeatureIcon: React.FC<{ feature: string; size?: number; halo?: boo
 const FlexibleFeatureSelection: React.FC = () => {
   const { t } = useTranslation('common');
 
+  const featureHeadRef = useRef<HTMLDivElement>(null);
+  const featureFirstRef = useRef<HTMLDivElement>(null);
+
+  const [isFeatureHeadRefVisible, setIsFeatureHeadRefVisible] = useState(false);
+  const [isFeatureFirstRefVisible, setIsFeatureFirstRefVisible] = useState(false);
+
+  const scrollHandler = () => {
+    if (featureHeadRef.current) {
+      const rect = (featureHeadRef.current as HTMLElement).getBoundingClientRect();
+      const rectTop = rect.top;
+      const windowHeight = window.innerHeight;
+
+      setIsFeatureHeadRefVisible(rectTop < windowHeight);
+    }
+
+    if (featureFirstRef.current) {
+      const rect = (featureFirstRef.current as HTMLElement).getBoundingClientRect();
+      const rectTop = rect.top;
+      const windowHeight = window.innerHeight;
+
+      setIsFeatureFirstRefVisible(rectTop < windowHeight);
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener('scroll', scrollHandler, { passive: true });
+    return () => {
+      window.removeEventListener('scroll', scrollHandler);
+    };
+  }, []);
+
   // Info: (20241219 - Julian) 第一分類：主要功能
   const featuresOfFirstPart = [
     'Dashboard',
@@ -81,14 +112,28 @@ const FlexibleFeatureSelection: React.FC = () => {
   // const featuresOfFifthPart = ['Manufacturing Management', 'Supply Chain Management'];
 
   return (
-    <div className="flex flex-col gap-120px px-16px py-120px md:px-80px lg:px-112px">
+    <div
+      ref={featureHeadRef}
+      className="flex flex-col gap-120px px-16px py-120px md:px-80px lg:px-112px"
+    >
       {/* Info: (20241219 - Julian) Title */}
-      <LinearGradientText size={LinearTextSize.LG} align={TextAlign.CENTER}>
+      <LinearGradientText
+        size={LinearTextSize.LG}
+        align={TextAlign.CENTER}
+        className={`${
+          isFeatureHeadRefVisible ? 'translate-y-0 opacity-100' : '-translate-y-200px opacity-0'
+        } transition-all duration-500`}
+      >
         {t('landing_page_v2:FLEXIBLE_FEATURE_SELECTION.MAIN_TITLE')}
       </LinearGradientText>
 
       {/* Info: (20241219 - Julian) Features of First Part */}
-      <div className="grid grid-cols-2 gap-34px md:grid-cols-3 lg:grid-cols-5">
+      <div
+        ref={featureFirstRef}
+        className={`${
+          isFeatureFirstRefVisible ? 'translate-x-0 opacity-100' : '-translate-x-full opacity-0'
+        } grid grid-cols-2 gap-34px transition-all duration-500 md:grid-cols-3 lg:grid-cols-5`}
+      >
         {featuresOfFirstPart.map((feature) => (
           <FlexibleFeatureIcon key={feature} feature={feature} />
         ))}
diff --git a/src/components/landing_page_v2/global_map.tsx b/src/components/landing_page_v2/global_map.tsx
index 1d3e34015..3410b8e07 100644
--- a/src/components/landing_page_v2/global_map.tsx
+++ b/src/components/landing_page_v2/global_map.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import Image from 'next/image';
 import { useTranslation } from 'next-i18next';
 import {
@@ -10,18 +10,52 @@ import {
 const GlobalMap: React.FC = () => {
   const { t } = useTranslation('common');
 
+  const mapRef = useRef<HTMLDivElement>(null);
+  const [isMapRefVisible, setIsMapRefVisible] = useState(false);
+
+  const scrollHandler = () => {
+    if (mapRef.current) {
+      const rect = (mapRef.current as HTMLElement).getBoundingClientRect();
+      const rectTop = rect.top;
+      const windowHeight = window.innerHeight;
+
+      setIsMapRefVisible(rectTop < windowHeight);
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener('scroll', scrollHandler, { passive: true });
+    return () => {
+      window.removeEventListener('scroll', scrollHandler);
+    };
+  }, []);
+
   return (
-    <div className="flex flex-col px-16px py-120px md:px-80px lg:px-100px">
+    <div ref={mapRef} className="flex flex-col px-16px py-120px md:px-80px lg:px-100px">
       <div className="flex flex-col gap-16px">
-        <LinearGradientText size={LinearTextSize.LG} align={TextAlign.LEFT}>
+        <LinearGradientText
+          size={LinearTextSize.LG}
+          align={TextAlign.LEFT}
+          className={`${
+            isMapRefVisible ? 'translate-y-0 opacity-100' : '-translate-y-200px opacity-0'
+          } transition-all duration-500`}
+        >
           {t('landing_page_v2:GLOBAL_MAP.MAIN_TITLE')}
         </LinearGradientText>
-        <p className="text-xs font-medium md:text-lg lg:text-xl">
+        <p
+          className={`${
+            isMapRefVisible ? 'translate-x-0 opacity-100' : '-translate-x-200px opacity-0'
+          } text-xs font-medium transition-all duration-500 md:text-lg lg:text-xl`}
+        >
           {t('landing_page_v2:GLOBAL_MAP.MAIN_DESCRIPTION')}
         </p>
       </div>
 
-      <div className="relative flex h-300px w-full items-center lg:h-700px">
+      <div
+        className={`${
+          isMapRefVisible ? 'translate-y-0 opacity-100' : 'translate-y-200px opacity-0'
+        } relative flex h-300px w-full items-center transition-all duration-500 lg:h-700px`}
+      >
         <Image src="/elements/map.svg" fill objectFit="contain" alt="map" />
         <p className="absolute right-1/5 -mt-10px text-xxs md:right-1/8 md:-mt-30px md:text-base">
           {t('landing_page_v2:GLOBAL_MAP.COMING_SOON')}
diff --git a/src/components/landing_page_v2/happy_customer.tsx b/src/components/landing_page_v2/happy_customer.tsx
index 5e76b5494..1988b216e 100644
--- a/src/components/landing_page_v2/happy_customer.tsx
+++ b/src/components/landing_page_v2/happy_customer.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import Image from 'next/image';
 import { useTranslation } from 'next-i18next';
 import {
@@ -24,10 +24,34 @@ const MessageBubble: React.FC<{
 const HappyCustomer: React.FC = () => {
   const { t } = useTranslation('common');
 
+  const customerRef = useRef<HTMLDivElement>(null);
+  const [isCustomerRefVisible, setIsCustomerRefVisible] = useState(false);
+
+  const scrollHandler = () => {
+    if (customerRef.current) {
+      const rect = (customerRef.current as HTMLElement).getBoundingClientRect();
+      const rectTop = rect.top;
+      const windowHeight = window.innerHeight;
+
+      setIsCustomerRefVisible(rectTop < windowHeight);
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener('scroll', scrollHandler, { passive: true });
+    return () => {
+      window.removeEventListener('scroll', scrollHandler);
+    };
+  }, []);
+
   return (
     <div className="flex flex-col bg-magic-ball bg-cover bg-center bg-no-repeat py-120px">
       {/* Info: (20241205 - Julian) Title */}
-      <div className="flex flex-col items-center">
+      <div
+        className={`${
+          isCustomerRefVisible ? 'translate-y-0 opacity-100' : '-translate-y-200px opacity-0'
+        } flex flex-col items-center transition-all duration-500`}
+      >
         <p className="text-28px font-medium text-landing-page-white">iSunFA</p>
         <LinearGradientText size={LinearTextSize.LG} align={TextAlign.CENTER}>
           {t('landing_page_v2:HAPPY_CUSTOMER.MAIN_TITLE')}
@@ -35,8 +59,15 @@ const HappyCustomer: React.FC = () => {
       </div>
 
       {/* Info: (20241205 - Julian) Message Bubbles */}
-      <div className="relative mx-auto mt-40px h-300px w-full md:mt-80px md:h-500px lg:w-90vw">
-        <MessageBubble className="right-1/8 top-0 scale-75 blur-sm">
+      <div
+        ref={customerRef}
+        className="relative mx-auto mt-40px h-300px w-full md:mt-80px md:h-500px lg:w-90vw"
+      >
+        <MessageBubble
+          className={`${
+            isCustomerRefVisible ? 'translate-x-0 opacity-100' : 'translate-x-full opacity-0'
+          } right-1/8 top-0 scale-75 blur-sm transition-all duration-500`}
+        >
           {/* Info: (20241226 - Julian) Avatar */}
           <div className="relative h-15px w-15px shrink-0 overflow-hidden rounded-full md:h-40px md:w-40px">
             <Image src="/entities/happy.png" fill objectFit="cover" alt="avatar" />
@@ -44,7 +75,11 @@ const HappyCustomer: React.FC = () => {
           {/* Info: (20241226 - Julian) Message */}
           <p>{t('landing_page_v2:HAPPY_CUSTOMER.MESSAGE_1')}</p>
         </MessageBubble>
-        <MessageBubble className="left-1/8 top-1/10">
+        <MessageBubble
+          className={`${
+            isCustomerRefVisible ? 'translate-x-0 opacity-100' : '-translate-x-full opacity-0'
+          } left-1/8 top-1/10 transition-all duration-500`}
+        >
           {/* Info: (20241226 - Julian) Avatar */}
           <div className="relative h-15px w-15px shrink-0 overflow-hidden rounded-full md:h-40px md:w-40px">
             <Image src="/entities/happy.png" fill objectFit="cover" alt="avatar" />
@@ -52,7 +87,11 @@ const HappyCustomer: React.FC = () => {
           {/* Info: (20241226 - Julian) Message */}
           <p>{t('landing_page_v2:HAPPY_CUSTOMER.MESSAGE_2')}</p>
         </MessageBubble>
-        <MessageBubble className="left-1/3 top-2/10 z-20 scale-125">
+        <MessageBubble
+          className={`${
+            isCustomerRefVisible ? 'translate-x-0 opacity-100' : 'translate-x-60px opacity-0'
+          } left-1/3 top-2/10 z-20 scale-125 transition-all duration-500`}
+        >
           {/* Info: (20241226 - Julian) Avatar */}
           <div className="relative h-15px w-15px shrink-0 overflow-hidden rounded-full md:h-40px md:w-40px">
             <Image src="/entities/happy.png" fill objectFit="cover" alt="avatar" />
@@ -60,7 +99,11 @@ const HappyCustomer: React.FC = () => {
           {/* Info: (20241226 - Julian) Message */}
           <p>{t('landing_page_v2:HAPPY_CUSTOMER.MESSAGE_6')}</p>
         </MessageBubble>
-        <MessageBubble className="left-0 top-3/10 scale-75 blur-sm">
+        <MessageBubble
+          className={`${
+            isCustomerRefVisible ? 'translate-x-0 opacity-100' : '-translate-x-full opacity-0'
+          } left-0 top-3/10 scale-75 blur-sm transition-all duration-500`}
+        >
           {/* Info: (20241226 - Julian) Avatar */}
           <div className="relative h-15px w-15px shrink-0 overflow-hidden rounded-full md:h-40px md:w-40px">
             <Image src="/entities/happy.png" fill objectFit="cover" alt="avatar" />
@@ -68,7 +111,11 @@ const HappyCustomer: React.FC = () => {
           {/* Info: (20241226 - Julian) Message */}
           <p>{t('landing_page_v2:HAPPY_CUSTOMER.MESSAGE_3')}</p>
         </MessageBubble>
-        <MessageBubble className="left-1/6 top-4/10">
+        <MessageBubble
+          className={`${
+            isCustomerRefVisible ? 'translate-x-0 opacity-100' : '-translate-x-100px opacity-0'
+          } left-1/6 top-4/10 transition-all duration-500`}
+        >
           {/* Info: (20241226 - Julian) Avatar */}
           <div className="relative h-15px w-15px shrink-0 overflow-hidden rounded-full md:h-40px md:w-40px">
             <Image src="/entities/happy.png" fill objectFit="cover" alt="avatar" />
@@ -76,7 +123,11 @@ const HappyCustomer: React.FC = () => {
           {/* Info: (20241226 - Julian) Message */}
           <p>{t('landing_page_v2:HAPPY_CUSTOMER.MESSAGE_4')}</p>
         </MessageBubble>
-        <MessageBubble className="right-0 top-1/3 z-10">
+        <MessageBubble
+          className={`${
+            isCustomerRefVisible ? 'translate-x-0 opacity-100' : 'translate-x-full opacity-0'
+          } right-0 top-1/3 z-10 transition-all duration-500`}
+        >
           {/* Info: (20241226 - Julian) Avatar */}
           <div className="relative h-15px w-15px shrink-0 overflow-hidden rounded-full md:h-40px md:w-40px">
             <Image src="/entities/happy.png" fill objectFit="cover" alt="avatar" />
@@ -84,7 +135,11 @@ const HappyCustomer: React.FC = () => {
           {/* Info: (20241226 - Julian) Message */}
           <p>{t('landing_page_v2:HAPPY_CUSTOMER.MESSAGE_5')}</p>
         </MessageBubble>
-        <MessageBubble className="right-1/12 top-1/2 z-10">
+        <MessageBubble
+          className={`${
+            isCustomerRefVisible ? 'translate-x-0 opacity-100' : 'translate-x-full opacity-0'
+          } right-1/12 top-1/2 z-10 transition-all duration-500`}
+        >
           {/* Info: (20241226 - Julian) Avatar */}
           <div className="relative h-15px w-15px shrink-0 overflow-hidden rounded-full md:h-40px md:w-40px">
             <Image src="/entities/happy.png" fill objectFit="cover" alt="avatar" />
@@ -92,7 +147,11 @@ const HappyCustomer: React.FC = () => {
           {/* Info: (20241226 - Julian) Message */}
           <p>{t('landing_page_v2:HAPPY_CUSTOMER.MESSAGE_7')}</p>
         </MessageBubble>
-        <MessageBubble className="left-1/5 top-5/8 z-20 scale-125">
+        <MessageBubble
+          className={`${
+            isCustomerRefVisible ? 'translate-x-0 opacity-100' : '-translate-x-full opacity-0'
+          } left-1/5 top-5/8 z-20 scale-125 transition-all duration-500`}
+        >
           {/* Info: (20241226 - Julian) Avatar */}
           <div className="relative h-15px w-15px shrink-0 overflow-hidden rounded-full md:h-40px md:w-40px">
             <Image src="/entities/happy.png" fill objectFit="cover" alt="avatar" />
@@ -100,7 +159,11 @@ const HappyCustomer: React.FC = () => {
           {/* Info: (20241226 - Julian) Message */}
           <p>{t('landing_page_v2:HAPPY_CUSTOMER.MESSAGE_9')}</p>
         </MessageBubble>
-        <MessageBubble className="right-1/5 top-8/10 scale-75 blur-sm">
+        <MessageBubble
+          className={`${
+            isCustomerRefVisible ? 'translate-x-0 opacity-100' : '-translate-x-50px opacity-0'
+          } right-1/5 top-8/10 scale-75 blur-sm transition-all duration-500`}
+        >
           {/* Info: (20241226 - Julian) Avatar */}
           <div className="relative h-15px w-15px shrink-0 overflow-hidden rounded-full md:h-40px md:w-40px">
             <Image src="/entities/happy.png" fill objectFit="cover" alt="avatar" />
diff --git a/src/components/landing_page_v2/linear_gradient_text.tsx b/src/components/landing_page_v2/linear_gradient_text.tsx
index 09dadb2fe..0006c3fd4 100644
--- a/src/components/landing_page_v2/linear_gradient_text.tsx
+++ b/src/components/landing_page_v2/linear_gradient_text.tsx
@@ -1,4 +1,6 @@
-import React from 'react';
+import React, { HTMLAttributes, forwardRef } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils/common';
 
 export enum LinearTextSize {
   XL = 'xl',
@@ -13,36 +15,38 @@ export enum TextAlign {
   RIGHT = 'right',
 }
 
-interface ILinearGradientTextProps {
-  size: LinearTextSize;
-  align: TextAlign;
-  children: React.ReactNode;
-}
+const textVariants = cva(
+  'bg-gradient-to-b from-landing-page-white via-landing-page-taupe to-landing-page-taupe2 bg-clip-text font-dm-sans text-transparent',
+  {
+    variants: {
+      size: {
+        [LinearTextSize.XL]: 'text-2xl font-black md:text-48px lg:text-80px',
+        [LinearTextSize.LG]: 'text-2xl font-bold md:text-48px lg:text-60px',
+        [LinearTextSize.MD]: 'text-36px font-bold md:text-44px',
+        [LinearTextSize.SM]: 'text-lg font-bold md:text-2xl',
+      },
+      align: {
+        [TextAlign.LEFT]: 'text-left',
+        [TextAlign.CENTER]: 'text-center',
+        [TextAlign.RIGHT]: 'text-right',
+      },
+    },
+    defaultVariants: {
+      size: LinearTextSize.LG,
+      align: TextAlign.LEFT,
+    },
+  }
+);
 
-export const LinearGradientText: React.FC<ILinearGradientTextProps> = ({
-  size,
-  align,
-  children,
-}) => {
-  const fontStyle =
-    size === LinearTextSize.XL
-      ? 'text-28px font-black md:text-48px lg:text-80px'
-      : size === LinearTextSize.LG
-        ? 'text-2xl font-bold md:text-48px lg:text-60px'
-        : size === LinearTextSize.MD
-          ? 'text-36px font-bold md:text-44px'
-          : 'text-lg font-bold md:text-28px';
+interface TextProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof textVariants> {}
 
-  const textAlign =
-    align === 'center' ? 'text-center' : align === 'right' ? 'text-right' : 'text-left';
+const LinearGradientText = forwardRef<HTMLDivElement, TextProps>(
+  ({ size, align, className, ...props }, ref) => {
+    const Comp = 'div';
 
-  return (
-    <div
-      className={`${fontStyle} ${textAlign} bg-gradient-to-b from-landing-page-white via-landing-page-taupe to-landing-page-taupe2 bg-clip-text font-dm-sans text-transparent`}
-    >
-      {children}
-    </div>
-  );
-};
+    return <Comp className={cn(textVariants({ size, align, className }))} ref={ref} {...props} />;
+  }
+);
+LinearGradientText.displayName = 'LinearGradientText';
 
-export default LinearGradientText;
+export { LinearGradientText, textVariants };
diff --git a/src/components/landing_page_v2/technical_carousel.tsx b/src/components/landing_page_v2/technical_carousel.tsx
index e5070fb5e..93c70d66e 100644
--- a/src/components/landing_page_v2/technical_carousel.tsx
+++ b/src/components/landing_page_v2/technical_carousel.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import Image from 'next/image';
 import { useTranslation } from 'next-i18next';
 import { FaArrowLeft, FaArrowRight } from 'react-icons/fa6';
@@ -12,6 +12,8 @@ import { LandingButton } from '@/components/landing_page_v2/landing_button';
 const TechnicalCarousel: React.FC = () => {
   const { t } = useTranslation('common');
 
+  const carouselRef = useRef<HTMLDivElement>(null);
+
   const carouselData = [
     {
       title: t('landing_page_v2:TECHNICAL_FEATURES.TECHNICAL_PATENTS'),
@@ -39,11 +41,30 @@ const TechnicalCarousel: React.FC = () => {
 
   const [currentIndex, setCurrentIndex] = useState(0);
   const [isPaused, setIsPaused] = useState(false);
+  const [isCarouselRefVisible, setIsCarouselRefVisible] = useState(false);
 
   // Info: (20241224 - Julian) 往後翻，如果是第一項則跳到最後一項
   const handleLeftClick = () => setCurrentIndex((prev) => (prev === 0 ? lastIdx : prev - 1));
   // Info: (20241224 - Julian) 往前翻，如果是最後一項則跳到第一項
   const handleRightClick = () => setCurrentIndex((prev) => (prev === lastIdx ? 0 : prev + 1));
+  // Info: (20250108 - Julian) 滾動事件綁定動畫
+  const scrollHandler = () => {
+    if (carouselRef.current) {
+      const rect = (carouselRef.current as HTMLElement).getBoundingClientRect();
+      const rectTop = rect.top;
+      const windowHeight = window.innerHeight;
+
+      setIsCarouselRefVisible(rectTop < windowHeight);
+    }
+  };
+
+  // Info: (20250108 - Julian) 播放動畫
+  useEffect(() => {
+    window.addEventListener('scroll', scrollHandler, { passive: true });
+    return () => {
+      window.removeEventListener('scroll', scrollHandler);
+    };
+  }, []);
 
   useEffect(() => {
     if (isPaused) return undefined;
@@ -57,14 +78,25 @@ const TechnicalCarousel: React.FC = () => {
   }, [isPaused]);
 
   return (
-    <div className="flex flex-col items-center justify-center gap-40px px-16px py-120px md:gap-80px md:px-80px lg:flex-row">
+    <div
+      ref={carouselRef}
+      className="flex flex-col items-center justify-center gap-40px px-16px py-120px md:gap-80px md:px-80px lg:flex-row"
+    >
       {/* Info: (20241224 - Julian) Image */}
-      <div className="relative h-300px w-300px md:h-536px md:w-536px">
+      <div
+        className={`${
+          isCarouselRefVisible ? 'translate-x-0 opacity-100' : '-translate-x-full opacity-0'
+        } relative h-300px w-300px transition-all duration-500 md:h-536px md:w-536px`}
+      >
         <Image src="/elements/golden_medal.png" alt="medal_icon" fill objectFit="contain" />
       </div>
 
       {/* Info: (20241224 - Julian) Text */}
-      <div className="flex flex-col">
+      <div
+        className={`${
+          isCarouselRefVisible ? 'translate-x-0 opacity-100' : 'translate-x-full opacity-0'
+        }flex flex-col transition-all duration-500`}
+      >
         <LinearGradientText size={LinearTextSize.MD} align={TextAlign.CENTER}>
           {t('landing_page_v2:TECHNICAL_FEATURES.TECHNICAL_PATENTS')}
         </LinearGradientText>
diff --git a/src/components/landing_page_v2/technical_features.tsx b/src/components/landing_page_v2/technical_features.tsx
index ed7554a7c..3da6143e8 100644
--- a/src/components/landing_page_v2/technical_features.tsx
+++ b/src/components/landing_page_v2/technical_features.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import Image from 'next/image';
 import {
   LinearGradientText,
@@ -13,6 +13,7 @@ interface ITechnicalCardProps {
   content: string;
   imageSrc: string;
   imageAlt: string;
+  isShowAnimation: boolean;
 }
 
 const TechnicalCard: React.FC<ITechnicalCardProps> = ({
@@ -21,9 +22,17 @@ const TechnicalCard: React.FC<ITechnicalCardProps> = ({
   content,
   imageSrc,
   imageAlt,
+  isShowAnimation,
 }) => {
+  // Info: (20250108 - Julian) 第一張卡片(first)由右邊滑入，第二張卡片(even)由下方滑入，第三張卡片(last)由左邊滑入
+  const cardAnim = isShowAnimation
+    ? 'first:translate-x-0 even:translate-y-0 last:translate-x-0 opacity-100'
+    : 'first:translate-x-full even:translate-y-full last:-translate-x-full opacity-0';
+
   return (
-    <div className="relative mx-auto flex w-full flex-col items-center gap-12px rounded-lg border bg-cloudy-glass px-45px py-50px backdrop-blur-md md:w-450px lg:shadow-technical-card lg:last:col-span-2">
+    <div
+      className={`${cardAnim} relative mx-auto flex w-full flex-col items-center gap-12px rounded-lg border bg-cloudy-glass px-45px py-50px backdrop-blur-md transition-all duration-500 md:w-450px lg:shadow-technical-card lg:last:col-span-2`}
+    >
       {/* Info: (20241223 - Julian) Brilliant square */}
       <div className="absolute -top-50px h-85px w-130px rounded-sm border-b border-t border-landing-page-white bg-landing-btn shadow-landing-btn-hover"></div>
       {/* Info: (20241223 - Julian) Spotlight */}
@@ -83,6 +92,25 @@ const TechnicalCard: React.FC<ITechnicalCardProps> = ({
 
 const TechnicalFeatures: React.FC = () => {
   const { t } = useTranslation('common');
+  const technicalRef = useRef<HTMLDivElement>(null);
+  const [isTechnicalRefVisible, setIsTechnicalRefVisible] = useState(false);
+
+  const scrollHandler = () => {
+    if (technicalRef.current) {
+      const rect = (technicalRef.current as HTMLElement).getBoundingClientRect();
+      const rectTop = rect.top;
+      const windowHeight = window.innerHeight;
+
+      setIsTechnicalRefVisible(rectTop < windowHeight);
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener('scroll', scrollHandler, { passive: true });
+    return () => {
+      window.removeEventListener('scroll', scrollHandler);
+    };
+  }, []);
 
   const technicalData = [
     {
@@ -111,30 +139,36 @@ const TechnicalFeatures: React.FC = () => {
   return (
     <div className="flex flex-col items-center px-16px py-120px md:px-80px lg:px-112px">
       {/* Info: (20241205 - Julian) Title */}
-      <LinearGradientText size={LinearTextSize.LG} align={TextAlign.CENTER}>
+      <LinearGradientText
+        size={LinearTextSize.LG}
+        align={TextAlign.CENTER}
+        className={`${
+          isTechnicalRefVisible ? 'translate-y-0 opacity-100' : '-translate-y-200px opacity-0'
+        } transition-all duration-500`}
+      >
         {t('landing_page_v2:TECHNICAL_FEATURES.MAIN_TITLE')}
       </LinearGradientText>
 
       {/* Info: (20241205 - Julian) Content */}
-      <div
-        //  className="relative mt-120px grid grid-cols-1 gap-x-120px gap-y-120px lg:mt-75px lg:flex lg:flex-wrap lg:justify-between"
-        className="relative mt-120px grid grid-cols-1 gap-x-120px gap-y-120px lg:mt-75px lg:grid-cols-2 lg:justify-between"
-      >
+      <div ref={technicalRef} className="relative mt-120px lg:mt-75px">
         {/* Info: (20241223 - Julian) Background */}
         <div className="absolute hidden h-full w-full items-center justify-center lg:flex">
           <div className="h-3/5 w-3/5 border"></div>
         </div>
         {/* Info: (20241223 - Julian) Cards */}
-        {technicalData.map((data) => (
-          <TechnicalCard
-            key={data.imageAlt}
-            title1={data.title1}
-            title2={data.title2}
-            content={data.content}
-            imageSrc={data.imageSrc}
-            imageAlt={data.imageAlt}
-          />
-        ))}
+        <div className="grid w-full grid-cols-1 gap-x-120px gap-y-120px lg:mt-75px lg:grid-cols-2 lg:justify-between">
+          {technicalData.map((data) => (
+            <TechnicalCard
+              key={data.imageAlt}
+              title1={data.title1}
+              title2={data.title2}
+              content={data.content}
+              imageSrc={data.imageSrc}
+              imageAlt={data.imageAlt}
+              isShowAnimation={isTechnicalRefVisible}
+            />
+          ))}
+        </div>
       </div>
     </div>
   );
diff --git a/src/components/voucher/new_voucher_form.tsx b/src/components/voucher/new_voucher_form.tsx
index 47eaaf964..613f33cec 100644
--- a/src/components/voucher/new_voucher_form.tsx
+++ b/src/components/voucher/new_voucher_form.tsx
@@ -631,16 +631,7 @@ const NewVoucherForm: React.FC<NewVoucherFormProps> = ({ selectedData }) => {
     e.preventDefault();
 
     // Info: (20241007 - Julian) 若任一條件不符，則中斷 function
-    if (selectedIds.length === 0) {
-      // Info: (20241230 - Julian) 如果未選擇憑證，則顯示憑證提示，並定位最上方、吐司通知
-      toastHandler({
-        id: ToastId.FILL_UP_VOUCHER_FORM,
-        type: ToastType.ERROR,
-        content: `${t('journal:ADD_NEW_VOUCHER.TOAST_FILL_UP_FORM')}: certificate`,
-        closeable: true,
-      });
-      document.body.scrollTop = 0;
-    } else if (date.startTimeStamp === 0 && date.endTimeStamp === 0) {
+    if (date.startTimeStamp === 0 && date.endTimeStamp === 0) {
       // Info: (20241007 - Julian) 日期不可為 0：顯示日期提示，並定位到日期欄位、吐司通知
       setIsShowDateHint(true);
       toastHandler({
diff --git a/src/components/voucher/voucher_editing_page_body.tsx b/src/components/voucher/voucher_editing_page_body.tsx
index 348c96685..fd1bbbfd8 100644
--- a/src/components/voucher/voucher_editing_page_body.tsx
+++ b/src/components/voucher/voucher_editing_page_body.tsx
@@ -659,16 +659,7 @@ const VoucherEditingPageBody: React.FC<{
     e.preventDefault();
 
     // Info: (20241007 - Julian) 若任一條件不符，則中斷 function
-    if (selectedIds.length === 0) {
-      // Info: (20241230 - Julian) 如果未選擇憑證，則顯示憑證提示，並定位最上方、吐司通知
-      toastHandler({
-        id: ToastId.FILL_UP_VOUCHER_FORM,
-        type: ToastType.ERROR,
-        content: `${t('journal:ADD_NEW_VOUCHER.TOAST_FILL_UP_FORM')}: certificate`,
-        closeable: true,
-      });
-      document.body.scrollTop = 0;
-    } else if (date.startTimeStamp === 0 && date.endTimeStamp === 0) {
+    if (date.startTimeStamp === 0 && date.endTimeStamp === 0) {
       // Info: (20241007 - Julian) 日期不可為 0：顯示日期提示，並定位到日期欄位、吐司通知
       setIsShowDateHint(true);
       toastHandler({