diff --git a/packages/stage-ui/src/components/Widgets/PoppinText/PoppinText.web.story.vue b/packages/stage-ui/src/components/Widgets/PoppinText/PoppinText.web.story.vue
index 89eb844e2..902f1ea22 100644
--- a/packages/stage-ui/src/components/Widgets/PoppinText/PoppinText.web.story.vue
+++ b/packages/stage-ui/src/components/Widgets/PoppinText/PoppinText.web.story.vue
@@ -3,9 +3,9 @@ import { ref } from 'vue'
 
 import PoppinText from './PoppinText.web.vue'
 
-import { popupAnimator } from './animators'
+import { fadeAnimator, popupAnimator } from './animators'
 
-const text = ref('キラキラドキドキ')
+const text = ref('キラキラドキドキキラキラドキドキキラキラドキドキキラキラドキドキ')
 </script>
 
 <template>
@@ -19,12 +19,21 @@ const text = ref('キラキラドキドキ')
     </template>
 
     <Variant
-      id="basic-english"
-      title="English Text"
+      id="popup"
+      title="Popup"
     >
-      <div h-50 w-50 p-4>
+      <div h-auto w-full p-4>
         <PoppinText :text="text" :animator="popupAnimator" />
       </div>
     </Variant>
+
+    <Variant
+      id="fade"
+      title="Fade"
+    >
+      <div h-auto w-full p-4>
+        <PoppinText :text="text" :animator="fadeAnimator" />
+      </div>
+    </Variant>
   </Story>
 </template>
diff --git a/packages/stage-ui/src/components/Widgets/PoppinText/PoppinText.web.vue b/packages/stage-ui/src/components/Widgets/PoppinText/PoppinText.web.vue
index ccc2ce2b2..7fb22b4dc 100644
--- a/packages/stage-ui/src/components/Widgets/PoppinText/PoppinText.web.vue
+++ b/packages/stage-ui/src/components/Widgets/PoppinText/PoppinText.web.vue
@@ -26,7 +26,7 @@ watch([graphemeClusters, () => props.animator], ([_, animator]) => {
 </script>
 
 <template>
-  <div class="relative overflow-hidden">
+  <div class="relative overflow-hidden whitespace-nowrap">
     <span
       v-for="(cluster, index) in graphemeClusters"
       :key="index"
diff --git a/packages/stage-ui/src/components/Widgets/PoppinText/animators/fade.ts b/packages/stage-ui/src/components/Widgets/PoppinText/animators/fade.ts
new file mode 100644
index 000000000..f8c4cc94b
--- /dev/null
+++ b/packages/stage-ui/src/components/Widgets/PoppinText/animators/fade.ts
@@ -0,0 +1,20 @@
+import type { Animator } from '.'
+
+import { createTimeline } from 'animejs'
+
+export const fadeAnimator: Animator = (elements: HTMLElement[]) => {
+  const timeline = createTimeline({ loop: true })
+    .set(elements, {
+      opacity: 0,
+    })
+    .add(elements, {
+      opacity: [0, 1],
+      easing: 'easeInOutQuad',
+      duration: 2250,
+      delay: (_, i) => 150 * (i + 1),
+    })
+
+  return () => {
+    timeline.remove(elements)
+  }
+}
diff --git a/packages/stage-ui/src/components/Widgets/PoppinText/animators/index.ts b/packages/stage-ui/src/components/Widgets/PoppinText/animators/index.ts
index 4c9e07193..7d63da164 100644
--- a/packages/stage-ui/src/components/Widgets/PoppinText/animators/index.ts
+++ b/packages/stage-ui/src/components/Widgets/PoppinText/animators/index.ts
@@ -1,3 +1,4 @@
 export type Animator = (elements: HTMLElement[]) => (() => void)
 
+export * from './fade'
 export * from './popup'
diff --git a/packages/stage-ui/src/components/Widgets/PoppinText/animators/popup.ts b/packages/stage-ui/src/components/Widgets/PoppinText/animators/popup.ts
index ca0032660..30cec12dd 100644
--- a/packages/stage-ui/src/components/Widgets/PoppinText/animators/popup.ts
+++ b/packages/stage-ui/src/components/Widgets/PoppinText/animators/popup.ts
@@ -4,11 +4,17 @@ import { createTimeline } from 'animejs'
 
 export const popupAnimator: Animator = (elements: HTMLElement[]) => {
   const timeline = createTimeline({ loop: true })
+    .set(elements, {
+      opacity: 0,
+      translateY: '1.1em',
+      translateZ: 0,
+    })
     .add(elements, {
+      opacity: [0, 1],
       translateY: ['1.1em', 0],
       translateZ: 0,
       duration: 750,
-      delay: (el, i) => 50 * i,
+      delay: (_, i) => 50 * i,
     })
 
   return () => {