feat: main Updated index page animation

Browse Source
This commit is contained in:
Nikolaj Frey 2023-06-27 11:18:08 +10:00
parent 24615e5c33
commit 50a919011a
4 changed files with 66 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
remix/app/components/rainbowText.tsx Normal file
View File

@ -0,0 +1,25 @@
import { Text } from '@chakra-ui/react'
import React from 'react'
export const RainbowText = props => {
return (
<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'
}}
>
{props?.children}
</Text>
)
}

36
remix/app/components/textAnimation1.tsx Normal file
View File

@ -0,0 +1,36 @@
import { RainbowText } from './rainbowText'
import React from 'react'
export const TextAnimation1 = props => {
const texts = React.useMemo(() => {
return [
// 't',
'tt',
'thingtime'
// 'tt / thingtime'
// 'tht',
// 'thit',
// 'thint',
// 'thingt',
// 'thingti',
// 'thingtim',
// 'thingtime',
// 'Thingtime',
// 'ThingTime',
// 'Thing Time'
]
}, [])
const [titleText, setTitleText] = React.useState(texts[0])
React.useEffect(() => {
const interval = setInterval(() => {
const newTextIdx = texts?.indexOf(titleText) + 1
const newText = texts[newTextIdx] || texts[0]
setTitleText(newText)
}, 5000)
return () => clearInterval(interval)
}, [titleText, texts])
return <RainbowText>{titleText}</RainbowText>
}

81
remix/app/routes/index.tsx
View File

@ -1,80 +1,9 @@
import { Box, Flex, Text } from '@chakra-ui/react'
import React from 'react'
import { Flex } from '@chakra-ui/react'
import { TextAnimation1 } from '~/components/textAnimation1'
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>
</>
<Flex w='100vw' h='100vh' alignItems='center' justifyContent='center'>
<TextAnimation1 />
</Flex>
)
}

BIN
remix/public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 15 KiB