diff --git a/package-lock.json b/package-lock.json
index 98f7a85..30c173b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,7 +31,8 @@
         "react-use-measure": "^2.1.7",
         "slick-carousel": "^1.8.1",
         "swiper": "^11.1.7",
-        "tailwindcss": "^3.4.6"
+        "tailwindcss": "^3.4.6",
+        "typewriter-effect": "^2.22.0"
       },
       "devDependencies": {
         "eslint": "^8.56.0",
@@ -27468,6 +27469,20 @@
         "node": ">=4.2.0"
       }
     },
+    "node_modules/typewriter-effect": {
+      "version": "2.22.0",
+      "resolved": "https://registry.npmjs.org/typewriter-effect/-/typewriter-effect-2.22.0.tgz",
+      "integrity": "sha512-01HCRYY462wT8Fxps/epwGCioZd/GMXY0aLKhFKrfJ5Xhgf54/SiDx7Oq7PoES5kGqOEAdW8FS8HYVM2WSvfhQ==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.8.1",
+        "raf": "^3.4.1"
+      },
+      "peerDependencies": {
+        "react": ">=17.0.0",
+        "react-dom": ">=17.0.0"
+      }
+    },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
diff --git a/package.json b/package.json
index a30ae87..67a6f06 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,8 @@
     "react-use-measure": "^2.1.7",
     "slick-carousel": "^1.8.1",
     "swiper": "^11.1.7",
