Speed = 1 still too fast

[engin-can]

Hi, I tried setting speed to 1 but I find it too fast. How can I slow it down more?

[maxeth]

Hey,

with the current setup speed={1} is the absolute minimum speed.

But I could add something like a speedScale prop which lets you extend the range of speed by a factor of your choice.

E.g, if you set speedScale=2, the range wouldn't be 1-100 but 1-200. This would result in speed={199} being ~2x as fast as the default max speed (99), and speed={1} being ~2x as slow as the previous min speed (1).

Would this work for you?

I'm not sure if this prop(name) is intuitive. Did you think of a different/better API?

https://user-images.githubusercontent.com/48837036/206111364-5eb62b7c-963c-4de6-91b5-6665d7f9cecb.mov

[bytasv]

IMO the problem with speed prop is that it doesn't really tell you in what units it's being calculated. What if instead, you had charTypeDuration which could be defined in ms, i.e. charTypeDuration={100} that means that it takes 100ms to type single char. Or could also use speed prop which would take ms (but that would be breaking change) and you could update docs

[maxeth]

@bytasv Currently, the speed defines the "base-delay" between each key-stroke relative to a fixed upper limit (currently 100), e.g. speed={60} results in a base-delay of delay =100-60=40ms (There's some randomness applied after every single keystroke to make it look more natural, so the actual delay ends up being delay + delay * (Math.random() - 0.5)).

I could replace speed with something like keyStrokeDelay which directly defines the base-delay in milliseconds without any upper limits as you suggested, or extend speed to also accept objects like speed={type: "keyStrokeDelay", value: 100} which leaves room for future features like typing speed based on Words-Per-Minute, e.g. speed={type: "wordsPerMinute", value: 120}

I think the second option would be better for now.

[maxeth]

Forgot to mention before closing, from v3.x onwards you can do:

<TypeAnimation
        sequence={[]}
        speed={{ type: 'keyStrokeDelayInMs', value: 200 }}
      />

which will result in 200ms base delay (there will be a small, random delay relative to that added after each keystroke to make the animation look more natural)

https://react-type-animation.netlify.app/examples#custom-speed