chore(motion-text): DLT-2932 moved from recipe to component

apps/dialtone-documentation/docs/_data/site-nav.json

@@ -701,6 +701,10 @@
           "text": "Modal",
           "link": "/components/modal.html"
         },
+        {
+          "text": "Motion Text",
+          "link": "/components/motion-text.html"
+        },
         {
           "text": "Notice",
           "link": "/components/notice.html"

packages/dialtone-vue/recipes/motion/motion_text/motion_text.mdx → apps/dialtone-documentation/docs/components/motion-text.md

@@ -1,25 +1,42 @@
-import { Canvas, Story, Subtitle, Controls, Meta } from '@storybook/addon-docs/blocks';
-
-import * as MotionTextStories from './motion_text.stories';
-
-<Meta of={MotionTextStories}/>
-
-# Motion Text
-
-<Subtitle>
-  A versatile, accessible text animation component with multiple animation modes,
-  full accessibility support, and comprehensive customization options.
-</Subtitle>
+---
+title: Motion Text
+description: A versatile, accessible text animation component with multiple animation modes, full accessibility support, and comprehensive customization options.
+status: ready
+thumb: true
+storybook: https://dialtone.dialpad.com/vue/?path=/story/components-motion-text--default
+---
+
+<code-well-header class="d-d-block">
+  <dt-stack direction="row" align="center" class="d-hmn128 d-p24">
+    <dt-motion-text
+      ref="example-motion-text"
+      text="Welcome to Dialtone Motion Text"
+      animation-mode="gradient-in"
+      speed="md"
+      :auto-start="true"
+      class="d-headline--lg"
+    />
+  </dt-stack>
+</code-well-header>
 
-## Default
+<code-example-tabs
+vueCode='
+<dt-motion-text
+  text="Welcome to Dialtone Motion Text"
+  animation-mode="gradient-in"
+  speed="md"
+  class="d-headline--lg"
+/>
+'
+/>
 
-The Motion Text component provides beautiful text animations with zero configuration required.
+## Usage
 
-<Canvas of={MotionTextStories.Default} />
+The Motion Text component provides beautiful text animations with zero configuration required. Simply pass text and let it animate automatically.
 
-## Animation Modes
+### Animation Modes
 
-The component supports six different animation modes, each with its own unique visual style:
+The component supports six different animation modes:
 
 - **gradient-in**: Characters appear with a colorful gradient highlight reveal
 - **fade-in**: Smooth opacity-based character reveal
@@ -28,64 +45,66 @@ The component supports six different animation modes, each with its own unique v
 - **shimmer**: Static text with an animated shimmer effect (loops automatically)
 - **none**: Instant text display without animation
 
-<Canvas of={MotionTextStories.Modes} />
+<code-well-header class="d-d-block">
+  <dt-stack gap="400" class="d-p24">
+    <dt-motion-text
+      text="Gradient In Animation"
+      animation-mode="gradient-in"
+      speed="md"
+      :auto-start="true"
+      class="d-headline--md"
+    />
+  </dt-stack>
+</code-well-header>
 
-## Variants
+<code-example-tabs
+vueCode='
+<dt-motion-text
+  text="Gradient In Animation"
+  animation-mode="gradient-in"
+  speed="md"
+/>
+'
+/>
 
 ### Speed Control
 
 Use t-shirt sizing (sm, md, lg) to control animation speed:
 
-### Text Sizes
-
-Works seamlessly with any Dialtone text class:
-
-### Looping & Manual Controls
-
-Full programmatic control over animation playback:
-
-<Canvas of={MotionTextStories.Variants} />
-
-## Slots, Props & Events
-
-<Controls />
-
-## Usage
-
-### Import
-
-```jsx
-import { DtRecipeMotionText } from '@dialpad/dialtone-vue';
-```
-
-### Basic Usage
+- **sm**: Fast animation
+- **md**: Medium animation (default)
+- **lg**: Slow animation
 
-The simplest form - just pass text and let it animate automatically:
-
-```html
-<dt-recipe-motion-text text="Hello world!" />
-```
-
-### With Animation Mode
+<code-example-tabs
+vueCode='
+<dt-motion-text
+  text="Fast animation"
+  animation-mode="fade-in"
+  speed="sm"
+/>
 
-Choose from multiple animation styles:
+<dt-motion-text
+  text="Medium animation"
+  animation-mode="fade-in"
+  speed="md"
+/>
 
-```html
-<dt-recipe-motion-text
-  text="Animated text"
-  animation-mode="gradient-in"
+<dt-motion-text
+  text="Slow animation"
+  animation-mode="fade-in"
   speed="lg"
 />
-```
+'
+/>
 
 ### Manual Control
 
 Take full control of the animation lifecycle:
 
-```html
+```vue
 <template>
   <div>
-    <dt-recipe-motion-text
+    <dt-motion-text
       ref="textRef"
       text="Click to animate"
       :auto-start="false"
@@ -94,7 +113,9 @@ 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>
   </div>
 </template>
 
@@ -113,35 +134,44 @@ export default {
 
 Perfect for attention-grabbing headers or hero sections:
 
-```html
-<dt-recipe-motion-text
+<code-example-tabs
+vueCode='
+<dt-motion-text
   text="Continuous animation"
+  animation-mode="slide-in"
   :loop="true"
   speed="sm"
 />
-```
+'
+/>
 
 ### Using Slots
 
 You can also use the default slot instead of the text prop:
 
-```html
-<dt-recipe-motion-text animation-mode="fade-in">
+<code-example-tabs
+vueCode='
+<dt-motion-text animation-mode="fade-in">
   <span>Animated </span>
   <strong>text</strong>
-</dt-recipe-motion-text>
-```
+</dt-motion-text>
+'
+/>
+
+## Vue API
+
+<component-vue-api component-name="motiontext" />
 
 ## Accessibility
 
-The Motion Text component is built with accessibility as a core principle:
+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.
 
-```html
-<dt-recipe-motion-text
+```vue
+<dt-motion-text
   text="Respects user preferences"
   :respects-reduced-motion="true"
 />
@@ -151,8 +181,8 @@ Automatically respects the user's `prefers-reduced-motion` system setting. When
 
 Provide alternative text for screen readers:
 
-```html
-<dt-recipe-motion-text
+```vue
+<dt-motion-text
   text="🎉 Congratulations!"
   screen-reader-text="Congratulations"
 />
@@ -166,31 +196,7 @@ The component automatically includes proper ARIA attributes:
 - `aria-label` when screen reader text is provided
 - `aria-hidden` for animated content while animating
 
-## Animation Modes Explained
-
-### Character-by-Character Modes
-
-These modes reveal text character by character:
-
-- **gradient-in**: Best for hero sections and important messages. Creates a premium feel with the brand gradient.
-- **fade-in**: Subtle and professional. Great for body text and descriptions.
-- **slide-in**: Dynamic and engaging. Perfect for announcements and CTAs.
-
-### Static Animation Modes
-
-These modes keep text visible but add motion effects:
-
-- **gradient-sweep**: Continuous animated gradient. Ideal for loading states or "magic" moments.
-- **shimmer**: Subtle pulsing effect. Works well for skeleton loaders or placeholders.
-
-## Performance Notes
-
-- The component uses CSS animations and transitions for optimal performance
-- Text is split into words and characters only when necessary (not for static modes)
-- Animations are automatically cleaned up on component unmount
-- Reduced motion support ensures accessibility without performance cost
-
-## Tips & Best Practices
+## Best Practices
 
 1. **Choose the right speed**: Use `sm` for short text, `lg` for longer passages
 2. **Don't overuse**: Too many animated elements can be distracting

common/components_list.js

@@ -12,6 +12,7 @@ module.exports = [
   'chip.vue',
   'codeblock.vue',
   'collapsible.vue',
+  'motion_text.vue',
   'combobox.vue',
   'description_list.vue',
   'dropdown.vue',