diff --git a/apps/stage-tamagotchi/src/renderer/composables/useCaptionItems.test.ts b/apps/stage-tamagotchi/src/renderer/composables/useCaptionItems.test.ts
new file mode 100644
index 000000000..4ebf6b090
--- /dev/null
+++ b/apps/stage-tamagotchi/src/renderer/composables/useCaptionItems.test.ts
@@ -0,0 +1,51 @@
+import { describe, expect, it, vi } from 'vitest'
+
+import { useCaptionItems } from './useCaptionItems'
+
+describe('useCaptionItems', () => {
+  it('expires each caption event without cancelling earlier events of the same type', () => {
+    vi.useFakeTimers()
+
+    try {
+      const captions = useCaptionItems({ ttlMs: 1000 })
+
+      captions.add({ type: 'caption-speaker', text: 'first' })
+      vi.advanceTimersByTime(500)
+      captions.add({ type: 'caption-speaker', text: 'second' })
+
+      expect(captions.items.value.map(item => item.text)).toEqual(['first', 'second'])
+
+      vi.advanceTimersByTime(500)
+
+      expect(captions.items.value.map(item => item.text)).toEqual(['second'])
+
+      vi.advanceTimersByTime(500)
+
+      expect(captions.items.value).toEqual([])
+    }
+    finally {
+      vi.useRealTimers()
+    }
+  })
+
+  it('clears caption items of the matching type when an empty event arrives', () => {
+    vi.useFakeTimers()
+
+    try {
+      const captions = useCaptionItems({ ttlMs: 1000 })
+
+      captions.add({ type: 'caption-speaker', text: 'speaker' })
+      captions.add({ type: 'caption-assistant', text: 'assistant' })
+      captions.add({ type: 'caption-speaker', text: '' })
+
+      expect(captions.items.value.map(item => item.text)).toEqual(['assistant'])
+
+      vi.advanceTimersByTime(1000)
+
+      expect(captions.items.value).toEqual([])
+    }
+    finally {
+      vi.useRealTimers()
+    }
+  })
+})
diff --git a/apps/stage-tamagotchi/src/renderer/composables/useCaptionItems.ts b/apps/stage-tamagotchi/src/renderer/composables/useCaptionItems.ts
new file mode 100644
index 000000000..f19b3a278
--- /dev/null
+++ b/apps/stage-tamagotchi/src/renderer/composables/useCaptionItems.ts
@@ -0,0 +1,102 @@
+import { readonly, shallowRef } from 'vue'
+
+export type CaptionChannelEvent
+  = | { type: 'caption-speaker', text: string }
+    | { type: 'caption-assistant', text: string }
+
+export interface CaptionItem {
+  /** Stable render key and timer owner for one broadcast caption event. */
+  id: number
+  /** Caption source, used for styling and explicit type-level clears. */
+  type: CaptionChannelEvent['type']
+  /** Text payload rendered by the overlay. */
+  text: string
+}
+
+export interface UseCaptionItemsOptions {
+  /**
+   * How long one caption event should stay visible before removing itself.
+   *
+   * @default 5000
+   */
+  ttlMs?: number
+}
+
+const defaultCaptionItemsOptions = {
+  ttlMs: 5_000,
+} satisfies Required<UseCaptionItemsOptions>
+
+/**
+ * Manages caption overlay items with per-event expiry.
+ *
+ * Use when:
+ * - Broadcast caption updates should age out independently.
+ * - Empty caption events should clear only the matching caption source.
+ *
+ * Expects:
+ * - Callers pass plain caption broadcast events.
+ * - Callers call `dispose()` when the owner outlives Vue component cleanup.
+ *
+ * Returns:
+ * - Readonly caption items plus actions for adding events and clearing timers.
+ */
+export function useCaptionItems(options: UseCaptionItemsOptions = {}) {
+  const { ttlMs } = { ...defaultCaptionItemsOptions, ...options }
+  const items = shallowRef<CaptionItem[]>([])
+  const expiryTimers = new Map<CaptionItem['id'], ReturnType<typeof setTimeout>>()
+  let nextId = 1
+
+  function clearTimer(id: CaptionItem['id']) {
+    const timer = expiryTimers.get(id)
+    if (!timer)
+      return
+
+    clearTimeout(timer)
+    expiryTimers.delete(id)
+  }
+
+  function remove(id: CaptionItem['id']) {
+    clearTimer(id)
+    items.value = items.value.filter(item => item.id !== id)
+  }
+
+  function clearType(type: CaptionChannelEvent['type']) {
+    const matchedItems = items.value.filter(item => item.type === type)
+    for (const item of matchedItems) {
+      clearTimer(item.id)
+    }
+    items.value = items.value.filter(item => item.type !== type)
+  }
+
+  function add(event: CaptionChannelEvent) {
+    if (!event.text.trim()) {
+      clearType(event.type)
+      return
+    }
+
+    const item: CaptionItem = {
+      id: nextId++,
+      type: event.type,
+      text: event.text,
+    }
+    items.value = [...items.value, item]
+    expiryTimers.set(item.id, setTimeout(() => {
+      remove(item.id)
+    }, ttlMs))
+  }
+
+  function dispose() {
+    for (const timer of expiryTimers.values()) {
+      clearTimeout(timer)
+    }
+    expiryTimers.clear()
+    items.value = []
+  }
+
+  return {
+    items: readonly(items),
+    add,
+    clearType,
+    dispose,
+  }
+}
diff --git a/apps/stage-tamagotchi/src/renderer/pages/caption.vue b/apps/stage-tamagotchi/src/renderer/pages/caption.vue
index cea305f13..7fcec6c0f 100644
--- a/apps/stage-tamagotchi/src/renderer/pages/caption.vue
+++ b/apps/stage-tamagotchi/src/renderer/pages/caption.vue
@@ -1,29 +1,57 @@
 <script setup lang="ts">
 import { defineInvoke } from '@moeru/eventa'
 import { useElectronEventaContext, useElectronMouseAroundWindowBorder, useElectronMouseInWindow } from '@proj-airi/electron-vueuse'
