fix(motion-text): DLT-2804 motion-text recipe letter-spacing improvements

[jeverhart-dialpad]

fix(motion-text): DLT-2804 motion-text recipe letter-spacing improvements

Obligatory GIF (super important!)

🛠️ Type Of Change

These types will increment the version number on release:

• Fix
• Feature
• Performance Improvement
• Refactor

These types will not increment the version number, but will still deploy to documentation site on release:

• Documentation
• Build system
• CI
• Style (code style changes, not css changes)
• Test
• Other (chore)

📖 Jira Ticket

https://dialpad.atlassian.net/browse/DLT-2806

📖 Description

1. The initial change to address the Jira ticket is changing characters to have display:inline and words to have display:inline-block to better align with how text normally flows and to align the letter-spacing. See the misaligned overlap for "Text":

Note: It does shift the "slide-in" technique from a "letter-by-letter" animation to "word-by-word", which I think is actually more in line with the brand animations I've seen previously.

2. I added an additional change to update the timing for the first letter in each word because I noticed that those were appearing differently than the rest of the letters in the word. If you watch the existing gradient-in animation, look for the first letter appearing black first, and then the rest of the word has the gradient reveal. Here's an example of that in freeze-frame:

💡 Context

Original request was to "remove the ghosting effect of the layered text in the Motion Text Component". With some initial testing, we found that the ghosting effect was being caused by letter-spacing differences in the pseudo-element and the actual text characters, caused by using display:inline-block on the characters.

In addition to that issue, we found that the timing for the first letter of each word was causing the animation to be less smooth than it could be for the gradient-in variant. See the description, jira ticket, and examples below for more details.

📝 Checklist

For all PRs:

• I have ensured no private Dialpad links or info are in the code or pull request description (Dialtone is a public repo!).
• I have reviewed my changes.
• I have added all relevant documentation.
• I have considered the performance impact of my change.

For all Vue changes:

• I have added / updated unit tests.
• I have made my changes in Vue 2 and Vue 3. Note: you may sync your changes from Vue 2 to Vue 3 (or vice versa) using the ./scripts/dialtone-vue-sync.sh script. Read docs here: Dialtone Vue Sync Script
• I have validated components with a screen reader.
• I have validated components keyboard navigation.

For all CSS changes:

• I have used design tokens whenever possible.
• I have considered how this change will behave on different screen sizes.
• I have visually validated my change in light and dark mode.
• I have used gap or flexbox properties for layout instead of margin whenever possible.

🔮 Next Steps

Test in more product contexts.

📷 Screenshots / GIFs

502751701-35c2fdd1-487a-4968-995b-35485b012f9f.1.mov

Progress

Before:

Screen.Recording.2025-12-18.at.1.14.25.PM.mov

Screen.Recording.2025-12-18.at.1.15.13.PM.mov

After:

Screen.Recording.2025-12-29.at.3.47.55.PM.mov

Screen.Recording.2025-12-18.at.1.15.45.PM.mov

🔗 Sources

[github-actions]

Please add either the visual-test-ready or no-visual-test label to this PR depending on whether you want to run visual tests or not.
It is recommended to run visual tests if your PR changes any UI. ‼️

[github-actions]

✔️ Deploy previews ready!
😎 Dialtone documentation preview: https://dialtone.dialpad.com/deploy-previews/pr-1001/
😎 Dialtone-vue 2 preview: https://dialtone.dialpad.com/vue/deploy-previews/pr-1001/
😎 Dialtone-vue 3 the preview: https://dialtone.dialpad.com/vue3/deploy-previews/pr-1001/