feat: main Updated index page animation

remix/app/components/rainbowText.tsx

@@ -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>
+  )
+}

remix/app/components/textAnimation1.tsx

@@ -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>
+}

remix/app/routes/index.tsx

@@ -1,80 +1,9 @@
-import { Box, Flex, Text } from '@chakra-ui/react'
+import { Flex } from '@chakra-ui/react'
-import React from '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
+      <TextAnimation1 />
-          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>
-    </>
   )
 }