|
import { Box, Flex, Text } from '@chakra-ui/react'
|
|
import React from 'react'
|
|
|
|
export default function Index () {
|
|
const texts = [
|
|
// 't',
|
|
'tt',
|
|
'/',
|
|
'thingtime'
|
|
// 'tht',
|
|
// 'thit',
|
|
// 'thint',
|
|
// 'thingt',
|
|
// 'thingti',
|
|
// 'thingtim',
|
|
// 'thingtime',
|
|
// 'Thingtime',
|
|
// 'ThingTime',
|
|
// 'Thing Time'
|
|
]
|
|
|
|
const [titleText, setTitleText] = React.useState(texts[0])
|
|
|
|
const [started, setStarted] = React.useState(false)
|
|
|
|
// const mainText = 'Thing Time'
|
|
// const mainText = "Thingtime"
|
|
const mainText = 'thingtime'
|
|
|
|
React.useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
const newTextIdx = texts?.indexOf(titleText) + 1
|
|
const newText = texts[newTextIdx] || texts[0]
|
|
setTitleText(newText)
|
|
// if (titleText === 'tt') {
|
|
// setTitleText('tt.')
|
|
// } else if (titleText === 'tt.') {
|
|
// setTitleText('tt..')
|
|
// } else if (titleText === 'tt..') {
|
|
// setTitleText('tt...')
|
|
// } else if (titleText === 'tt...') {
|
|
// setTitleText(mainText)
|
|
// } else if (titleText === mainText) {
|
|
// if (!started) {
|
|
// setStarted(true)
|
|
// setTimeout(() => {
|
|
// setTitleText('tt')
|
|
// setStarted(false)
|
|
// }, 15000)
|
|
// }
|
|
// }
|
|
}, 2000)
|
|
return () => clearInterval(interval)
|
|
}, [titleText, started])
|
|
|
|
return (
|
|
<>
|
|
<Flex w='100vw' h='100vh' alignItems='center' justifyContent='center'>
|
|
<Text
|
|
as='h1'
|
|
fontSize='6xl'
|
|
fontWeight='bold'
|
|
backgroundClip={'text'}
|
|
color='transparent'
|
|
bgGradient='linear-gradient(to right, #f34a4a, #ffbc48, #58ca70, #47b5e6, #a555e8, #f34a4a);'
|
|
backgroundSize='200%'
|
|
sx={{
|
|
'@keyframes moving-rainbow': {
|
|
'0%': { backgroundPosition: '0 0' },
|
|
'100%': { backgroundPosition: '200% 0' }
|
|
},
|
|
animation: 'moving-rainbow 5s infinite linear'
|
|
}}
|
|
>
|
|
{titleText}
|
|
</Text>
|
|
</Flex>
|
|
</>
|
|
)
|
|
}
|