+import { createFadeAnimator, PoppinText } from '@proj-airi/stage-ui/components'
 import { refDebounced, useBroadcastChannel } from '@vueuse/core'
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 
 import { captionGetIsFollowingWindow, captionIsFollowingWindowChanged } from '../../shared/eventa'
+import { useCaptionItems } from '../composables/useCaptionItems'
+
+/** Keep stale captions from lingering after the last broadcast update. */
+const CAPTION_TEXT_EXPIRY_MS = 10_000
 
 const attached = ref(true)
-const speakerText = ref('')
-const assistantText = ref('')
+
 const { isOutside: isOutsideWindow } = useElectronMouseInWindow()
 const isOutsideWindowFor250Ms = refDebounced(isOutsideWindow, 250)
 const shouldFadeOnCursorWithin = computed(() => !isOutsideWindowFor250Ms.value)
+
 const { isNearAnyBorder: isAroundWindowBorder } = useElectronMouseAroundWindowBorder({ threshold: 30 })
 const isAroundWindowBorderFor250Ms = refDebounced(isAroundWindowBorder, 250)
 
 // Broadcast channel for captions
-type CaptionChannelEvent
-  = | { type: 'caption-speaker', text: string }
-    | { type: 'caption-assistant', text: string }
+type CaptionChannelEvent = | { type: 'caption-speaker', text: string } | { type: 'caption-assistant', text: string }
 const { data } = useBroadcastChannel<CaptionChannelEvent, CaptionChannelEvent>({ name: 'airi-caption-overlay' })
+const { items: captionItems, add: addCaptionItem, dispose: disposeCaptionItems } = useCaptionItems({ ttlMs: CAPTION_TEXT_EXPIRY_MS })
 
 const context = useElectronEventaContext()
 const getAttached = defineInvoke(context.value, captionGetIsFollowingWindow)
 
+const captionAnimatorByType = {
+  'caption-speaker': createFadeAnimator({ duration: 180 }),
+  'caption-assistant': createFadeAnimator({ duration: 180 }),
+} satisfies Record<CaptionChannelEvent['type'], ReturnType<typeof createFadeAnimator>>
+
+const captionTypes = [
+  'caption-speaker',
+  'caption-assistant',
+] satisfies CaptionChannelEvent['type'][]
+
+function toCaptionTextSegments(type: CaptionChannelEvent['type']) {
+  return captionItems.value
+    .filter(item => item.type === type)
+    .map((item, index) => ({
+      key: item.id,
+      text: index === 0 ? item.text : ` ${item.text}`,
+    }))
+}
+
+const captionTextByType = computed(() => ({
+  'caption-speaker': toCaptionTextSegments('caption-speaker'),
+  'caption-assistant': toCaptionTextSegments('caption-assistant'),
+}))
+
 onMounted(async () => {
   try {
     const isAttached = await getAttached()
@@ -44,15 +72,19 @@ onMounted(async () => {
       if (!event)
         return
       if (event.type === 'caption-speaker') {
-        speakerText.value = event.text
+        addCaptionItem(event)
       }
       else if (event.type === 'caption-assistant') {
-        assistantText.value = event.text
+        addCaptionItem(event)
       }
     }, { immediate: true })
   }
   catch {}
 })
