diff --git a/package-lock.json b/package-lock.json
index 74732b7f..4b8a2ac4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,7 +24,9 @@
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "embla-carousel-react": "^8.6.0",
+        "framer-motion": "^12.23.12",
         "lucide-react": "^0.525.0",
+        "motion": "^12.23.12",
         "next-themes": "^0.4.6",
         "react": "^18",
         "react-dom": "^18",
@@ -6755,6 +6757,33 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "12.23.12",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.12.tgz",
+      "integrity": "sha512-6e78rdVtnBvlEVgu6eFEAgG9v3wLnYEboM8I5O5EXvfKC8gxGQB8wXJdhkMy10iVcn05jl6CNw7/HTsTCfwcWg==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.23.12",
+        "motion-utils": "^12.23.6",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -8247,6 +8276,47 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/motion": {
+      "version": "12.23.12",
+      "resolved": "https://registry.npmjs.org/motion/-/motion-12.23.12.tgz",
+      "integrity": "sha512-8jCD8uW5GD1csOoqh1WhH1A6j5APHVE15nuBkFeRiMzYBdRwyAHmSP/oXSuW0WJPZRXTFdBoG4hY9TFWNhhwng==",
+      "license": "MIT",
+      "dependencies": {
+        "framer-motion": "^12.23.12",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/motion-dom": {
+      "version": "12.23.12",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.12.tgz",
+      "integrity": "sha512-RcR4fvMCTESQBD/uKQe49D5RUeDOokkGRmz4ceaJKDBgHYtZtntC/s2vLvY38gqGaytinij/yi3hMcWVcEF5Kw==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.23.6"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.23.6",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz",
+      "integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
diff --git a/package.json b/package.json
index 7e4a5817..6d15381e 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,9 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "embla-carousel-react": "^8.6.0",
+    "framer-motion": "^12.23.12",
     "lucide-react": "^0.525.0",
+    "motion": "^12.23.12",
     "next-themes": "^0.4.6",
     "react": "^18",
     "react-dom": "^18",
diff --git a/src/components/home/ContentSection.tsx b/src/components/home/ContentSection.tsx
index bf700652..712f8036 100644
--- a/src/components/home/ContentSection.tsx
+++ b/src/components/home/ContentSection.tsx
@@ -1,3 +1,4 @@
+import { motion } from 'framer-motion';
 import Image from 'next/image';
 
 import AverageStar from '@/components/wineDetail/AverageStar';
@@ -6,11 +7,21 @@ import { ImageCard } from '../common/card/ImageCard';
 
 export const ContentSection = () => {
   return (
-    <div className='mx-auto max-w-[640px]  min-w-[343px] mt-12 md:mt-[80px] xl:mt-[160px]'>
-      <div className='relative bg-[#EBEEF4] h-[424px] md:h-[320px] mb-[48px] md:mb-[96px] rounded-2xl mx-auto max-w-[500px] md:max-w-[640px] shadow'>
-        <div className='relative  max-w-[500px] md:max-w-[640px] mx-auto'>
-          <div className='absolute top-[24px] md:top-[56px] left-[24px] md:left-[32px]'>
-            <span className='custom-text-2lg-bold md:text-[22px] md:leading-8 md:font-bold block  mb-[8px]'>
+    <div className='mx-auto max-w-[640px] min-w-[343px] mt-12 md:mt-[80px] xl:mt-[160px]'>
+      {/* 첫 번째 박스 */}
+      <motion.div
+        className='relative bg-[#EBEEF4] h-[424px] md:h-[320px] mb-[48px] md:mb-[96px] rounded-2xl mx-auto max-w-[500px] md:max-w-[640px] shadow'
+        initial={{ opacity: 0, y: 100 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true, amount: 0.3 }}
+        transition={{ duration: 0.6, ease: 'easeOut' }}
+      >
+        <div className='relative max-w-[500px] md:max-w-[640px] mx-auto'>
+          <div
+            className='absolute top-[24px] md:top-[56px] left-[24px] md:left-[32px]'
+            // style={{ y: firstBoxTextY, opacity: firstBoxTextOpacity }}
+          >
+            <span className='custom-text-2lg-bold md:text-[22px] md:leading-8 md:font-bold block mb-[8px]'>
               매달 새롭게 만나는 <br />
               와인 추천 콘탠츠
             </span>
@@ -18,7 +29,11 @@ export const ContentSection = () => {
               매달 다양한 인기 와인을 만나보세요
             </p>
           </div>
-          <div className='absolute w-[290px] md:w-[356px] h-[241px] md:h-[277px] right-0 bottom-[24px] md:bottom-0 bg-gray-100 rounded-2xl overflow-hidden  md:overflow-visible top-[160px] md:top-[42px]'>
+
+          <div
+            className='absolute w-[290px] md:w-[356px] h-[241px] md:h-[277px] right-0 bottom-[24px] md:bottom-0 bg-gray-100 rounded-2xl overflow-hidden md:overflow-visible top-[160px] md:top-[42px]'
+            // style={{ y: firstBoxTextY, opacity: firstBoxTextOpacity }}
+          >
             <span className='absolute text-[#7E7E7E] md:text-[#50545B] md:font-bold custom-text-lg-bold md:custom-text-2lg-bold left-5 top-5'>
               이번 달 추천 와인
             </span>
@@ -52,9 +67,17 @@ export const ContentSection = () => {
             </div>
           </div>
         </div>
-      </div>
-      <div className='relative bg-[#EBEEF4] h-[424px] md:h-[320px] mb-[48px] md:mb-[96px] rounded-2xl mx-auto max-w-[500px] overflow-hidden md:max-w-[640px] shadow'>
-        <div className='relative  max-w-[500px] md:max-w-[640px] mx-auto'>
+      </motion.div>
+
+      {/* 두 번째 박스 */}
+      <motion.div
+        className='relative bg-[#EBEEF4] h-[424px] md:h-[320px] mb-[48px] md:mb-[96px] rounded-2xl mx-auto max-w-[500px] overflow-hidden md:max-w-[640px] shadow'
+        initial={{ opacity: 0, y: 100 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true, amount: 0.3 }}
+        transition={{ duration: 0.6, ease: 'easeOut' }}
+      >
+        <div className='relative max-w-[500px] md:max-w-[640px] mx-auto'>
           <div className='absolute top-[24px] md:top-[55px] left-[24px] md:left-[32px]'>
             <span className='custom-text-2lg-bold md:text-[22px] md:leading-8 md:font-bold block mb-2'>
               다양한 필터로 찾는
@@ -65,30 +88,41 @@ export const ContentSection = () => {
               나에게 맞는 와인을 쉽게 검색해요.
             </p>
           </div>
+
           <div className='absolute top-[185px] left-[42px] hidden md:block'>
             <Image width={180} height={100} alt='필터이미지2' src='/assets/lendingfilter2.png' />
           </div>
           <div className='absolute top-[245px] left-[32px] hidden md:block'>
             <Image width={200} height={100} alt='필터이미지1' src='/assets/lendingfilter1.png' />
           </div>
-          <Image
-            width={280}
-            height={100}
-            alt='필터로 찾은 내 맞춤 와인'
-            src='/assets/lendingwinecard.png'
-            className='absolute right-[-10px] top-[120px] md:top-[20px]'
-          />
+          <div>
+            <Image
+              width={280}
+              height={100}
+              alt='필터로 찾은 내 맞춤 와인'
+              src='/assets/lendingwinecard.png'
+              className='absolute right-[-10px] top-[120px] md:top-[20px]'
+            />
+          </div>
         </div>
         <div
           className='pointer-events-none absolute inset-0 rounded-xl'
           style={{
             background:
-              'linear-gradient(to top, #EBEEF4 0%, transparent 10%, transparent 90%, #EBEEF4 100%)',
+              'linear-gradient(to top, #EBEEF4 0%, transparent 5%, transparent 95%, #EBEEF4 100%)',
           }}
         />
-      </div>
-      <div className='relative bg-[#EBEEF4] h-[424px] md:h-[320px] mb-[64px] md:mb-[80px] xl:mb-[104px] rounded-2xl mx-auto max-w-[500px] overflow-hidden md:max-w-[640px] shadow'>
-        <div className='relative  max-w-[500px] md:max-w-[640px] mx-auto'>
+      </motion.div>
+
+      {/* 세 번째 박스 */}
+      <motion.div
+        className='relative bg-[#EBEEF4] h-[424px] md:h-[320px] mb-[64px] md:mb-[80px] xl:mb-[104px] rounded-2xl mx-auto max-w-[500px] overflow-hidden md:max-w-[640px] shadow'
+        initial={{ opacity: 0, y: 100 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true, amount: 0.3 }}
+        transition={{ duration: 0.6, ease: 'easeOut' }}
+      >
+        <div className='relative max-w-[500px] md:max-w-[640px] mx-auto'>
           <div className='absolute top-[24px] md:top-[55px] left-[24px] md:left-[28px]'>
             <span className='custom-text-2lg-bold md:text-[22px] md:leading-8 md:font-bold block mb-2'>
               직관적인
@@ -101,13 +135,16 @@ export const ContentSection = () => {
               쉽고 빠르게 와인 리뷰를 살펴보세요
             </p>
           </div>
-          <Image
-            width={272}
-            height={100}
-            alt='와인 리뷰 예시 이미지'
-            src='/assets/lendingreviewcard.png'
-            className='absolute right-[-10px] top-[120px] md:right-[42px] md:top-[-65px]'
-          />
+
+          <div>
+            <Image
+              width={272}
+              height={100}
+              alt='와인 리뷰 예시 이미지'
+              src='/assets/lendingreviewcard.png'
+              className='absolute right-[-10px] top-[120px] md:right-[42px] md:top-[-65px]'
+            />
+          </div>
         </div>
         <div
           className='pointer-events-none absolute inset-0 rounded-xl'
@@ -116,7 +153,7 @@ export const ContentSection = () => {
               'linear-gradient(to top, #EBEEF4 0%, transparent 5%, transparent 95%, #EBEEF4 100%)',
           }}
         />
-      </div>
+      </motion.div>
     </div>
   );
 };
diff --git a/src/components/home/HeroSection.tsx b/src/components/home/HeroSection.tsx
index b01357ec..9342a3d1 100644
--- a/src/components/home/HeroSection.tsx
+++ b/src/components/home/HeroSection.tsx
@@ -1,3 +1,4 @@
+import { motion } from 'framer-motion';
 import Image from 'next/image';
 
 import HeroSectionLayout from './HeroSectionLayout';
@@ -7,7 +8,13 @@ import AverageStar from '../wineDetail/AverageStar';
 export const HeroSection = () => {
   return (
     <header>
-      <div className='relative h-[403px] md:h-[394px] xl:h-[535px] bg-[#171A21] flex items-center justify-center overflow-hidden rounded-lg'>
+      <motion.div
+        className='relative h-[403px] md:h-[394px] xl:h-[535px] bg-[#171A21] flex items-center justify-center overflow-hidden rounded-lg'
+        initial={{ opacity: 0, y: -100 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true, amount: 0.3 }}
+        transition={{ duration: 0.6, delay: 0.7, ease: 'easeOut' }}
+      >
         <div className='flex flex-col items-center h-full'>
           <div>
             <Image
@@ -24,81 +31,111 @@ export const HeroSection = () => {
           </span>
           <div className='relative w-[720px] h-[420px] mt-auto mx-auto translate-y-[80px] md:translate-y-[40px] xl:translate-y-[120px] scale-[1] md:scale-[0.7] xl:scale-[1]'>
             {/* 기준 박스 translate-y 아래로-ㅁㅁ만큼 밀어내기 */}
-            <HeroSectionLayout className='top-4 left-1/2 z-30 -translate-x-1/2'>
-              <ImageCard
-                imageSrc='/assets/lendingwine3.png'
-                imageClassName='h-full w-[44px] object-contain '
+            <HeroSectionLayout className='top-4 left-1/2 -translate-x-1/2 z-30'>
+              <motion.div
+                initial={{ opacity: 1, y: 200 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.6, delay: 0.2, ease: 'easeOut' }}
               >
-                <div className='flex flex-col ml-[8px] w-[100px]'>
-                  <span className='font-extrabold text-4xl text-gray-800'>4.3</span>
-                  <AverageStar rating={4} />
-                  <p className='custom-text-xs-regular text-gray-500'>
-                    Sentinel Carbernet Sauvignon 2016
-                  </p>
-                </div>
-              </ImageCard>
+                <ImageCard
+                  imageSrc='/assets/lendingwine3.png'
+                  imageClassName='h-full w-[44px] object-contain '
+                >
+                  <div className='flex flex-col ml-[8px] w-[100px]'>
+                    <span className='font-extrabold text-4xl text-gray-800'>4.3</span>
+                    <AverageStar rating={4} />
+                    <p className='custom-text-xs-regular text-gray-500'>
+                      Sentinel Carbernet Sauvignon 2016
+                    </p>
+                  </div>
+                </ImageCard>
+              </motion.div>
             </HeroSectionLayout>
 
             {/* 좌우 위 박스 */}
             <HeroSectionLayout className='top-10 left-[calc(50%-340px)] z-20'>
-              <ImageCard
-                imageSrc='/assets/lendingwine1.png'
-                imageClassName='h-full w-[44px] object-contain '
+              <motion.div
+                initial={{ opacity: 1, y: 200 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.6, delay: 0.2, ease: 'easeOut' }}
               >
-                <div className='flex flex-col ml-[8px] w-[100px]'>
-                  <span className='font-extrabold text-4xl text-gray-800'>4.6</span>
-                  <AverageStar rating={4} />
-                  <p className='custom-text-xs-regular text-gray-500'>
-                    Ciel du Cheval Vaineyard Collaboration
-                  </p>
-                </div>
-              </ImageCard>
+                <ImageCard
+                  imageSrc='/assets/lendingwine1.png'
+                  imageClassName='h-full w-[44px] object-contain '
+                >
+                  <div className='flex flex-col ml-[8px] w-[100px]'>
+                    <span className='font-extrabold text-4xl text-gray-800'>4.6</span>
+                    <AverageStar rating={4} />
+                    <p className='custom-text-xs-regular text-gray-500'>
+                      Ciel du Cheval Vaineyard Collaboration
+                    </p>
+                  </div>
+                </ImageCard>
+              </motion.div>
             </HeroSectionLayout>
             <HeroSectionLayout className='top-10 left-[calc(50%+100px)] z-20'>
-              <ImageCard
-                imageSrc='/assets/lendingwine2.png'
-                imageClassName='h-full w-[44px] object-contain '
+              <motion.div
+                initial={{ opacity: 1, y: 200 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.6, delay: 0.2, ease: 'easeOut' }}
               >
-                <div className='flex flex-col ml-[8px] w-[100px]'>
-                  <span className='font-extrabold text-4xl text-gray-800'>4.2</span>
-                  <AverageStar rating={4} />
-                  <p className='custom-text-xs-regular text-gray-500'>Palazzo della Torre 2017</p>
-                </div>
-              </ImageCard>
+                <ImageCard
+                  imageSrc='/assets/lendingwine2.png'
+                  imageClassName='h-full w-[44px] object-contain '
+                >
+                  <div className='flex flex-col ml-[8px] w-[100px]'>
+                    <span className='font-extrabold text-4xl text-gray-800'>4.2</span>
+                    <AverageStar rating={4} />
+                    <p className='custom-text-xs-regular text-gray-500'>Palazzo della Torre 2017</p>
+                  </div>
+                </ImageCard>
+              </motion.div>
             </HeroSectionLayout>
 
             {/* 좌우 아래 박스 */}
             <HeroSectionLayout className='top-[80px] left-[calc(50%-480px)] z-10'>
-              <ImageCard
-                imageSrc='/assets/lendingwine4.png'
-                imageClassName='h-full w-[44px] object-contain '
+              <motion.div
+                initial={{ opacity: 1, y: 200 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.6, delay: 0.2, ease: 'easeOut' }}
               >
-                <div className='flex flex-col ml-[8px] w-[100px]'>
-                  <span className='font-extrabold text-4xl text-gray-800'>4.8</span>
-                  <AverageStar rating={4} />
-                  <p className='custom-text-xs-regular text-gray-500'>
-                    Sentinel Carbernet Sauvignon 2016
-                  </p>
-                </div>
-              </ImageCard>
+                <ImageCard
+                  imageSrc='/assets/lendingwine4.png'
+                  imageClassName='h-full w-[44px] object-contain '
+                >
+                  <div className='flex flex-col ml-[8px] w-[100px]'>
+                    <span className='font-extrabold text-4xl text-gray-800'>4.8</span>
+                    <AverageStar rating={4} />
+                    <p className='custom-text-xs-regular text-gray-500'>
+                      Sentinel Carbernet Sauvignon 2016
+                    </p>
+                  </div>
+                </ImageCard>
+              </motion.div>
             </HeroSectionLayout>
             <HeroSectionLayout className='top-[80px] left-[calc(50%+240px)] z-10'>
-              <ImageCard
-                imageSrc='/assets/lendingwine1.png'
-                imageClassName='h-full w-[44px] object-contain '
+              <motion.div
+                initial={{ opacity: 1, y: 200 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.6, delay: 0.2, ease: 'easeOut' }}
               >
-                <div className='flex flex-col ml-[8px] w-[100px]'>
-                  <span className='font-extrabold text-4xl text-gray-800'>4.9</span>
-                  <AverageStar rating={4.2} />
-                  <p className='custom-text-xs-regular text-gray-500'>
-                    Sentinel Carbernet Sauvignon 2016
-                  </p>
-                </div>
-              </ImageCard>
+                <ImageCard
+                  imageSrc='/assets/lendingwine1.png'
+                  imageClassName='h-full w-[44px] object-contain '
+                >
+                  <div className='flex flex-col ml-[8px] w-[100px]'>
+                    <span className='font-extrabold text-4xl text-gray-800'>4.9</span>
+                    <AverageStar rating={4.2} />
+                    <p className='custom-text-xs-regular text-gray-500'>
+                      Sentinel Carbernet Sauvignon 2016
+                    </p>
+                  </div>
+                </ImageCard>
+              </motion.div>
             </HeroSectionLayout>
           </div>
         </div>
-      </div>
+      </motion.div>
     </header>
   );
 };
diff --git a/src/components/home/HeroSectionLayout.tsx b/src/components/home/HeroSectionLayout.tsx
index 057dfba1..4545c6c6 100644
--- a/src/components/home/HeroSectionLayout.tsx
+++ b/src/components/home/HeroSectionLayout.tsx
@@ -8,7 +8,7 @@ interface HeroSectionLayoutProps {
 }
 
 const HeroSectionLayout = ({ children, className }: HeroSectionLayoutProps) => {
-  const baseClass = 'absolute w-[240px] h-[185px] rounded-xl shadow-xl bg-white';
+  const baseClass = 'absolute w-[240px] h-[185px] rounded-xl shadow-xl';
 
   return <div className={cn(baseClass, className)}>{children}</div>;
 };
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 40e083f0..814584b0 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,3 +1,4 @@
+import { motion } from 'framer-motion';
 import Link from 'next/link';
 
 import { ContentSection } from '@/components/home/ContentSection';
@@ -12,16 +13,23 @@ export default function Home() {
         <ContentSection />
       </main>
       <footer className='pb-[62px]'>
-        <Link href='/wines'>
-          <Button
-            variant='purpleDark'
-            size='onlyLanding'
-            width='onlyLanding'
-            className='block mx-auto'
-          >
-            와인 보러가기
-          </Button>
-        </Link>
+        <motion.div
+          initial={{ opacity: 0, y: 100 }} //화면에 나타나기 전 위치
+          whileInView={{ opacity: 1, y: 0 }} //애니메이션 실행했을때 나타날 위치
+          viewport={{ once: true, amount: 0.3 }} //어떤조건인지(한번만 실행, 컴포넌트30%들어올시 실행)
+          transition={{ duration: 0.1, ease: 'easeOut' }} //애니메이션 속도
+        >
+          <Link href='/wines'>
+            <Button
+              variant='purpleDark'
+              size='onlyLanding'
+              width='onlyLanding'
+              className='block mx-auto'
+            >
+              와인 보러가기
+            </Button>
+          </Link>
+        </motion.div>
       </footer>
     </div>
   );