|
import { Box } from '@chakra-ui/react'
|
|
import { RainbowText } from './rainbowText'
|
|
import React from 'react'
|
|
|
|
export const TextAnimation1 = props => {
|
|
const texts = React.useMemo(() => {
|
|
return [
|
|
'thingtime',
|
|
'vibrant',
|
|
'infinite',
|
|
'creative',
|
|
'powerful',
|
|
'magical',
|
|
'inspiring',
|
|
'love',
|
|
// 'tt'
|
|
]
|
|
}, [])
|
|
|
|
const [titleText, setTitleText] = React.useState(texts[0])
|
|
|
|
const [usedTexts, setUsedTexts] = React.useState(["thingtime"])
|
|
|
|
const state = React.useRef({})
|
|
|
|
React.useEffect(() => {
|
|
state.current = { titleText, texts, usedTexts }
|
|
}, [titleText, texts, usedTexts])
|
|
|
|
|
|
React.useEffect(() => {
|
|
const newTimeout = Math.random() * 1500 + 2500 + (titleText === "thingtime" ? 750 : 0)
|
|
|
|
setTimeout(() => {
|
|
// choose an unused text or pick texts[0]
|
|
const usedTexts = state.current.usedTexts
|
|
const unusedTexts = texts.filter(text => !usedTexts.includes(text))
|
|
// pick a random unused text
|
|
const randomIdx = Math.floor(Math.random() * unusedTexts.length)
|
|
const newText = unusedTexts.length > 0 ? unusedTexts[randomIdx] : texts[0]
|
|
if (!unusedTexts.length) {
|
|
setUsedTexts(["thingtime"])
|
|
} else {
|
|
setUsedTexts([...usedTexts, newText])
|
|
}
|
|
setTitleText(newText)
|
|
}, newTimeout)
|
|
|
|
}, [titleText])
|
|
|
|
return <RainbowText>{titleText}</RainbowText>
|
|
}
|