165

Shimmering Text

PreviousNext

Animated text with gradient shimmer effects and viewport-triggered animations using Motion.

Text Shimmer Effect

Animated gradient text with automatic cycling

Agent is thinking...
<script setup lang="ts">
import { ShimmeringText } from '@/components/elevenlabs-ui/shimmering-text'
import { AnimatePresence, Motion } from 'motion-v'
import { onMounted, onUnmounted, ref } from 'vue'

const phrases = [
  'Agent is thinking...',
  'Processing your request...',
  'Analyzing the data...',
  'Generating response...',
  'Almost there...',
]

const currentIndex = ref(0)
let intervalId: ReturnType<typeof setInterval>

onMounted(() => {
  intervalId = setInterval(() => {
    currentIndex.value = (currentIndex.value + 1) % phrases.length
  }, 3000)
})

onUnmounted(() => {
  clearInterval(intervalId)
})
</script>

<template>
  <div class="bg-card w-full rounded-lg border p-6">
    <div class="mb-4">
      <h3 class="text-lg font-semibold">
        Text Shimmer Effect
      </h3>
      <p class="text-muted-foreground text-sm">
        Animated gradient text with automatic cycling
      </p>
    </div>

    <div class="space-y-4">
      <div class="bg-muted/10 flex items-center justify-center rounded-lg py-8">
        <AnimatePresence mode="wait">
          <Motion
            :key="currentIndex"
            :initial="{ opacity: 0, y: 10 }"
            :animate="{ opacity: 1, y: 0 }"
            :exit="{ opacity: 0, y: -10 }"
            :transition="{ duration: 0.3 }"
          >
            <ShimmeringText :text="phrases[currentIndex]" />
          </Motion>
        </AnimatePresence>
      </div>
    </div>
  </div>
</template>

Installation

pnpm dlx elevenlabs-ui-vue@latest add shimmering-text

Usage

import { ShimmeringText } from "@/components/elevenlabs-ui/shimmering-text"

Basic Usage

<ShimmeringText text="Hello, World!" />

Custom Duration and Colors

<template>
  <ShimmeringText
    text="Custom Shimmer"
    :duration="3"
    :color="'#6B7280'"
    :shimmerColor="'#3B82F6'"
  />
</template>

Trigger on Viewport Entry

<template>
  <ShimmeringText
    text="Appears when scrolled into view"
    :startOnView="true"
    :once="true"
  />
</template>

Repeating Animation

<template>
 <ShimmeringText
  text="Repeating Shimmer"
  :repeat="true"
  :repeatDelay="1"
  :duration="2"
/>
</template>

With Custom Styling

<template>
 <ShimmeringText
   text="Large Heading"
   class="text-4xl font-bold"
   :spread="3"
 />
</template>

API Reference

ShimmeringText

An animated text component with gradient shimmer effect and viewport detection.

Props

PropTypeDefaultDescription
textstring-Required. Text to display with shimmer effect
durationnumber2Animation duration in seconds
delaynumber0Delay before starting animation
repeatbooleantrueWhether to repeat the animation
repeatDelaynumber0.5Pause duration between repeats in seconds
classstring-Optional CSS classes
startOnViewbooleantrueWhether to start animation when entering viewport
oncebooleanfalseWhether to animate only once
inViewMarginstring-Margin for viewport detection (e.g., "0px 0px -10%")
spreadnumber2Shimmer spread multiplier
colorstring-Base text color (CSS custom property)
shimmerColorstring-Shimmer gradient color (CSS custom property)

Notes

  • Built with Motion-v for smooth, performant animations
  • Uses CSS gradient background animation for the shimmer effect
  • Viewport detection powered by Motion-v's useInView hook
  • Dynamic spread calculation based on text length for consistent appearance
  • Supports custom colors via CSS custom properties
  • Text uses background-clip: text for gradient effect
  • Default colors adapt to light/dark mode automatically
  • Optimized with computed for performance
  • Animation can be controlled via viewport intersection or immediate start
Scrub BarSpeech Input