diff --git a/apps/portal/app/routes/the-big-bang.tsx b/apps/portal/app/routes/the-big-bang.tsx
index 15a085f62..90830576a 100644
--- a/apps/portal/app/routes/the-big-bang.tsx
+++ b/apps/portal/app/routes/the-big-bang.tsx
@@ -1,3 +1,5 @@
+import { useEffect, useMemo, useState } from 'react'
+
import {
Button,
ButtonSize,
@@ -9,12 +11,13 @@ import { ApiError, IdentitiesService } from '@0xintuition/api'
import PrivyLogout from '@client/privy-logout'
import { Header } from '@components/header'
+import { PATHS } from '@consts/paths'
import { getMaintenanceMode } from '@lib/utils/maintenance'
import { LoaderFunctionArgs, redirect } from '@remix-run/node'
import { json, Link, useLoaderData } from '@remix-run/react'
import { fetchWrapper } from '@server/api'
import { requireUserWallet } from '@server/auth'
-import { PATHS } from 'app/consts'
+import { motion } from 'framer-motion'
export async function loader({ request }: LoaderFunctionArgs) {
getMaintenanceMode()
@@ -48,59 +51,104 @@ export async function loader({ request }: LoaderFunctionArgs) {
return json({ wallet })
}
+const TerminalText = ({
+ text,
+ delay = 50,
+}: {
+ text: string
+ delay?: number
+}) => {
+ const [displayText, setDisplayText] = useState('')
+
+ useEffect(() => {
+ let currentIndex = 0
+ const intervalId = setInterval(() => {
+ if (currentIndex <= text.length) {
+ setDisplayText(text.slice(0, currentIndex))
+ currentIndex++
+ } else {
+ clearInterval(intervalId)
+ }
+ }, delay)
+
+ return () => {
+ clearInterval(intervalId)
+ }
+ }, [text, delay])
+
+ return {displayText}
+}
+
export default function WelcomePage() {
const { wallet } = useLoaderData()
+ const [currentParagraph, setCurrentParagraph] = useState(0)
+ const paragraphs = useMemo(
+ () => [
+ 'In the beginning, there was nothing. Then suddenly - everything.',
+ 'All that the universe would ever be composed of, birthed into existence, in an instant.',
+ 'A single spec of condensed matter, exploding into a vast universe.',
+ 'While energy would neither be created nor destroyed, the interplay between these newly created atoms would go on to create something beautiful...',
+ 'What was made separate would once again become whole. And what would be created in the process would be even more beautiful than what came before...',
+ "Our story begins with the 'atom'.",
+ 'The fundamental building block of our universe.',
+ "And our 'atoms' begin with you.",
+ ],
+ [],
+ )
+
+ useEffect(() => {
+ if (currentParagraph < paragraphs.length - 1) {
+ const timer = setTimeout(() => {
+ setCurrentParagraph((prevParagraph) => prevParagraph + 1)
+ }, paragraphs[currentParagraph].length * 50)
+
+ return () => {
+ clearTimeout(timer)
+ }
+ }
+ }, [currentParagraph, paragraphs])
+
+ const allParagraphsDisplayed = currentParagraph === paragraphs.length - 1
return (
-
-
+
+
Chapter 0: The Big Bang
-
-
- In the beginning, there was nothing. Then suddenly - everything.
-
-
- All that the universe would ever be composed of, birthed into
- existence, in an instant.
-
-
- A single spec of condensed matter, exploding into a vast universe.
-
-
- While energy would neither be created nor destroyed, the interplay
- between these newly created atoms would go on to create something
- beautiful...
-
-
- What was made separate would once again become whole. And what
- would be created in the process would be even more beautiful than
- what came before...
-
-
-
-
- Our story begins with the ‘atom’.
-
-
- The fundamental building block of our universe.
-
-
- And our ‘atoms’ begin with you.
-
+