-    "tailwindcss": "^3.4.6"
+    "tailwindcss": "^3.4.6",
+    "typewriter-effect": "^2.22.0"
   },
   "devDependencies": {
     "eslint": "^8.56.0",
diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
index 9858142..e438ddd 100644
--- a/src/components/Hero.jsx
+++ b/src/components/Hero.jsx
@@ -1,9 +1,19 @@
+'use client'
+
 import Image from 'next/image'
+import { useState, useEffect } from 'react'
+import Typewriter from 'typewriter-effect'
 import { Button } from '@/components/Button'
 import { Container } from '@/components/Container'
 import BgNoise from '@/components/BgNoise'
 
 export function Hero() {
+  const [isClient, setIsClient] = useState(false)
+
+  useEffect(() => {
+    setIsClient(true)
+  }, [])
+
   return (
     <>
       <div className="relative -mt-20 min-h-screen">
@@ -37,18 +47,68 @@ export function Hero() {
       <div className="relative">
         <div
           className="bg-cover bg-center -mt-14"
-          style={{ backgroundImage: 'url(/images/paper.jpg)' }}
+          style={{ backgroundImage: 'url(/images/paper.jpg)', opacity: '0.9' }}
         >
           <div className="px-6 py-24 lg:px-8">
             <div className="mx-auto max-w-2xl text-left">
-              <p className="font-script text-2xl text-love-red mb-2 font-typewriter">Mon cher,</p>
-              <p className="font-typewriter text-xl max-w-2xl mx-auto leading-relaxed">
-                If you find yourself here, you’ve survived the noise.<br />
-                Sit, let the glass sweat a little.<br />
-                The band will start soon, and perhaps someone will meet your eyes before the chorus ends.<br />
-                If not, the night still owes you a dance.
+              <p className="font-script text-2xl text-love-red mb-2 font-typewriter relative">
+                <span className="invisible">Mon cher,</span>
+                {isClient && (
+                  <span className="absolute top-0 left-0">
+                    <Typewriter
+                      options={{
+                        delay: 75,
+                      }}
+                      onInit={(typewriter) => {
+                        typewriter.typeString('Mon cher,').start()
+                      }}
+                    />
+                  </span>
+                )}
+              </p>
+              <p className="font-typewriter text-xl max-w-2xl mx-auto leading-relaxed relative">
+                <span className="invisible" dangerouslySetInnerHTML={{ __html: 'If you find yourself here, you’ve survived the noise.<br />Sit, let the glass sweat a little.<br />The band will start soon, and perhaps someone will meet your eyes before the chorus ends.<br />If not, the night still owes you a dance.' }} />
+                {isClient && (
+                  <span className="absolute top-0 left-0">
+                    <Typewriter
+                      options={{
+                        delay: 50,
+                      }}
+                      onInit={(typewriter) => {
+                        typewriter
+                          .pauseFor(2000)
+                          .typeString(
+                            'If you find yourself here, you’ve survived the noise.<br />',
+                          )
+                          .pauseFor(500)
+                          .typeString('Sit, let the glass sweat a little.<br />')
+                          .pauseFor(500)
+                          .typeString(
+                            'The band will start soon, and perhaps someone will meet your eyes before the chorus ends.<br />',
+                          )
+                          .pauseFor(500)
+                          .typeString('If not, the night still owes you a dance.')
+                          .start()
+                      }}
+                    />
+                  </span>
+                )}
+              </p>
+              <p className="font-script text-xl text-love-red mt-6 font-typewriter relative">
+                <span className="invisible">— M.N.</span>
+                {isClient && (
+                  <span className="absolute top-0 left-0">
+                    <Typewriter
+                      onInit={(typewriter) => {
+                        typewriter
+                          .pauseFor(17000)
+                          .typeString('— M.N.')
+                          .start()
+                      }}
+                    />
+                  </span>
+                )}
               </p>
-              <p className="font-script text-xl text-love-red mt-6 font-typewriter">— M.N.</p>
             </div>
           </div>
         </div>
diff --git a/yarn.lock b/yarn.lock
index bd6daca..f473429 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11064,7 +11064,7 @@ react-dev-utils@^11.0.3:
     strip-ansi "6.0.0"
     text-table "0.2.0"
 
-react-dom@*, "react-dom@^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom@^17.0.0 || ^18.0.0 || ^19.0.0", react-dom@^18, "react-dom@^18.0.0 || ^19.0.0", react-dom@^18.2.0, react-dom@>=16, react-dom@>=16.13, react-dom@>=16.6.0, react-dom@>=16.8.0:
+react-dom@*, "react-dom@^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom@^17.0.0 || ^18.0.0 || ^19.0.0", react-dom@^18, "react-dom@^18.0.0 || ^19.0.0", react-dom@^18.2.0, react-dom@>=16, react-dom@>=16.13, react-dom@>=16.6.0, react-dom@>=16.8.0, react-dom@>=17.0.0:
   version "18.3.1"
   resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz"
   integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==
@@ -11208,7 +11208,7 @@ react-use-measure@^2.1.7:
   resolved "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.7.tgz"
   integrity sha512-KrvcAo13I/60HpwGO5jpW7E9DfusKyLPLvuHlUyP5zqnmAPhNc6qTRjUQrdTADl0lpPpDVU2/Gg51UlOGHXbdg==
 
-react@*, "react@^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0", "react@^17.0.0 || ^18.0.0 || ^19.0.0", react@^18, "react@^18.0.0 || ^19.0.0", react@^18.2.0, react@^18.3.1, "react@>= 16", "react@>= 16.8.0 || 17.x.x || ^18.0.0-0", react@>=16, react@>=16.13, react@>=16.6.0, react@>=16.8.0:
+react@*, "react@^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0", "react@^17.0.0 || ^18.0.0 || ^19.0.0", react@^18, "react@^18.0.0 || ^19.0.0", react@^18.2.0, react@^18.3.1, "react@>= 16", "react@>= 16.8.0 || 17.x.x || ^18.0.0-0", react@>=16, react@>=16.13, react@>=16.6.0, react@>=16.8.0, react@>=17.0.0:
   version "18.3.1"
   resolved "https://registry.npmjs.org/react/-/react-18.3.1.tgz"
   integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==
@@ -13182,6 +13182,14 @@ typedarray@^0.0.6:
   resolved "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz"
   integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==
 
+typewriter-effect@^2.22.0:
+  version "2.22.0"
+  resolved "https://registry.npmjs.org/typewriter-effect/-/typewriter-effect-2.22.0.tgz"
+  integrity sha512-01HCRYY462wT8Fxps/epwGCioZd/GMXY0aLKhFKrfJ5Xhgf54/SiDx7Oq7PoES5kGqOEAdW8FS8HYVM2WSvfhQ==
+  dependencies:
+    prop-types "^15.8.1"
+    raf "^3.4.1"
+
 unbox-primitive@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz"