[BUG]: TextLoop separator overlaps letters because default text already contains the separator

[Persianwolf404]

Describe the issue

On the TextLoop component, one of the ✦ separators occasionally lands on top of a letter instead of sitting cleanly between repetitions.

I noticed this bug while using Firefox on my system. It is visible on the wave shape. You usually have to wait a few seconds for it to appear. Chromium-based browsers often do not show the problem.

Root cause

The default props are:

text = 'React ✦ Bits'
separator = '✦'

When uppercase is true, the text becomes "REACT ✦ BITS".
The component then appends another separator:

const gap = separator ? \u00A0${separator}\u00A0 : '\u00A0\u00A0\u00A0';
return ${base}${gap};

So the actual string that gets repeated is:

REACT ✦ BITS ✦ REACT ✦ BITS ✦ ...

Having the separator character both inside the phrase and as the joining character breaks the text measurement + textLength / lengthAdjust calculation on the SVG path in stricter browsers (like Firefox).

Reproduction Link

https://reactbits.dev/text-animations/text-loop

Steps to reproduce

Steps to reproduce

1. Open https://reactbits.dev/text-animations/text-loop on firefox
2. Wait a few seconds and watch the wave animation — one of the ✦ characters will land on top of a letter (usually the “R” of REACT)

Validations

• I have checked other issues to see if my issue was already reported or addressed