Added customisable rainbow text page for custom marketing material and goofing around main

remix/app/components/Splash/Splash.tsx

@@ -8,9 +8,18 @@ export const Splash = (props) => {
       alignItems="center"
       justifyContent="center"
       width="100vw"
-      height="100vh"
+      maxWidth="100vw"
+      minHeight="100vh"
+      paddingY="100px"
     >
-      <TextAnimation1></TextAnimation1>
+      <Flex
+        alignItems="center"
+        justifyContent="center"
+        width="800px"
+        textAlign="center"
+      >
+        <TextAnimation1 ce={props?.ce} texts={props?.texts}></TextAnimation1>
+      </Flex>
     </Flex>
   )
 }

remix/app/components/rainbowText.tsx

@@ -8,18 +8,28 @@ export const RainbowText = (props) => {
       sx={{
         "@keyframes moving-rainbow": {
           "0%": { backgroundPosition: "0 0" },
-          "100%": { backgroundPosition: "200% 0" },
+          "100%": { backgroundPosition: "calc(100px + 200%) 0" },
         },
         animation: "moving-rainbow 5s infinite linear",
+        "::selection": {
+          background: "transparent",
+        },
+        "::-moz-selection": {
+          background: "transparent",
+        },
       }}
       position="relative"
+      maxWidth="100%"
       color="transparent"
       fontSize="6xl"
       fontWeight="bold"
-      backgroundSize="200%"
+      backgroundSize="calc(100px + 200%)"
       bgGradient="linear-gradient(to right, #f34a4a, #ffbc48, #58ca70, #47b5e6, #a555e8, #f34a4a)"
       backgroundClip="text"
       userSelect="none"
+      outline="none"
+      contentEditable={props?.ce}
+      spellcheck="false"
     >
       {props?.children}
     </Text>

remix/app/components/textAnimation1.tsx

@@ -5,6 +5,10 @@ import { RainbowText } from "./rainbowText"
 
 export const TextAnimation1 = (props) => {
   const texts = React.useMemo(() => {
+    if (props?.texts?.length) {
+      return props?.texts
+    }
+
     return [
       "thingtime",
       "vibrant",
@@ -16,7 +20,7 @@ export const TextAnimation1 = (props) => {
       "love",
       // 'tt'
     ]
-  }, [])
+  }, [props?.texts])
 
   const [titleText, setTitleText] = React.useState(texts[0])
 
@@ -48,5 +52,5 @@ export const TextAnimation1 = (props) => {
     }, newTimeout)
   }, [titleText])
 
-  return <RainbowText>{titleText}</RainbowText>
+  return <RainbowText ce={props?.ce}>{titleText}</RainbowText>
 }

remix/app/routes/rainbow/*.tsx

@@ -0,0 +1,59 @@
+import React from "react"
+import { Flex } from "@chakra-ui/react"
+import { useLocation } from "@remix-run/react"
+
+import { Splash } from "~/components/Splash/Splash"
+import { useThingtime } from "~/components/Thingtime/useThingtime"
+
+export default function Index() {
+  const location = useLocation()
+  const { pathname } = location
+
+  const strippedPathname = React.useMemo(() => {
+    // modify /rainbow/* to just *
+
+    const ret = pathname.split("/")[2]
+
+    if (ret) {
+      return decodeURI(ret)
+    }
+
+    return "rainbow"
+  }, [pathname])
+
+  const texts = React.useMemo(() => {
+    const ret = [strippedPathname]
+
+    return ret
+  }, [strippedPathname])
+
+  return (
+    <Flex
+      sx={{
+        "::selection": {
+          background: "transparent",
+        },
+        "::-moz-selection": {
+          background: "transparent",
+        },
+        "*": {
+          "::selection": {
+            background: "transparent",
+          },
+          "::-moz-selection": {
+            background: "transparent",
+          },
+        },
+        "* grammarly-extension": {
+          display: "none !important",
+        },
+      }}
+      alignItems="center"
+      justifyContent="center"
+      flexDirection="column"
+      maxWidth="100%"
+    >
+      <Splash texts={texts} ce={true}></Splash>
+    </Flex>
+  )
+}