|
import { RainbowText } from './rainbowText'
|
|
import React from 'react'
|
|
|
|
export const TextAnimation1 = props => {
|
|
const texts = React.useMemo(() => {
|
|
return [
|
|
'thingtime',
|
|
'creative',
|
|
'tt',
|
|
'vibrant',
|
|
'powerful',
|
|
'love',
|
|
'infinite',
|
|
'magical',
|
|
'inspiring'
|
|
]
|
|
}, [])
|
|
|
|
const [titleText, setTitleText] = React.useState(texts[0])
|
|
|
|
React.useEffect(() => {
|
|
const newTimeout = Math.random() * 3500 + 1500
|
|
|
|
setTimeout(() => {
|
|
let newTextIdx = Math.round(Math.random() * (texts.length - 1))
|
|
if (newTextIdx === texts.indexOf(titleText)) {
|
|
newTextIdx = newTextIdx + 1
|
|
}
|
|
const newText = texts[newTextIdx] || texts[0]
|
|
setTitleText(newText)
|
|
}, newTimeout)
|
|
}, [titleText, texts])
|
|
|
|
return <RainbowText>{titleText}</RainbowText>
|
|
}
|