diff --git a/src/components/Hero.astro b/src/components/Hero.astro
index a975cf6..75202ca 100644
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@@ -19,6 +19,14 @@ function getNewAnimationDelay() {
 function getHeroTitleAnimation() {
   return getTitleAnimation(getNewAnimationDelay())
 }
+
+const {
+  title1 = 'welcome',
+  title2 = 'to',
+  title3 = 'a',
+  title4 = 'calmer',
+  title5 = 'internet',
+} = Astro.props
 ---
 
 <header
@@ -30,20 +38,24 @@ function getHeroTitleAnimation() {
       class="relative px-12 text-center !font-normal !leading-8 leading-[108px] md:!text-7xl lg:px-0 lg:!text-9xl"
     >
       <motion.span client:load {...getHeroTitleAnimation()}>
-        welcome
+        {title1}
+      </motion.span>
+      <motion.span client:load {...getHeroTitleAnimation()}>
+        {title2}
       </motion.span>
-      <motion.span client:load {...getHeroTitleAnimation()}> to </motion.span>
       <br class="hidden md:block" />
-      <motion.span client:load {...getHeroTitleAnimation()}> a </motion.span>
+      <motion.span client:load {...getHeroTitleAnimation()}>
+        {title3}
+      </motion.span>
       <motion.span
         client:load
         {...getHeroTitleAnimation()}
         className="italic text-coral"
       >
-        calmer
+        {title4}
       </motion.span>
       <motion.span client:load {...getHeroTitleAnimation()}>
-        internet
+        {title5}
       </motion.span>
     </Title>
     <motion.span client:load {...getHeroTitleAnimation()}>