+
+onUnmounted(() => {
+  disposeCaptionItems()
+})
 </script>
 
 <template>
@@ -74,17 +106,20 @@ onMounted(async () => {
 
       <div class="max-w-[80vw] flex flex-col gap-1">
         <div
-          v-if="speakerText"
-          class="rounded-md px-2 py-1 text-[1.1rem] text-neutral-50 font-medium text-shadow-lg text-shadow-color-neutral-900/60"
+          v-for="type in captionTypes"
+          v-show="captionTextByType[type].length > 0"
+          :key="type"
+          :class="[
+            type === 'caption-speaker' ? 'rounded-md px-2 py-1 text-[1.1rem] text-neutral-50 font-medium text-shadow-lg text-shadow-color-neutral-900/60' : '',
+            type === 'caption-assistant' ? 'rounded-md px-2 py-1 text-[1.35rem] text-primary-50 font-semibold text-stroke-4 text-stroke-primary-300/50 text-shadow-lg text-shadow-color-primary-700/50' : '',
+          ]"
+          :style="type === 'caption-assistant' ? { paintOrder: 'stroke fill' } : undefined"
         >
-          {{ speakerText }}
-        </div>
-        <div
-          v-if="assistantText"
-          class="rounded-md px-2 py-1 text-[1.35rem] text-primary-50 font-semibold text-stroke-4 text-stroke-primary-300/50 text-shadow-lg text-shadow-color-primary-700/50"
-          :style="{ paintOrder: 'stroke fill' }"
-        >
-          {{ assistantText }}
+          <PoppinText
+            :text="captionTextByType[type]"
+            :animator="captionAnimatorByType[type]"
+            :text-class="type === 'caption-assistant' ? 'color-neutral-50! align-middle' : type === 'caption-speaker' ? 'color-neutral-50! align-middle' : ''"
+          />
         </div>
       </div>
     </div>
diff --git a/packages/stage-ui/src/components/widgets/index.ts b/packages/stage-ui/src/components/widgets/index.ts
index 5ba71b0ef..23a094a87 100644
--- a/packages/stage-ui/src/components/widgets/index.ts
+++ b/packages/stage-ui/src/components/widgets/index.ts
@@ -1,3 +1,4 @@
 export { default as ColorPalette } from './ColorPalette.vue'
+export * from './poppin-text/animators'
 export { default as PoppinText } from './poppin-text/PoppinText.web.vue'
 export { default as PoppingSubtitles } from './PoppingSubtitles.web.vue'
diff --git a/packages/stage-ui/src/components/widgets/poppin-text/PoppinText.web.browser.test.ts b/packages/stage-ui/src/components/widgets/poppin-text/PoppinText.web.browser.test.ts
new file mode 100644
index 000000000..4b16cc10e
--- /dev/null
+++ b/packages/stage-ui/src/components/widgets/poppin-text/PoppinText.web.browser.test.ts
@@ -0,0 +1,75 @@
+import type { Animator } from './animators'
+
+import { describe, expect, it, vi } from 'vitest'
+import { createApp, h, nextTick, ref } from 'vue'
+
+import PoppinText from './PoppinText.web.vue'
+
+type AnimatorMock = ReturnType<typeof vi.fn<Animator>>
+
+async function mountPoppinText(params: {
+  text: ReturnType<typeof ref<Array<{ key: string, text: string }>>>
+  animator: AnimatorMock
+}) {
+  const host = document.createElement('div')
+  document.body.appendChild(host)
+
+  const app = createApp({
+    render: () => h(PoppinText, {
+      text: params.text.value,
+      animator: params.animator,
+    }),
+  })
+
+  app.mount(host)
+  await nextTick()
+
+  return {
+    app,
+    host,
+  }
+}
+
+describe('poppin text', () => {
+  it('animates only newly appended keyed text segments', async () => {
+    const text = ref([{ key: 'first', text: 'Hi' }])
+    const animator = vi.fn<Animator>()
+    const { app, host } = await mountPoppinText({ text, animator })
+
+    expect(animator.mock.calls.map(([elements]) => elements.length)).toEqual([2])
+
+    text.value = [
+      { key: 'first', text: 'Hi' },
+      { key: 'second', text: '!' },
+    ]
+    await nextTick()
+    await nextTick()
+
+    expect(host.textContent).toBe('Hi!')
+    expect(animator.mock.calls.map(([elements]) => elements.length)).toEqual([2, 1])
+
+    app.unmount()
+    host.remove()
+  })
+
+  it('does not reanimate remaining keyed text segments when earlier segments are removed', async () => {
+    const text = ref([
+      { key: 'first', text: 'Hi' },
+      { key: 'second', text: '!' },
+    ])
+    const animator = vi.fn<Animator>()
+    const { app, host } = await mountPoppinText({ text, animator })
+
+    expect(animator.mock.calls.map(([elements]) => elements.length)).toEqual([3])
+
+    text.value = [{ key: 'second', text: '!' }]
+    await nextTick()
+    await nextTick()
+
+    expect(host.textContent).toBe('!')
+    expect(animator.mock.calls.map(([elements]) => elements.length)).toEqual([3])
+
+    app.unmount()
+    host.remove()
+  })
+})
diff --git a/packages/stage-ui/src/components/widgets/poppin-text/PoppinText.web.vue b/packages/stage-ui/src/components/widgets/poppin-text/PoppinText.web.vue
index cc2a92c1a..fae1d5a95 100644
--- a/packages/stage-ui/src/components/widgets/poppin-text/PoppinText.web.vue
+++ b/packages/stage-ui/src/components/widgets/poppin-text/PoppinText.web.vue
@@ -6,12 +6,22 @@ import type { Animator } from './animators'
 import { readGraphemeClusters } from 'clustr'
 import { onMounted, ref, shallowRef, watch } from 'vue'
 
+interface PoppinTextSegment {
+  key: string | number
+  text: string
+}
+
+interface PoppinTextTarget {
+  id: string
+  grapheme: string
+}
+
 const props = defineProps<{
   /**
-   * A plain string or a ReadableStream of bytes from text in UTF-8 encoding.
+   * A plain string, keyed text segments, or a ReadableStream of bytes from text in UTF-8 encoding.
    * If a stream is provided, the stream **SHOULD NOT** be reused. (i.e. You should not set a same stream twice.)
    */
-  text?: string | ReadableStream<Uint8Array>
+  text?: string | PoppinTextSegment[] | ReadableStream<Uint8Array>
   textClass?: string | string[]
   animator?: Animator
 }>()
@@ -20,68 +30,139 @@ const emits = defineEmits<{
   (e: 'textSplit', grapheme: string): void
 }>()
 
-const targets = ref<string[]>([])
+const targets = ref<PoppinTextTarget[]>([])
 const abortController = shallowRef<AbortController>()
 const segmenter = new Intl.Segmenter('und', { granularity: 'grapheme' })
+const animatedTargetIds = new Set<PoppinTextTarget['id']>()
+let plainTextGeneration = 0
+let streamTextGeneration = 0
+
+function readTextTargets(text: string, namespace: string): PoppinTextTarget[] {
+  return Array.from(segmenter.segment(text), (seg, index) => ({
+    id: `${namespace}:${index}`,
+    grapheme: seg.segment,
+  }))
+}
+
+function readSegmentTargets(segments: PoppinTextSegment[]): PoppinTextTarget[] {
+  return segments.flatMap(segment =>
+    Array.from(segmenter.segment(segment.text), (seg, index) => ({
+      id: `segment:${segment.key}:${index}`,
+      grapheme: seg.segment,
+    })),
+  )
+}
 
 watch(() => props.text, async (text) => {
-  if (!text)
+  if (!text) {
+    animatedTargetIds.clear()
+    targets.value = []
     return
-  if (typeof text === 'string') {
-    targets.value = Array.from(segmenter.segment(text), seg => seg.segment)
   }
-  else {
-    abortController.value?.abort()
-    abortController.value = new AbortController()
-    try {
-      targets.value = []
-      for await (const cluster of readGraphemeClusters(text.getReader(), { signal: abortController.value.signal })) {
-        targets.value.push(cluster)
-        emits('textSplit', cluster)
-      }
+
+  if (typeof text === 'string') {
+    const nextTargets = readTextTargets(text, `text:${plainTextGeneration}`)
+    const appendsToPreviousText = targets.value.length <= nextTargets.length
+      && targets.value.every((target, index) => target.grapheme === nextTargets[index]?.grapheme)
+
+    if (!appendsToPreviousText) {
+      plainTextGeneration += 1
+      animatedTargetIds.clear()
+      targets.value = readTextTargets(text, `text:${plainTextGeneration}`)
+      return
     }
-    catch (error) {
-      if (error instanceof Error && error.message === 'Aborted') {
-        console.warn('Text reading aborted')
-      }
-      else {
-        console.error('Error reading text:', error)
-      }
+
+    targets.value = nextTargets
+    return
+  }
+  if (Array.isArray(text)) {
+    targets.value = readSegmentTargets(text)
+    return
+  }
+
+  abortController.value?.abort()
+  abortController.value = new AbortController()
+
+  try {
+    streamTextGeneration += 1
+    animatedTargetIds.clear()
+    targets.value = []
+
+    for await (const cluster of readGraphemeClusters(text.getReader(), { signal: abortController.value.signal })) {
+      targets.value.push({
+        id: `stream:${streamTextGeneration}:${targets.value.length}`,
+        grapheme: cluster,
+      })
+
+      emits('textSplit', cluster)
+    }
+  }
+  catch (error) {
+    if (error instanceof Error && error.message === 'Aborted') {
+      console.warn('Text reading aborted')
+    }
+    else {
+      console.error('Error reading text:', error)
     }
   }
 }, { immediate: true })
 
 const elements = ref<HTMLElement[]>([])
 const animatorCleanupFn = shallowRef<() => void>()
+const activeAnimator = shallowRef<Animator>()
 
 onMounted(() => {
-  animatorCleanupFn.value = props.animator?.(elements.value)
+  animatorCleanupFn.value = props.animator?.(elements.value.slice())
+  activeAnimator.value = props.animator
+  targets.value.forEach(target => animatedTargetIds.add(target.id))
 })
 
-const lastAnimatedIndex = ref(-1)
-
 watch([targets, () => props.animator], ([targets, animator]) => {
-  if (typeof props.text === 'string') {
+  const animatorChanged = activeAnimator.value !== animator
+  const targetIds = new Set(targets.map(target => target.id))
+
+  for (const id of animatedTargetIds) {
+    if (!targetIds.has(id))
+      animatedTargetIds.delete(id)
+  }
+
+  if (animatorChanged) {
     animatorCleanupFn.value?.()
-    animatorCleanupFn.value = animator?.(elements.value)
+    animatedTargetIds.clear()
   }
-  else {
-    animator?.(elements.value.slice(lastAnimatedIndex.value, targets.length))
-    lastAnimatedIndex.value = targets.length
+
+  const targetElements = elements.value.filter((_, index) => {
+    const target = targets[index]
+    return target && !animatedTargetIds.has(target.id)
+  })
+
+  const cleanup = targetElements.length > 0 ? animator?.(targetElements) : undefined
+  if (cleanup) {
+    animatorCleanupFn.value = cleanup
   }
+
+  targets.forEach(target => animatedTargetIds.add(target.id))
+
+  activeAnimator.value = animator
 }, { deep: true, flush: 'post' }) // <- Ensure post-update refs
 </script>
 
 <template>
   <div>
     <span
-      v-for="(grapheme, index) in targets"
-      :key="index"
+      v-for="target in targets"
+      :key="target.id"
       ref="elements"
-      class="inline-block color-primary-400 dark:color-primary-100"
-      :class="[...(typeof props.textClass === 'string' ? [props.textClass] : (props.textClass || []))]"
+      class="inline-block whitespace-pre-wrap color-primary-400 dark:color-primary-100"
+      :class="[
+        ...(
+          typeof props.textClass === 'string'
+            ? [props.textClass]
+            : (props.textClass || [])
+        ),
+      ]"
     >
-      {{ grapheme }}
+      {{ target.grapheme }}
     </span>
   </div>
 </template>