Motion Text

<dt-text kind="headline" :size="600">
  <dt-motion-text
    text="Welcome to Dialtone Motion Text"
    animation-mode="shimmer"
    :auto-start="true"
    loop
  />
</dt-text>

Usage #

The Motion Text component provides beautiful text animations with zero configuration required. Simply pass text and let it animate automatically.

Animation Modes #

The component supports six different animation modes:

<dt-text kind="headline" :size="600">
  <dt-motion-text
    text="Welcome to Dialtone Motion Text"
    :animation-mode="{mode}"
  />
</dt-text>

Speed Control #

<dt-text kind="headline" :size="600">
  <dt-motion-text
    text="Welcome to Dialtone Motion Text"
    animation-mode="shimmer"
    :speed="{speed}"
    :auto-start="true"
    loop
  />
</dt-text>

Manual Control #

Take full control of the animation lifecycle:

<dt-button @click="$refs.textRef.start()">Start</dt-button>
<dt-button @click="$refs.textRef.pause()">Pause</dt-button>
<dt-button @click="$refs.textRef.resume()">Resume</dt-button>
<dt-button @click="$refs.textRef.reset()">Reset</dt-button>
<dt-button @click="$refs.textRef.skipToEnd()">Skip to End</dt-button>
<dt-motion-text
  ref="textRef"
  text="Welcome to Dialtone Motion Text"
  animation-mode="shimmer"
  :auto-start="false"
/>

Looping Animation #

Perfect for attention-grabbing headers or hero sections:

<dt-motion-text
  text="Continuous animation"
  animation-mode="slide-in"
  :loop="true"
  :speed="200"
/>

Using Slots #

You can also use the default slot instead of the text prop:

<dt-motion-text animation-mode="fade-in">
  <span>Animated </span>
  <strong>text</strong>
</dt-motion-text>

Vue API #

import { DtMotionText } from '@dialpad/dialtone-vue';

Slots

Props

Events

Accessibility #

The Motion Text component is built with accessibility as a core principle.

Reduced Motion Support #

Automatically respects the user's prefers-reduced-motion system setting. When enabled, animations are skipped and text appears instantly.

<dt-motion-text
  text="Respects user preferences"
  :respects-reduced-motion="true"
/>

Screen Reader Support #

Provide alternative text for screen readers:

<dt-motion-text
  text="🎉 Congratulations!"
  screen-reader-text="Congratulations"
/>

ARIA Attributes #

The component automatically includes proper ARIA attributes:

• aria-live="polite" during animation
• aria-label when screen reader text is provided
• aria-hidden for animated content while animating

Best Practices #

1. Choose the right speed: Use 200 for short text, 400 for longer passages
2. Don't overuse: Too many animated elements can be distracting
3. Consider context: Hero sections work well with gradient-in, while body text might be better with fade-in
4. Test with reduced motion: Always ensure your UI works with animations disabled
5. Provide screen reader text: If using emojis or special characters, always include alternative text